Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to stream live video in HTML5?

I'm looking for a way to broadcast a live video taken from a webcam or camera rooted to a PC. The broadcast should be displayed in a HTML5 page using the tag (which support rtp, and rtsp I think).

The user viewing the stream should not have to install any plug-in or video player such as QuickTime.

I need the video to be in mp4 format such as: rtsp://www.mywebsite/streaming/video.mp4

This would be the link I'd put as the src of the html 5 video tag.

So I'd like to know if it's possible, what are my options to do such things.

like image 234
user702470 Avatar asked Apr 11 '11 15:04

user702470


People also ask

How does HTML5 video streaming work?

HTML5 is not itself a streaming protocol. Websites built with HTML5 can use several different streaming protocols to play video, including HTTP live streaming (HLS) and MPEG-DASH. This is configured on the server side, not in the HTML markup code.

How do you add Livestream to HTML?

Click the “Embed Stream” button at the bottom of the “Settings” window. Copy the embed code that appears in the “Embed settings” window. Paste the code into your website's HTML. Click the red “Go Live” button in the top-right corner of the Studio when you are ready to broadcast.

Can we play video in HTML5?

With the introduction of HTML5, you can now place videos directly into the page itself. This makes it possible to have videos play on pages that are designed for mobile devices, as plugins like Adobe Flash Player don't work on Android or iOS.


2 Answers

It's possible. But you will have major problems if you're looking for cross browser support. What you can do is offer HTML5 video to the browsers supporting it and then offer QuickTime for browsers not supporting it.

<video src="stream.mp4">

    <!-- Don't support <video> -->
    <object>
        <param name="src" value="video.mp4" />
        
    <param name="autoplay" value="true" />
        
    <param name="type" value="video/quicktime" height="256" width="320" />
        
    
    <embed src="video.mp4" height="256" width="320" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/" />
    </object>

</video>

Also see: Streaming via RTSP or RTP in HTML5

like image 198
Karl Laurentius Roos Avatar answered Oct 13 '22 16:10

Karl Laurentius Roos


I don't think it is possible now to "cheat" the HTML5 browser to encapsulate the live video stream to a ".mp4" file. I believe HTML5 will consider live video support in a near future. What you can do is just wait. :)

like image 29
ciphor Avatar answered Oct 13 '22 16:10

ciphor