Skip navigation
cheinan
Currently Being Moderated

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

Oct 19, 2011 6:39 AM

Tags: #stream #live_streaming #fms_4.5

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/WSd391de4d9c7bd6 09-52e437a812a3725dfa0-8000.html

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/WSeb6b7485f9649b f23d103e5512e08f3a338-8000.html

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

 
Replies
  • Currently Being Moderated
    Oct 19, 2011 10:41 PM   in reply to cheinan

    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/livestre am.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..

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 22, 2011 7:24 PM   in reply to cheinan

    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/WSeb6b7485f9649b f23d103e5512e08f3a338-8000.html

     

    Thank you !

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 23, 2011 9:45 AM   in reply to cheinan

    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 !

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 14, 2011 6:17 PM   in reply to Nikhil Pavan Kalyan

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

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 14, 2011 8:38 PM   in reply to fmsdev12

    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/networkingintern et/conceptual/streamingmediaguide/HTTPStreamingArchitecture/HTTPStream ingArchitecture.html

     

    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)

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2011 10:49 AM   in reply to Nitin Goel

    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/livestr eam.m3u8"

     

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

     

    <manifest xmlns="http://ns.adobe.com/f4m/1.0">

      <media streamId="livestream1" bitrate="50" />

      <media streamId="livestream2" bitrate="100" />

      <media streamId="livestream3" bitrate="200" />

    </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?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2011 9:12 PM   in reply to rexdtripod

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 2, 2011 8:51 AM   in reply to cheinan

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 6, 2011 5:06 AM   in reply to alextwue

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 2, 2012 1:01 AM   in reply to cheinan

    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...

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 2, 2012 2:34 AM   in reply to thisismyquestion

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 5, 2012 9:56 PM   in reply to Nitin Goel

    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-encodin g-live-video-to-h-264avc/

     

    alex

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2012 2:56 AM   in reply to thisismyquestion

    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!!!!!!!

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2012 3:15 AM   in reply to thisismyquestion

    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..

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2012 3:46 AM   in reply to Nitin Goel

    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!!


     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2012 4:44 AM   in reply to thisismyquestion

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 11, 2012 2:43 AM   in reply to Nitin Goel

    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!!!

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 12, 2012 12:57 AM   in reply to thisismyquestion

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 27, 2014 9:59 AM   in reply to cheinan

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points