audio / video live streaming

3,421 views
Skip to first unread message

Alexandre Viana

unread,
Sep 25, 2010, 6:39:01 PM9/25/10
to phonegap
hi guys,

i need make an app to live stream audio / video in iphone . how i can
make it with phonegap?
the stream is by http in an m3u8 playlist...

i tried some technics, but, without success:

1) for live audio, i used html 5 "<audio src>" tag, but, i can't use
autoplay (its essencial for an webradio app)

2) for live video, i tried html 5 "<video src>" tag, but, with this
tag, i can't use the orientation (the video always is displayed in
vertical)

3) for live video, i tried direct link to m3u8 using childbrowser,
but, this opens two windows: the childbrowser window and the quicktime
window (for quit, the user have to press "done" twice)


any suggestions?

Giacomo Balli

unread,
Sep 26, 2010, 8:21:13 AM9/26/10
to phonegap
i open the link childbrowser. works like a charm

Alexandre Viana

unread,
Sep 26, 2010, 8:45:07 AM9/26/10
to phonegap
Giacomo,
It´s open ok, but, the user have to press "done" twice to back to application :(

[]s

-- 
Alexandre Viana
Analista de Sistemas para Internet


--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en

For more info on PhoneGap or to download the code go to www.phonegap.com




Giacomo Balli

unread,
Sep 26, 2010, 9:03:46 AM9/26/10
to phonegap
video will always open and play full screen therefore the user has to
tap done at least once...

On Sep 26, 2:45 pm, Alexandre Viana <avi...@gmail.com> wrote:
> Giacomo,
> It´s open ok, but, the user have to press "done" twice to back to
> application :(
>
> []s
>
> --
> Alexandre Viana
> Analista de Sistemas para Internet
>
> On Sun, Sep 26, 2010 at 9:21 AM, Giacomo Balli <giacomoba...@gmail.com>wrote:
>
>
>
> > i open the link childbrowser. works like a charm
>
> > On Sep 26, 12:39 am, Alexandre Viana <avi...@gmail.com> wrote:
> > > hi guys,
>
> > > i need make an app to live stream audio / video in iphone . how i can
> > > make it with phonegap?
> > > the stream is by http in an m3u8 playlist...
>
> > > i tried some technics, but, without success:
>
> > > 1) for live audio, i used html 5 "<audio src>" tag, but, i can't use
> > > autoplay (its essencial for an webradio app)
>
> > > 2) for live video, i tried html 5 "<video src>" tag, but, with this
> > > tag, i can't use the orientation (the video always is displayed in
> > > vertical)
>
> > > 3) for live video, i tried direct link to m3u8 using childbrowser,
> > > but, this opens two windows: the childbrowser window and the quicktime
> > > window  (for quit, the user have to press "done" twice)
>
> > > any suggestions?
>
> > --
> > You received this message because you are subscribed to the Google
> > Groups "phonegap" group.
> > To post to this group, send email to phon...@googlegroups.com
> > To unsubscribe from this group, send email to
> > phonegap+u...@googlegroups.com<phonegap%2Bunsubscribe@googlegroups.c om>

Alexandre Viana

unread,
Sep 26, 2010, 2:01:38 PM9/26/10
to phonegap
hi
the problem is not open the link..the problem is when the user need close the live streaming..he need press "done" to quit quicktime, then, press "done" again to close the childbrowser window.

Giacomo Balli

unread,
Sep 27, 2010, 4:43:55 AM9/27/10
to phonegap
that's what I'm saying, on the iphone all videos will play fullscreen
in a quicktime window; therefore the user will have to click "Done" at
least once.

On Sep 26, 8:01 pm, Alexandre Viana <avi...@gmail.com> wrote:
> hi
> the problem is not open the link..the problem is when the user need close
> the live streaming..he need press "done" to quit quicktime, then, press
> "done" again to close the childbrowser window.
>
> > <phonegap%2Bunsubscr...@googlegroups.c om>
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/phonegap?hl=en?hl=en
>
> > > > For more info on PhoneGap or to download the code go
> > towww.phonegap.com
>
> > --
> > You received this message because you are subscribed to the Google
> > Groups "phonegap" group.
> > To post to this group, send email to phon...@googlegroups.com
> > To unsubscribe from this group, send email to
> > phonegap+u...@googlegroups.com<phonegap%2Bunsubscribe@googlegroups.c om>
> > For more options, visit this group at
> >http://groups.google.com/group/phonegap?hl=en?hl=en
>
> > For more info on PhoneGap or to download the code go towww.phonegap.com
>
> --

jcesar

unread,
Sep 27, 2010, 5:14:52 PM9/27/10
to phonegap
He only wants to press done once, the done of quicktime, but not the
done of childbrowser or similar
> > > > > phonegap+u...@googlegroups.com<phonegap%2Bunsubscr...@googlegroups.c om>
> > > <phonegap%2Bunsubscr...@googlegroups.c om>
> > > > > For more options, visit this group at
> > > > >http://groups.google.com/group/phonegap?hl=en?hl=en
>
> > > > > For more info on PhoneGap or to download the code go
> > > towww.phonegap.com
>
> > > --
> > > You received this message because you are subscribed to the Google
> > > Groups "phonegap" group.
> > > To post to this group, send email to phon...@googlegroups.com
> > > To unsubscribe from this group, send email to
> > > phonegap+u...@googlegroups.com<phonegap%2Bunsubscr...@googlegroups.c om>
> > > For more options, visit this group at
> > >http://groups.google.com/group/phonegap?hl=en?hl=en
>
> > > For more info on PhoneGap or to download the code go towww.phonegap.com
>
> > --

Gaby Desjardins

unread,
Oct 25, 2010, 6:26:57 AM10/25/10
to phonegap
Hey..jeez
everybody is looking for this... just one tap finger.

g

On 27 sep, 23:14, jcesar <jcesarmob...@gmail.com> wrote:
> He only wants to press done once, the done of quicktime, but not the
> done ofchildbrowseror similar
>
> On 27 sep, 10:43, Giacomo Balli <giacomoba...@gmail.com> wrote:
>
> > that's what I'm saying, on the iphone all videos will play fullscreen
> > in a quicktime window; therefore the user will have to click "Done" at
> > least once.
>
> > On Sep 26, 8:01 pm, Alexandre Viana <avi...@gmail.com> wrote:
>
> > > hi
> > > the problem is not open the link..the problem is when the user need close
> > > the live streaming..he need press "done" to quit quicktime, then, press
> > > "done" again to close thechildbrowserwindow.
>
> > > On Sun, Sep 26, 2010 at 10:03 AM, Giacomo Balli <giacomoba...@gmail.com>wrote:
>
> > > > video will always open and play full screen therefore the user has to
> > > > tap done at least once...
>
> > > > On Sep 26, 2:45 pm, Alexandre Viana <avi...@gmail.com> wrote:
> > > > > Giacomo,
> > > > > It´s open ok, but, the user have to press "done" twice to back to
> > > > > application :(
>
> > > > > []s
>
> > > > > --
> > > > > Alexandre Viana
> > > > > Analista de Sistemas para Internet
>
> > > > > On Sun, Sep 26, 2010 at 9:21 AM, Giacomo Balli <giacomoba...@gmail.com
> > > > >wrote:
>
> > > > > > i open the linkchildbrowser. works like a charm
>
> > > > > > On Sep 26, 12:39 am, Alexandre Viana <avi...@gmail.com> wrote:
> > > > > > > hi guys,
>
> > > > > > > i need make an app to live stream audio / video in iphone . how i can
> > > > > > > make it with phonegap?
> > > > > > > the stream is by http in an m3u8 playlist...
>
> > > > > > > i tried some technics, but, without success:
>
> > > > > > > 1) for live audio, i used html 5 "<audio src>" tag, but, i can't use
> > > > > > > autoplay (its essencial for an webradio app)
>
> > > > > > > 2) for live video, i tried html 5 "<video src>" tag, but, with this
> > > > > > > tag, i can't use the orientation (the video always is displayed in
> > > > > > > vertical)
>
> > > > > > > 3) for live video, i tried direct link to m3u8 usingchildbrowser,
> > > > > > > but, this opens two windows: thechildbrowserwindow and the

Ade Goddard

unread,
Oct 25, 2010, 6:44:42 AM10/25/10
to Gaby Desjardins, phonegap
You can mod pgap so it plays any video direct in media player.
Negating need for childbrowser will post code later when im home

Sent from my iPhone

Gabriel

unread,
Oct 25, 2010, 7:22:48 AM10/25/10
to Ade Goddard, phonegap
Wow really ?

I would very happy to read from it !
I'm waiting for your snippet, and I am sure, anybody would be interested.

Thanks !

Gaby Desjardins

unread,
Oct 25, 2010, 3:30:40 PM10/25/10
to phonegap
So what about this code ?
How could I mod gap to play video in native?

Thanks !

On 25 oct, 13:22, Gabriel <biga...@gmail.com> wrote:
> Wow really ?
>
> I would very happy to read from it !
> I'm waiting for your snippet, and I am sure, anybody would be interested.
>
> Thanks !
>
> Le 25 oct. 2010 à 12:44, Ade Goddard a écrit :
>
> > You can mod pgap so it plays any video direct in media player.
> > Negating need for childbrowser will post code later when im home
>
> > Sent from my iPhone
>

Adrian Goddard

unread,
Oct 25, 2010, 4:35:55 PM10/25/10
to Gabriel, phonegap
Hi Gabriel

As mentioned earlier here is the code...however sorry but I forgot to mention this is a iPhone only solution. But I Hope is still of some use. Credit must go to Rich Thibault  and PanMan for this:) This basically checks if the url being accessed is a video file, if it is then it opens in the media player.

In your appdelegate.m file, at the top where the other imports are add: 
#import <MediaPlayer/MediaPlayer.h>

In your appdelegate.m file find the webview shouldStartLoadWithRequest method and change to the extended one below:





/**
 * Start Loading Request
 * This is where most of the magic happens... We take the request(s) and process the response.
 * From here we can re direct links and other protocalls to different internal methods.
 */
- (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
/***  Credit goes to PanMan (Martijn Pannevis <mar...@panman.nl>) for this elegent hack 
Watch for video URLs and launch them in the media player.  No HTML5 video tag necessary, just a normal link.
***/
NSURL *url = [request URL];


if (![[url scheme] isEqualToString:@"gap"] && ([[[url path] pathExtension] isEqualToString:@"mp4" ] || [[[url path] pathExtension] isEqualToString:@"m4v" ] || [[[url path] pathExtension] isEqualToString:@"m3u8" ] || [[[url path] pathExtension] isEqualToString:@"mp3" ])) {
//video files are .mp4 or m4v, stream indexes are m3u8
//it's a movie, go play!
//NSLog([url]);
[self playMovieAtURL:url];
return NO;
} else {
return [ super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType ];
}



}

-(void)playMovieAtURL:(NSURL*)theURL {
MPMoviePlayerController* theMovie=[[MPMoviePlayerController alloc] initWithContentURL:theURL];
theMovie.scalingMode=MPMovieScalingModeAspectFit;
// Register for the playback finished notification.
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(myMovieFinishedCallback:)
name:MPMoviePlayerPlaybackDidFinishNotification
  object:theMovie];


// Movie playback is asynchronous, so this method returns immediately.
[theMovie play];
}

-(void)myMovieFinishedCallback:(NSNotification*)aNotification
{
MPMoviePlayerController* theMovie=[aNotification object];
[[NSNotificationCenter defaultCenter] removeObserver:self
name:MPMoviePlayerPlaybackDidFinishNotification
  object:theMovie];
[theMovie stop];
// Release the movie instance created in playMovieAtURL
//Bug fix for autoplay bug on 3.0
float version = [[[UIDevice currentDevice] systemVersion] floatValue];
if (version >= 3.0) {
// iPhone 3.0 code here
//    theMovie.initialPlaybackTime = -1.0; //Breaks on 2.x compiling
[theMovie setInitialPlaybackTime: -1.0]; //Only gives a warning on 2.x :)
}
[theMovie release];
NSLog(@"Go STOP received");

Gabriel

unread,
Oct 26, 2010, 7:14:15 AM10/26/10
to Adrian Goddard, phonegap
Hi !
Thank you for the idea, here what I get :

----- first click on the href pointing to mp4 content

Cannot find executable for CFBundle/CFPlugIn 0x73b12f0 </Library/Audio/Plug-Ins/HAL/JackRouter.plugin> (not loaded)
2010-10-26 13:09:45.440 App-Final[3059:800b] Cannot find function pointer New_JackRouterPlugIn for factory 7CB18864-927D-48B5-904C-CCFBCFBC7ADD in CFBundle/CFPlugIn 0x73b12f0 </Library/Audio/Plug-Ins/HAL/JackRouter.plugin> (not loaded)
2010-10-26 13:09:48.119 App-Final[3059:8603] AddRunningClient starting device on non-zero client count


--Second click 


2010-10-26 13:09:56.705 App-Final[3059:207] Go STOP received

--and other :
2010-10-26 13:10:19.926 App-Final[3059:207] Go STOP received
2010-10-26 13:10:21.686 App-Final[3059:207] Go STOP received

Any idea or hints, your solution look good ! I really wish it would work.

Thank you

Gabriel

unread,
Oct 26, 2010, 9:41:30 AM10/26/10
to Adrian Goddard, phonegap
Hello all,

The plugin thing was due to plugin in my computer.
Nothing to worry about on the phone... 
Unfortunately, I still can not open the mediaplayer.
It did switch to a different thread :

[Switching to thread 13059]
[Switching to thread 14083]

It did switch to a different thread and play...

2010-10-26 15:20:02.594 App-Final[2345:307] Play
[Switching to thread 14083]

but nothing shows up... Actually, it does go to the 

playMovieAtURL

if I click again I get :

Go STOP received

Actually I do not get where the view showed up ?

any phoneGap developer in the wild ?

Thanks 

Le 25 oct. 2010 à 22:35, Adrian Goddard a écrit :

Gabriel

unread,
Oct 26, 2010, 5:25:48 PM10/26/10
to phonegap
Hi all !

I hope someone could make a plugin from this. Here is the code that play on iOS 3.2 and more.
I did not test it under iOS 3.2, if any one could it would be NICE !

You have to add the code in your appdelegate*.h

The code is taken from :

Now I need to modify the magic happen code to display the childbrowser view ! and I'll be happy !

[CODE]

@interface PwC_FinalAppDelegate : PhoneGapDelegate {
MPMoviePlayerViewController *mViewPlayer;
MPMoviePlayerController *mMPPlayer;
}

@end
[/CODE]

And in appdelegate*.m

[CODE]
@implementation app_FinalAppDelegate

- (id) init
{
/** If you need to do any extra app-specific initialization, you can do it here
 *  -jm
 **/
window.autoresizesSubviews = YES;
     return [super init];
}

/**
 * This is main kick off after the app inits, the views and Settings are setup here.
 */
- (void)applicationDidFinishLaunching:(UIApplication *)application
{
super applicationDidFinishLaunching:application ];
}

-(id) getCommandInstance:(NSString*)className
{
/** You can catch your own commands here, if you wanted to extend the gap: protocol, or add your
 *  own app specific protocol to it. -jm
 **/
return [super getCommandInstance:className];
}

/**
 Called when the webview finishes loading.  This stops the activity view and closes the imageview
 */
- (void)webViewDidFinishLoad:(UIWebView *)theWebView 
{
return [ super webViewDidFinishLoad:theWebView ];
}

- (void)webViewDidStartLoad:(UIWebView *)theWebView 
{
return [ super webViewDidStartLoad:theWebView ];
}

/**
 * Fail Loading With Error
 * Error - If the webpage failed to load display an error with the reson.
 */
- (void)webView:(UIWebView *)theWebView didFailLoadWithError:(NSError *)error 
{
return [ super webView:theWebView didFailLoadWithError:error ];
}

/**
 * Start Loading Request
 * This is where most of the magic happens... We take the request(s) and process the response.
 * From here we can re direct links and other protocalls to different internal methods.
 */
- (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
/***  Credit goes to PanMan (Martijn Pannevis <mar...@panman.nl>) for this elegent hack 
 Watch for video URLs and launch them in the media player.  No HTML5 video tag necessary, just a normal link.
 ***/
NSURL *url = [request URL];

if (![[url schemeisEqualToString:@"gap"] && ([[[url pathpathExtensionisEqualToString:@"mp4" ] || [[[url pathpathExtensionisEqualToString:@"m4v" ] || [[[url pathpathExtensionisEqualToString:@"m3u8" ] || [[[url pathpathExtensionisEqualToString:@"mp3" ])) {
//video files are .mp4 or m4v, stream indexes are m3u8
//it's a movie, go play!
//NSLog([url]);
[self playMovieAtURL:url];
return NO;
else {
return [ super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType ];
}


}

- (void)playMovieAtURL:(NSURL*)url
{

super.viewController.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;

if ([NSClassFromString(@"MPMoviePlayerController"instancesRespondToSelector:@selector(view)])
{
// running iOS 3.2 or better
mViewPlayer = [[MPMoviePlayerViewController allocinitWithContentURL:url];
mViewPlayer.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
super.viewController.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;

[super.viewController presentModalViewController:mViewPlayer animated:YES];

[[NSNotificationCenter defaultCenteraddObserver:self
 selector:@selector(movieDidExitFullscreen:)
 name:MPMoviePlayerPlaybackDidFinishNotification
   object:[mViewPlayer moviePlayer]];
}
else 
{
mMPPlayer = [[MPMoviePlayerController allocinitWithContentURL:url];
[mMPPlayer play];

[[NSNotificationCenter defaultCenteraddObserver:self 
 selector:@selector(moviePlayerDidFinish:)
 name:MPMoviePlayerPlaybackDidFinishNotification
   object:mMPPlayer];
}

}


- (void) movieDidExitFullscreen:(NSNotification*) aNotification {
MPMoviePlayerController *player = [aNotification object];
[[NSNotificationCenter defaultCenter]
 removeObserver:self
 name:MPMoviePlayerPlaybackDidFinishNotification
 object:player];
[player pause];
[player stop];

[super.viewController dismissModalViewControllerAnimated:YES];

[mViewPlayer.view removeFromSuperview];
[mViewPlayer release];

mViewPlayer = nil;
}

- (void) moviePlayerDidFinish:(NSNotification*) aNotification {
MPMoviePlayerController *player = [aNotification object];
[[NSNotificationCenter defaultCenter]
 removeObserver:self
 name:MPMoviePlayerPlaybackDidFinishNotification
 object:player];
[player pause];
[player stop];
[player release];

mMPPlayer = nil;
}


- (BOOL) execute:(InvokedUrlCommand*)command
{
return [ super execute:command];
}

- (void)dealloc
{
super dealloc ];
}

@end
[/CODE]
Le 25 oct. 2010 à 22:35, Adrian Goddard a écrit :

Gabriel

unread,
Oct 27, 2010, 4:39:12 AM10/27/10
to phonegap
One more thing for Sencha (and other user)
You should use 
[mViewPlayer.moviePlayer setRepeatMode:MPMovieRepeatModeOne];

for the playback. Sometimes, the view goes back to phoneGap and a GAP appears at the bottom.
It not elegant. Forcing user to touch the DONE button always keep the restored view clean :)

Enjoy !

Le 25 oct. 2010 à 12:44, Ade Goddard a écrit :

Reply all
Reply to author
Forward
0 new messages