live stream to html 5 <video> tag in IOS devices (iPHone,Ipad)

Report · Oct 19, 2011

working with FMS 3.5

I have a webcam live video chat system with many users

working only on browsers how support flash.

I want to work with FMS 4.5

in order to upgrade my system to be able to use it with html 5 <video> tag

in safari browser in IOS devices (iPHone,Ipad).

I do not find any simple example or tutorial

that show how it need to be done.

What changes i have to make in my actionscript server code

in my main.asc file in my live chat appliction folder?

it seys:

"Important: You do not need to write server-side code for HTTP Dynamic Streaming.

The livepkgr application has a Server-Side ActionScript file that assigns streams

to a live event."

but is it done automatically to any stream or do i have to write some server-side code

to start it - or do i need this event at all?

What is the url i have to write in the src atribute of the html 5 <video> tag

in order that the user in safary browser on iPHone,Ipad will see the stream?

this link is not halpfull to me:

http://help.adobe.com/en_US/flashmediaserver/devguide/WSd391de4d9c7bd609-52e437a812a3725dfa0-8000.ht...

because it is working with: Flash Media Live Encoder and my users work only with browsers.

this link is not halpfull to me either:

http://help.adobe.com/en_US/flashmediaserver/devguide/WSeb6b7485f9649bf23d103e5512e08f3a338-8000.htm...

because it do not show simple example or tutorial how to work with html 5 <video> tag

It do not give working simple example - the more you read the more you get confused...

I am really desperate for any halp...

big thanks for any

cheinan

Report · Oct 19, 2011

Remember, that you need to publish video as H264 codec and audio as AAC/HEAAC for it to work with ios player.. Flash player may not yet support this combination..

Anyways from the publishing perspective and for your understanding .. here's what one need to do..

From the publisher you will have to :

nc = new NetConnection();

nc.connect("rtmp://example.com/livepkgr");

ns = new NetStream(nc);

ns.publish("livestream?adbe-live-event=liveevent");

This will publish your stream in livepkgr app with name livestream and on event liveevent.

Once you have tried this.. just look for live stream content being recorded in <livepkgr>/streams/_definst_/liveevent folder .. and content size is growing..

Once you are sure that content is being recorded and growing with time, you are ready to subscribe the content from the ios player.

To subscribe to this particular stream, you may use the URL http://example.com:8134/hls-live/livepkgr/_definst_/liveevent/livestream.m3u8

Here, livestream, liveevent are variables that you can replace according to your wish .. example.com is your server.. you may use server's ip too..

Report · Oct 21, 2011

thanks for your reply

I will appreciate if you can halp me to clear some things

when you says:

"

From the publisher you will have to:

nc = new NetConnection();

nc.connect("rtmp://example.com/livepkgr");

ns = new NetStream(nc);

ns.publish("livestream?adbe-live-event=liveevent");

"

you mean from the flash media server actionscript 2 code

or from the user swf actionscript 3 code

that broadcast live (asume the user who broadcast do not use apple devices),

and in case its from the user side - very important!!! - do i not have to use

my old application folder with all its main.asc logic code on server?

and where do i put this main.asc logic code i need?

when you says:

"Once you are sure that content is being recorded and growing with time, you are ready to subscribe the content from the ios player."

you mean when i broadcast live - one of the things in order to check if its working

is to set Interval in my actionscript 2 server code who check that recorded file size is growing with time?

And last end very important

when you says:

"you may use the URL http://example.com:8134/hls-live/livepkgr/_definst_/liveevent/livestre am.m3u8"

in the url

what dose: "8134" mean?

what dose: "hls-live" mean?

what dose: "livestre am.m3u8" mean?

big thanks for your effort and halp

cheinan

Report · Oct 22, 2011

Hi,

I can clarify some the points above.

The code snippet is to be used on the user side, in AS3, for publishing the live content first to the server, which will then be streamed to iOS.

You need to use the application 'livepkgr' to be able to stream to iOS. You can make similar applications as well, though.

To check the recording, Nitin above , must meant to just manually confirm whether the recording has indeed started. I do not recommend a script based confirmation. As long as the playback is happening, recording is confirmed

8134 is the port on which apache that's bundled on FMS is listening on. The rest of the items are specific keywords and extensions used. You should check the documentation for many other details @ http://help.adobe.com/en_US/flashmediaserver/devguide/WSeb6b7485f9649bf23d103e5512e08f3a338-8000.htm...

Thank you !

Report · Oct 23, 2011

Big thanks for your reply

Really helped me on my long understanding way to upgrade my live chat application to

work with IOS devices.

So lets continue... make this important post to be a good helper for all developers on their way to stream to IOS devices.

If you can I clarify this - Nitin Goel says:

"Remember, that you need to publish video as H264 codec and audio as AAC/HEAAC for it to work with ios player.. Flash player may not yet support this combination.."

It is not possible for me to use Flash Media Live Encoder.

In this article:

http://sonnati.wordpress.com/2011/05/14/a-dream-comes-true-h-264-encoding-into-flash-player-11/

it says:

"A dream comes true: H.264 encoding into Flash Player 11"

and its done by this actionscript 3 code:

var h264Settings:H264VideoStreamSettings = new H264VideoStreamSettings();

h264Settings.setProfileLevel(H264Profile.BASELINE, H264Level.LEVEL_2);

stream.videoStreamSettings = h264Settings;

which will be connected to the NetStream like this i guess:

var h264Settings:H264VideoStreamSettings = new H264VideoStreamSettings();

h264Settings.setProfileLevel(H264Profile.BASELINE, H264Level.LEVEL_2);

nc = new NetConnection();

nc.connect("rtmp://example.com/livepkgr");

ns = new NetStream(nc);

ns.videoStreamSettings = h264Settings;

ns.publish("livestream?adbe-live-event=liveevent");

Is this what need to be done in order to publish video as H264 from webcam and Flash Player 11 in user browser?

And what about publish audio as AAC/HEAAC?

Another important thing:

I am writing my actionscript 3 code in my flash CS4 and publish it to swf.

With this code obviously it give me error...

do i need to upgrade to CS5 or CS5.5 and then i will be able to publish with this code?

again big thanks for any help

cheinan

Report · Oct 23, 2011

Hi,

Flash Player 11 supports, definitely, H264 encoding, but the caveat is regarding the audio codec. As of now, Flash Player supports Nellymoser and Speex codecs while iOS expects (recommended) AAC. So there is no way to publish AAC from Flash Player directly as of now.

On the other hand, Flash Media Live Encoder supports H264 and MP3 by default and you need to install a AAC plugin to have that support (which you need to buy separately , i guess).

The rest all the details stand same and correct.

CS4 default publishes to FP 10 , and hence the feature additions in FP 11 won't be available. You need to either upgrade to 5.5 or use the FP 11 SWC files to publish to FP 11.

Thank you !

Report · Nov 14, 2011

Without the AAC plugin, does anybody get MP3 to work? Apple tech spec says mp3 is supported.

Report · Nov 14, 2011

Statements about mp3 support from Apple are ambigous. I would like to present following statement from Apple docs on the same:

"

Note: MPEG-2 transport streams should not be confused with MPEG-2 video compression. The transport stream is a packaging format that can be used with a number of different compression formats. Only MPEG-2 transport streams with H.264 video and AAC audio are supported at this time for audio-video content. Audio-only content can be either MPEG-2 transport or MPEG elementary audio streams, either in AAC format with ADTS headers or in MP3 format."

in the following document : http://developer.apple.com/library/ios/#documentation/networkinginternet/conceptual/streamingmediagu...

No doubt, mp3 audio-only is supported by Apple, which Adobe didn't think to invest considering low use case of mp3 audio only streams and triviality of manully streaming the mp3 audio only streams ( as mp3 streaming doesn't require any repackaging and can be trivially segmented by the user itself for the HLS puposes)

Report · Nov 17, 2011

Just watching this discussion and figured I'd give this a try. I followed the prescription above and I believe I'm OK on the encoding side. I'm using FMLE 3.2 and have installed the AAC plug-in. I'm publishing to FMS 4.5 with the following settings:

FMS Push URL: rtmp://myserver.com/livepkgr

Stream Name: livestream%i?adbe-live-event=liveevent&adbe-http-streaming-ver=1.0

When I hit start I see livestream1, livestream2, and livestream3 folders created inside the ...applications/livepkgr/streams/_definst_ folder. Inside each of these folders there are F4F files that grow while encoding.

That all sounds correct to me if I'm reading this right. My data is reaching the server properly.

It's from there that I can't get my video tag inside my web page in Safari on my IPad to connect to the streaming data.

My src property for my HTML5 video tag reads "http://myserver.com:8134/hls-live/livepkgr/_definst_/liveevent/livestream.m3u8"

And my manifest file inside applications\livepkgr\events\_definst_\liveevent reads

</manifest>

My H.264 profile is baseline 3.0 and I'm streaming a very low bitrate (200kbps) and frame rate (10 FPS).

I know I don't have a connectivity problem because I have another streaming app (done with Flex Mobile Packager) on that same IPad that I can hit with FMLE.

I'm getting the video tag src property wrong in my webpage or my manifest is incorrect. Which might it be?

Report · Nov 17, 2011

Hi,

In case you want to susbscribe to a particular stream on the server:

Susbcribe to

"http://myserver.com:8134/hls-live/livepkgr/_definst_/liveevent/livestr eam1.m3u8" ,

"http://myserver.com:8134/hls-live/livepkgr/_definst_/liveevent/livestr eam2.m3u8"

"http://myserver.com:8134/hls-live/livepkgr/_definst_/liveevent/livestr eam3.m3u8"

In case you want to susbcribe to the event (multi-bitrate streaming)

Subscribe to

"http://myserver.com:8134/hls-live/livepkgr/_definst_/liveevent.m3u8

That should solve the problem.

Apart from that as a suggestion, I would like to suggest you creating variant playlist (m3u8) youself, instead of placing a manifest file in event folder.

You can create variant playlist m3u8 using the the tool at <FMS Installation>/tools/f4mconfig/configurator.

There you provide URL and other information for all three streams as mentioned above and save the manifest in your webroot folder.

so for example, if you save it inside <webroot>/liveevent/playlist.m3u8

you can susbscribe to http://myserver.com:8134/liveevent/playlist.m3u8

Report · Jan 02, 2012

First I want to say thanks because of your wonderful conversation here..

I am encoding this stream setting using H264 by using this above code

var h264Settings:H264VideoStreamSettings = new H264VideoStreamSettings();

h264Settings.setProfileLevel(H264Profile.BASELINE, H264Level.LEVEL_2);

stream.videoStreamSettings = h264Settings;

but i am getting error in my Flash builder 4.5 (call to possibly undefined method).it seems this is not valid function in actionscript.

what should i do to encode my stream into H264 without using flash media encoder.

Thanks in advance I am waiting for your quick response...

Report · Jan 02, 2012

In you publish setting have you set the player to Flash Player 11.0..

Report · Jan 05, 2012

Thanks for your reply

I have done this using this tutorial which is very helpful and i encoded the video in H.264 format..

http://www.realeyes.com/blog/2011/10/31/new-in-flash-player-11-encoding-live-video-to-h-264avc/

alex

Report · Jan 10, 2012

I am encoding video in H.264 format by using this code

var h264Settings:H264VideoStreamSettings = new H264VideoStreamSettings();

h264Settings.setProfileLevel(H264Profile.BASELINE, H264Level.LEVEL_2);

ns_out.videoStreamSettings = h264Settings;

but my video is not going to be played on my ios device but when i do the same thing with the flash media live encoder then video is perfectly going to be played on iphone..

so please help me how to pulisha video to ios devices without using flash media live encoder..

Thanks in advance!!!!!!!

Report · Jan 10, 2012

Only if you could publish aac/heacc audio codec from the FP.. Read the first line of my first post in this thread..

So, Unfortunely you can't do it from FP right now for iOS..

Report · Jan 10, 2012

Irrespective of the audio its hould stream video on my ios device but i am not getting the video also..

I am doing these steps:

1) build a connection with moblie.influxis.com that look like this

nc.connect("rtmp://mobile3.influxis.com/mnafhu428jwrb50361_live");

then on connection succeed

2) i attatch camera with a stream and encode this stream into H.264 as given above lines of my post

and then publish this video using this line

3) ns_out.publish("streamName", "live");

moblie.influxis.com takes the stream name and give a http url to run this on ios devices

then i enter this into html video tag and play this video stream using FMS 4.5 on my IOS device...

but i am not getting any video at all but the same case is true with flash media encoder..

so please tell me where i am doing something wrong..???????

thanks!!

Report · Jan 10, 2012

So just be sure that your not attaching the audio or doing ns.attachAudio(NULL);

Also if you have a mac device try using the mediastreamvalidator

You may do mediastreamvalidator validate m3u8-url .. Check if this reports something..

Also if influxis lets you check the apache logs, check if module returns any error in Apache's error logs

Report · Jan 11, 2012

Thanks i have this video live streaming well but now i need to do audio video combine..so as you said FP does not support AAC/HE-AAC but can i do this mp3 format??

let's suppose,

I attacha stream then encode audio into mp3 like i did video into H.264 and then publish this audio stream to flash media server, finally access this audio and video to ios device...

Please its urgent tell me can i do this mean encode audio from microphone into mp3 format and then publish..

Note: H.264 video and mp3 audio format combine are done with flash media live encoder now i need to do it with actioScript code...????

Thanks in advance!!!

Report · Jan 12, 2012

I don't think FP publish mp3.. Even if does... FMS 4.5 does't completly support mp3 streaming to iOS because even apple is unclear in its documentations that they will support mp3 for audio-video streams.. Though they support it for audio-only streams, which FMS 4.5 don't

Report · Dec 02, 2011

Hi,

In this moment i can boroadcast live for all platforms excepts one "Windows Phone 7". Can you help me? or give me directions?

Using Flash Media Live Encoder 3.2

Report · Dec 06, 2011

I guess Windows phone does not support either HTML5 or Flash.

Report · Jan 27, 2014

I believe that there are many people who wish they could publish microphone audio from a NetStream using the AAC audio codec. This isnt yet supported in the ActionScript AIR runtimes, so lets add our votes to the Adobe bugbase to get the feature implemented.

By doing so, we could stream audio from any AIR supported device to any other AIR supported device with conjunction of StageVideo, hardware acceleration, etc. And then Adobe could natively support HLS, HDS with AAC audio without any need for transcoding (wasted processor power, difficult to implement), and wasting developers time trying to figure out how to do so.

Also by implementing AAC audio at the microphone source, the audio (audio/video) latencies would be at their minimums.

Add your vote here:

https://bugbase.adobe.com/index.cfm?event=bug&id=3694393

Adobe Community

live stream to html 5 <video> tag in IOS devices (iPHone,Ipad)