HTNL5 Live _ Data

1, using WebSockets for HTML5 video Live-9up-segmentfault.html

1190000000392586

Recently done a small project need to use the relevant technology, find this article looks good, so the translation is reproduced up. Recently I ' m interesting in these technologies and I ' m working on a project related to it. I ' ve found this useful article so I translated and posted it here.

Original address/Original post:
HTML5 Live Video streaming via Websockets-phoboslab

When I was doing a real-time monitoring application, I had searched for some real-time images of the IPhone camera to be streamed to the browser, none of them.

For HTML5, Video (live) is a very sad job, HTML5 video currently does not have a formal streaming support, Safari supports very crappy HTTP Live streaming and will also have Media Source Extension specifications and MP Eg-dash. All of these scenarios, however, divide the video into small pieces and are downloaded separately by the browser, resulting in a minimum delay of five seconds.

The following is a completely different scenario that can support all modern browsers: Firefox, Chrome, Safari, Mobile Safari, Android Chrome, or even IE10.

This location of the original text provides a pseudo -live example.

This package is backwards compatible and does not use any novelty technology and currently does not support audio. But it was surprisingly useful.

The video from the camera is ffmpeg encoded and then passed through HTTP to a node. js written by the script that will distribute this MPEG video stream through WebSockets to all linked browsers; The browser uses JavaScript to decode the MPEG video stream and After the code is rendered to the Canvas element.

You can even send videos with raspberry. May be a bit slow, but I have tested the frame rate of 30fps real-time encoding the video is not a problem. This is the best Raspberry Pi video solution for the author.

Here is the build step. First you need to get the latest version of FFmpeg, the latest installation package can be obtained from Deb-multimedia. If you use Linux, your webcam should be located in /dev/video0 or, on /dev/video1 OS X or Windows you can use VLC.

Ensure that the server used to distribute the video stream has node. js installed. Download the Stream-server.js script for the Phoboslab/jsmpeg project. Install the WebSocket package ws and start the server:

install wsnode stream-server.js 你的密码

The password here is used to ensure that there will be no curious baby to hijack your video stream. If the server is working properly, you should see this output:

Listening for MPEG Stream on http://127.0.0.1:8082/<secret>/<width>/on ws://127.0.0.1:8084/

After the server is started, you can start ffmpeg and point it to the running domain and port:

640x480 -f video4linux2 -i /dev/video0 -f mpeg1video -b 800k -r 30 http://example.com:8082/你的密码/640/480/

This command will start capturing 640x480 video from the camera and encode it into a 30fps bitrate 800kbps MPEG video. The encoded video is sent over HTTP to the specified server and port. Ensure that the password is correct, and that the length and width in the URL need to be specified correctly, or the server cannot correctly determine the current resolution.

On Raspberry Pi You may need to reduce the resolution to over-the-top to ensure that the encoding speed remains 30fps.

To watch live streaming, you need to download the stream-example.html and jsmpg.js files from the Jsmpeg project mentioned earlier, change the WebSocket URL in stream-example.html to your server address, and use your favorite browser Open it.

If everything works, you can see a smooth camera screen with less than 100ms latency. It's good, it's strong, right?

A more convenient solution, please watch the original Instant Webcam.

Just keep forgetting, will send an article blog to summarize the actual use effect of each scheme in the near future.

Repeat the original address/Original post:
HTML5 Live Video streaming via Websockets-phoboslab

• Published on January 20, 2014

2. HTML5 video Live Program Summary _jquery tutorial _jqueryschool-The largest jquery original sharing community in the country. html

Publish time:2015-12-19 16:24:18

Recently in the study HTML5 video Live , a word, akzent egg pain, below is my recent study rough summary of a little

HTML5 Video Live

1. HLS Live Stream Program
Android does not support
iOS support
Browser environment to control full-screen video playback
Other browser environment live full screen, use the next end of the note and watch the video live program
PC does not support
Cons: There is a delay, depending on the configuration and bandwidth of the server, the final result requires a live stream to test before you know

2. Video Stream resolution picture scheme
MPG video Streaming scenario
Both Android and iOS support
6M video parsing, results loading is slow, parsing is not smooth
800K Video stream parsing, result loading block, parsing also become smooth
Cons: The final effect depends on the size of the video stream that the server pushes over, the smaller the video stream, the faster the load, and the smoother the parsing.

PC Support
6M Video Source local parsing is smooth
6M Video Source External network parsing is smooth, loading a bit slow
Disadvantage: There is no audio function, need to load the video stream to start parsing, push over the video stream, the more slowly, the more the terminal display card
Pros: Compatible with all devices

MP4 video Streaming scheme
Both Android and iOS support
6M video parsing, results loading is slow, parsing is not smooth
183K Video stream parsing, result loading block, parsing is not very smooth
Disadvantage: The final effect depends on the server push over the size of the video stream, the smaller the video stream, the faster the load, the resolution is more fluent, relative to the MPG video streaming program is not so good

PC Support
6M Video Source local parsing is smooth
6M Video Source External network parsing is smooth, loading a bit slow
Disadvantage: There is no audio function, need to load the video stream to start parsing, push over the video stream, the more slowly, the more the terminal display card
Pros: Compatible with all devices
The final effect still requires a real-time video source acquisition push over to test

3.

3.1, HTML5 video Live (a) _ Jerryqu station. html

Https://imququ.com/post/html5-live-player-1.html

3.2, HTML5 video Live (b) _ Jerryqu station. html

Https://imququ.com/post/html5-live-player-2.html

3.3, HTML5 video Live (three) _ Jerryqu station. html

Https://imququ.com/post/html5-live-player-3.html

4.

5.

HTNL5 Live _ Data