HTML5 example code for playing RTSP video

Currently, most web cameras transmit video streams through the RTSP protocol, but HTML does not standardly support RTSP streams. Except for the Firefox browser, which can directly play RTSP streams, almost no other browsers can directly play RTSP streams. Electron applications are based on the Chromium kernel, so they cannot directly play RTSP streams.

With the help of certain tools, RTSP streams can be played on Web pages. The method introduced in this article can be applied to traditional Web applications and Electron applications. The only difference is that the main process of the Electron application is used as the server of the traditional Web application.

Since it is a live broadcast, the delay needs to be low. When the camera goes offline, there should also be a certain event prompt. At these two points, we will compare the existing RTSP playback solutions that have been implemented without purchasing a license (we will not analyze them for the time being in the principle stage).

I have implemented all four methods, and the fourth method has the best overall effect. It takes up fewer ports, has low latency, has fast rendering speed, and is easy to handle offline events.

flv.js is an open source HTML5 browser from Bilibili. Relying on Media Source Extension for video playback, the video is transmitted through HTTP-FLV or WebSocket-FLV protocol, and the video format needs to be FLV format.

The server side is written using the express + express-ws framework. When an HTTP request is sent to the specified address, the ffmpeg streaming program is started, the RTSP stream is directly encapsulated into a video stream in FLV format, and pushed to the specified WebSocket response stream.

 import * as express from express;import * as expressWebSocket from express-ws;import ffmpeg from fluent-ffmpeg;import webSocketStream from websocket-stream/stream;import WebSocket from websocket-stream;import * as http from http;function localServer() { let app = express(); app.use(express.static(__dirname)); expressWebSocket(app, null, { perMessageDeflate: true }); app.ws(/rtsp/:id/, rtspRequestHandle) app.listen(8888); console.log(express listened)}function rtspRequestHandle(ws, req) { console.log(rtsp request handle) ; const stream = webSocketStream(ws, { binary: true, browserBufferTimeout: 1000000 }, { browserBufferTimeout: 1000000 }); let url = req.query.url; console.log(rtsp url:, url); console.log(rtsp params:, req.params); try { ffmpeg(url) .addInputOption(-rtsp_transport , tcp, -buffer_size, 102400) // You can add some RTSP here Optimized parameters.on(start, function () { console.log(url, Stream started.); }) .on(codecData, function () { console.log(url, Stream codecData.) // Camera online processing} ) .on(error, function (err) { console.log(url, An error occured: , err.message); }) .on(end, function () { console.log(url, Stream end!); // Camera disconnection handling}) .outputFormat(flv).videoCodec(copy).noAudio().pipe(stream); } catch (error) { console.log(error); }}

In order to achieve lower loading time, you can add the following parameters to ffmpeg:

• analyzeduration can reduce the time required to parse the code stream
• I don’t quite remember the specific function of max_delay written in the data. The effect is not as obvious as analysis.

Of course, this implementation is still relatively rough. When there are multiple requests for the same address, the output of ffmpeg should be increased instead of starting a new ffmpeg process stream.

The example uses the Vue framework for page design.

 <template> <div> <video class=demo-video ref=player></video> </div></template><script>import flvjs from flv.js;export default { props: { rtsp: String, id : String }, /** * @returns {{player: flvjs.Player}} */ data () { return { player: null } }, mounted () { if (flvjs.isSupported()) { let video = this.$refs.player; if (video) { this.player = flvjs.createPlayer({ type: flv, isLive: true, url: `ws://localhost:8888 /rtsp/${this.id}/?url=${this.rtsp}` }); this.player.attachMediaElement(video); try { this.player.load(); this.player.play(); } catch (error) { console.log(error); }; } } }, beforeDestroy () { this.player.destory(); }}< /script><style> .demo-video { max-width: 480px; max-height: 360px; }</style>

The Electron page is used to display 7 Hikvison NVR cameras, which can achieve low latency, low CPU usage, and no screen distortion. Due to confidentiality, I won’t post screenshots here.

In the same way, I played 9 local 1080p videos "White Deer Plain" to see the effect.

The playback effect is very good, there is no lag or blur at all, and the CPU usage is not high.

Sample code repository: WhuRS-FGis/html5-rtsp Sample code repository:

The above is the example code for playing RTSP video in HTML5 introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!

If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!