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

This article mainly explains "how to play RTSP videos in HTML5". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to play RTSP videos with HTML5.

Electron applications are based on the Chromium kernel, so you can't play RTSP streams directly. With the help of certain tools, it is possible to play RTSP streams on Web pages. The method introduced in this paper can be applied to traditional Web applications and Electron applications. The only difference is that the main process of Electron applications is regarded as the server of traditional Web applications.

Comparison of existing RTSP playback schemes

Since it is a live broadcast, it needs a lower delay. When the camera goes offline, there should also be an event prompt. At these two points, compare the existing RTSP playback schemes that have been implemented and do not need to purchase a license (the principle stage is not analyzed for the time being).

I have implemented all four methods, and the fourth scheme has the best overall effect, which has fewer ports, low latency, fast rendering speed, and easy to deal with offline events.

RTSP playback Scheme based on flv.js

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

Server side (main process)

The server uses express + express-ws framework to write. When a HTTP request is sent to the specified address, start the ffmpeg streaming program, directly encapsulate the RTSP stream into a FLV format video stream, and push it 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") / / some RTSP optimized parameters can be added here. 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!"); / / handling of camera disconnection}) .outputFormat ("flv"). VideoCodec ("copy"). NoAudio (). Pipe (stream);} catch (error) {console.log (error);}}

To achieve a lower load time, you can add the following parameters to ffmpeg:

Analyzeduration can reduce the time required to parse the code stream.

The specific function written in the max_delay data is not quite remembered, and the effect is not as obvious as that of analyzeduration.

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

Browser side (rendering process)

The example uses the Vue framework for page design.

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 () }}. Demo-video {max-width: 480px; max-height: 360px;} at this point, I believe you have a deeper understanding of "how to play RTSP videos with HTML5". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.