Comparison of solutions for playing rtsp videos on the web

Prepare

You need to prepare a playable rtsp video address first. You can download VLC Media Player to test whether it can be played. After downloading, click "Media", "Open Network Streaming", "Enter Address", and "Play"

There are many solutions on the Internet that convert rtsp into hls or rtmp video streams. These methods are relatively simple to implement, but they do not meet the requirements.

Abandon the plan

[Transfer to hls] The delay is very high, even tens of seconds, which is not suitable for such real-time scenarios.
[Transfer to rtmp] requires the use of a flash plug-in. In December 2020, Google Chrome will no longer support flash, and other browsers will also gradually phase out flash, which is not suitable in the long run.
[Transfer picture frames] The back-end needs to use tools to convert each frame of the rtsp video stream into a picture, and then transmit it to the front-end in real time through the websocket protocol. The front-end uses canvas to draw. This method has higher requirements for the back-end transfer. Each picture If it is too large, frames will drop and the delay will be unstable.

flvjs + ffmpeg + websocket + node

Preparation before running

Starting the backend requires the node environment. Go to the node official website to download. It is recommended to download the LTS stable version.
The front-end demo uses Vue. If you don’t understand it, it will not affect you. If you want to know more, please go to the Vue official website.
The computer needs to install the FFmpeg streaming tool. Go to the FFmpeg download page to download and install the tutorial. Please note that the installation path does not contain Chinese characters.

2. Install dependency packages

Run npm i in the project root directory terminal to install the required dependency packages for the backend.
Run npm i in the front directory terminal to install the required dependency packages for the front end.

3. Modify the code

Modify the FFmpeg installation path in the index.js file ffmpeg.setFfmpegPath("D:/software/ffmpeg-20200713-7772666-win64-static/bin/ffmpeg"); fill in the installation path of this machine
Modify the rtsp address in front/src/componets/HelloWorld.vue to a tested and available address

4. Start

Run node index.js in the project root directory terminal to start the node service
Run npm run dev in the front directory terminal to start the front-end service. After the startup is completed, open the front-end service address in the browser to see the video.

5.Effect

The delay is about 2 seconds
FFmpeg occupies CUP, and each additional video will occupy more CUP. It is recommended that rtsp use auxiliary code stream to obtain a more stable effect.

Current + WebRTC

This solution needs to be equipped with Kurento streaming server to convert rtsp stream into webrtc stream and play it directly in the video (the browser needs to support webrtc)

Preparation before running

Ubuntu server or virtual machine
Browsers that support webrtc (basically supported by modern mainstream browsers)

Install Kurento on an Ubuntu server or virtual machine. The server is installed on the backend. It is said that according to the article, the installation can be successful in one step.
Clone a copy of the official front-end code: kurento-rtsp2webrtc
After the Kurento service is started, start the front-end project, open the page and enter the available rtsp video address, and then click start to see the screen.
Effect

The latency is very low, almost real-time, meeting the requirements
It can only be played within the LAN. If you want to use it on the public network, you also need to learn network penetration, server deployment capabilities, traffic consumption, etc.
The Kurento service has many configurations, and the learning cost is relatively high. You need to study this thing specifically, and it is a project a long time ago. There is not much information, so use it with caution.

VLC player + http

This solution is simple to implement, but the performance is worrying. You can try it and experience it. It is used in most business scenarios.

Preparation before running

VLC PlayerVLC Media Player

VLC player operation steps

Click on the media menu and select "Stream"

Select "Network", enter a usable rtsp address, and then select "Streaming"

Select "Next"

Scroll down to select "HTTP" and click the "Add" button on the right

Enter the IP and path (the path that will be written to the video tag src) and click "Next"

Select "Activate transcoding", select "OGG" from the drop-down list, and click "Next"

Check "Stream all basic streams" and click "Stream"

At this time, you see "converting" displayed at the top of the window, and the time at the bottom also starts to move, which means that the http stream is already being converted.

3. Front-end implementation

You only need to fill in the src of the video as http://127.0.0.1:8889/123 (the port and path just entered) and set the type to video.ogg to open the page to play.

4.Effect

Playing directly with VLC player has a certain delay, which is about 3s. When it is stable, it also has a delay of 1-2s. After the transfer, the delay is even higher.
Occupies a lot of CPU. Streaming a video takes up about 15%-18% of the CPU. Be careful when playing multiple channels. Use auxiliary streams to reduce CPU consumption.
In rare cases, lag may occur
The first frame is green, which affects the look and feel

jsmpeg.js + ffmpeg + websocket + node

This solution is the most effective among the free solutions I have seen. The principle is to use the streaming tool FFmpeg at the backend to convert the rtsp stream into an image stream, then transfer the image through websocket, and then use jsmpeg.js to draw it on canvas for display.

Preparation before running

Starting the backend requires the node environment. Go to the node official website to download. It is recommended to download the LTS stable version.
The computer needs to install the FFmpeg streaming tool. Go to the FFmpeg download page to download and install the tutorial. Please note that the installation path does not contain Chinese characters.

2. Install dependency packages

Run npm i in the project root directory terminal to install the required dependency packages for the backend.

3. Modify the code

The code in rtsp-video-node does not need to be changed. The default port of the node service is 8088. If the port is occupied, change app.listen(8088, () => {}) in app.js
Modify rtspData.url in rtsp-video-canvas to the available rtsp address, modify rtspData.port to the unoccupied port for websocket

4. Start

Run node app.js in the project root directory terminal to start the node service
Open index.html in your browser

5.Effect

The delay is about 500ms
FFmpeg occupies CUP, and each additional video will occupy more CUP. It is recommended that rtsp use a secondary code stream to obtain a more stable effect (each ffmpeg process of the secondary code stream occupies 3% of the CPU). There is a shell script running in the demo The code is used to kill useless FFmpeg processes, and the effect has not been tested.

liveweb

liveweb is an ultra-low latency (150-200 milliseconds), second startup, plug-in-free web real-time video player, h5 video player, supporting common browsers such as egde, firefox, Chrome, and safari. Supports common audio and video formats such as h264, h265, AAC, and G711.

Supported protocols: RTSP, RTMP, HLS, HTTP-FLV, WebSocket-FLV, GB28181, HTTP-TS, WebSocket-TS, HTTP-fMP4, WebSocket-fMP4, MP4, WebRTC.

Support RTSP/Onvif/GB/T28181/EHome/Haikang SDK/Dahua SDK and other devices or platform access

The server includes functions such as device access, audio and video live broadcast, streaming media distribution server, video storage and playback services.

Provide GB28181 signaling transfer and platform cascading

Support HTTPS encryption, etc.;

Provide HTTP API secondary development interface to the outside world;

Install using: liveweb