Search code examples
ioshtmlvideo-streaminghtml5-videohttp-live-streaming

HTML5 live video Apple iOS


So as far as I understand it, there is no way (yet) to play live video streams using HTML5 video on your Apple device and have 1-1.5 second latency or less. The only streaming protocol Apple seems to support is HLS and it involves dividing video to chunks, downloading them one by one, and having downloaded enough pieces (3 by default) start playing it. If each of these pieces is 3 seconds long, then you are looking at 9-10 second latency. Reducing the length of the piece causes constant disruption when streaming and reducing bitrate of the video doesn't seem to reduce the said marker.

Is there any other viable solution for streaming truly live video using HTML5 on Apple mobile devices?


Solution

  • If anybody's wondering - there still is a hacky workaround to avoid using HLS at all.

    You can convert your video stream into sequence of images in mpeg1 format (using ffmpeg for example) and download them at client side using javascript library and use canvas element to display them. This can be achieved using jsmpeg and its streaming-server code than runs on node.js

    I was able to get 30 fps for 540x320 resolution with 150ms latency on Safari iOS.

    For a precise walk-through see this blog .

    Pros:

    • improved latency (with adequate bitrate and resolution)
    • HTML5 compatibility with pretty much cross-platform support

    Cons:

    • No audio feed.
    • increased cpu usage on most handheld devices