Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the method of playing rtsp on html5. Many people may not know much about it. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

Because the camera is in rtsp format, H6 native does not support this format. Many tutorials on the Internet mostly use rtsp to rtmp, but rtmp needs the support of falsh, but it has been disabled by default in chrome, including it will be phased out in the future. A plug-in called jsmpeg, which mainly sends MPEG through webSocket, and the front end continuously draws canvas, including audio, through js parsing MPEG. The final result of the test is that the delay of a 1920-1080 resolution picture is about 0.5s, which is quite high.

Prepare the tool

1. Ffmpeg (click download) to add the configuration environment to the path variable

2. Node.js (click download) to add the configuration environment to the path variable

3. Jsmpeg (click download) to run the main program

4. Run jsmpeg

Decompress the jsmpeg file to a drive letter, where there is a websocket-relay.js. We mainly run this js file.

Node needs to install the webSocket module before running websocket-relay.js

Terminal: npm install ws

Run websocket-relay.js in the jsmpeg folder

Terminal: node websocket-relay.js supersecret 8081 8082

Description: Supersecret is password 8081 is ffmpeg push port 8082 is front-end webSocket port

Run the decoding program

Terminal: ffmpeg-I "rtsp"-Q 0-f mpegts-codec:v mpeg1video-s 1366x768 http://127.0.0.1:8081/supersecret

At present, the above scheme has not been put into production. If you want to really put it into use, you must at least solve the problem of playing multiple rtsp streams at the same time. Officially, websocket-relay.js can only play one source, so you need to rewrite the code inside. Learn node.js. Considering the performance problem, it is best to use it on the client with GPU, otherwise performance will be a bottleneck, and network bandwidth is also a problem worth considering.

Update the code on July 17, 2019, because I was asked how to play multiple video streams at the same time. Here I submit the code. Take a look at the comments in the code first, and then add, thank you, the code is submitted here (https://gitee.com/yzfar/RtspWebSocket.git)

5. Supplement to multiple camera playback on August 19, 2019

Earlier, I uploaded the code for playing multiple cameras to the code cloud. Today, I will talk about how to play nonsense and how to use it.

first

Other steps are consistent with the above to ensure that there is no problem with the environment after cd to the project directory

Then execute: node websocket.js supersecret 8081 8082, our main program has been changed to websocket.js

Second

Terminal: ffmpeg "rtsp"-Q 0-f mpegts-codec:v mpeg1video-s 800x600 http://127.0.0.1:8081/supersecret/live1

Open another cmd input and test here:

Terminal: ffmpeg "rtsp"-Q 0-f mpegts-codec:v mpeg1video-s 800x600 http://127.0.0.1:8081/supersecret/live2

The difference between the two is the final live1 and live2.

Third

Modify the code in view-stream.html as follows

What changes is var url = 'ws://127.0.0.1:8082/live';, what changes is live1 and live2 corresponds to the second step, just like, double-click to open view-stream.html to show the following effect

I would like to add here that there is no function to close the video stream in the code. It is best to delete the background ffmpeg stream after the log print closes the connection, otherwise it will cause performance problems. This closed code cannot be reflected in js, and it is best to close it in the program that controls the cmd command.

Ffmpeg has gpu acceleration function, I have not tested, interested friends can try the cuda way.

The first article uses Intel's CPU hardware acceleration, ordinary PC cpu is effective, servers such as Xeon processors are invalid

Ffmpeg-h364_qsv v h364_qsv-rtsp_transport tcp-I "rtsp"-Q 0-vcodec h364_qsv-f mpegts-codec:v mpeg1video-s 800x600 http://127.0.0.1:8081/supersecret/live1

The second uses cuda acceleration, requires gpu and installs cuda

Ffmpeg-h364_cuvid v h364_cuvid-rtsp_transport tcp-I "rtsp"-Q 0-vcodec h364_cuvid-f mpegts-codec:v mpeg1video-s 800x600 http://127.0.0.1:8081/supersecret/live2

In addition, if you need to use sound, use the following command

Ffmpeg-I-I "rts"-f mpegts-codec:v mpeg1video-s 800x600-codec:a mp2 http://127.0.0.1:8081/supersecret/live2

The solution based on webrtc playback moves to: https://my.oschina.net/chengpengvb/blog/5023676

6. Open source video playback system

I found that there was a great demand for live video streaming, so the open source project came out to reduce duplication of work. Project address: https://github.com/chengpengvb/video

Take a look at the effect first.

The main features include:

1. Automatic load balancing (expand the number of agent)

2. Low latency

3. For non-IE kernels using H5's playback function, IE uses rtmp (nginx-rtmp is required because IE does not support sound)

4. Support for sound playback

5. The same playstream is reused without re-decoding.

Support ssl encryption

Operating environment:

1. Windows 、 Linux

2. 2jdk1.8, ffmpeg, nodejs, nginx-rtmp (IE playback)

Running configuration

1. Registry of video-regist, general configuration bootstrap.yml

2. Video-agent is responsible for decoding.

3. Video-center, which is responsible for calling the cache business center

Startup program

1. Video-regist

2. Video-agent (multiple deployable)

3. Video-center

4. Open the browser: http://127.0.0.1:8080/ or http://127.0.0.1:8080/index

Introduce css and js parts

Refer to the multiPlay.html and default.html pages

Front-end api description

Var wssConn = wsConnect_ (window.location.host, UUID ()); / / initialize a connection object (interact in the background). Singleton, UUID () is a random number identification

Var video = $("dom") .video (wssConn)

Var option = {

Url: rtsp,// rtsp stream

UserName: userName,// rtsp stream user name

PassWord: passWord,// rtsp stream password

Width: 800 centrel / video width

Height: 450 pound / video height

Type: 0 / / Decoding type 0: 0 / / Decoding type

}

Video.play (option, null); / / start playback

Video.close (); / / close

After reading the above, do you have any further understanding of the method of playing rtsp on html5? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.