目前大多數(shù)網(wǎng)絡(luò)攝像頭都是通過(guò) RTSP 協(xié)議傳輸視頻流的，但是 HTML 并不標(biāo)準(zhǔn)支持 RTSP 流。除了 Firefox 瀏覽器可以直接播放 RTSP 流之外，幾乎沒有其他瀏覽器可以直接播放 RTSP 流。Electron 應(yīng)用是基于 Chromium 內(nèi)核的，因此也不能直接播放 RTSP 流。
在借助一定工具的情況下，可以實(shí)現(xiàn)在 Web 頁(yè)面上播放 RTSP 流。本文介紹的方法可以應(yīng)用于傳統(tǒng) Web 應(yīng)用和 Electron 應(yīng)用中，唯一的區(qū)別是將 Electron 應(yīng)用的主進(jìn)程當(dāng)作傳統(tǒng) Web 應(yīng)用的服務(wù)器。
目前已有 RTSP 播放方案的對(duì)比
既然是做直播，就需要延遲較低。當(dāng)攝像頭掉線時(shí)，也應(yīng)當(dāng)有一定的事件提示。處于這兩點(diǎn)，對(duì)目前已有的已經(jīng)實(shí)現(xiàn)、無(wú)需購(gòu)買許可證的 RTSP 播放方案進(jìn)行對(duì)比（處于原理階段的暫時(shí)不分析）。
我對(duì)這四種方式都進(jìn)行了實(shí)現(xiàn)，整體效果最好的還是第4種方案，占用端口少，延遲低，渲染速度快，而且離線事件易于處理。
基于 flv.js 的 RTSP 播放方案
flv.js 是 Bilibili 開源的一款 HTML5 瀏覽器。依賴于 Media Source Extension 進(jìn)行視頻播放，視頻通過(guò) HTTP-FLV 或 WebSocket-FLV 協(xié)議傳輸，視頻格式需要為 FLV 格式。
服務(wù)器端（主進(jìn)程）
服務(wù)器端采用 express + express-ws 框架進(jìn)行編寫，當(dāng)有 HTTP 請(qǐng)求發(fā)送到指定的地址時(shí)，啟動(dòng) ffmpeg 串流程序，直接將 RTSP 流封裝成 FLV 格式的視頻流，推送到指定的 WebSocket 響應(yīng)流中。
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") // 這里可以添加一些 RTSP 優(yōu)化的參數(shù) .on("start", function () { console.log(url, "Stream started."); }) .on("codecData", function () { console.log(url, "Stream codecData.") // 攝像機(jī)在線處理 }) .on("error", function (err) { console.log(url, "An error occured: ", err.message); }) .on("end", function () { console.log(url, "Stream end!"); // 攝像機(jī)斷線的處理 }) .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream); } catch (error) { console.log(error); }}為了實(shí)現(xiàn)較低的加載時(shí)間，可以為 ffmpeg 添加如下參數(shù)：
當(dāng)然這個(gè)實(shí)現(xiàn)還比較粗糙。當(dāng)有多個(gè)相同地址的請(qǐng)求時(shí)，應(yīng)當(dāng)增加 ffmpeg 的輸出，而不是啟動(dòng)一個(gè)新的 ffmpeg 進(jìn)程串流。
瀏覽器端（渲染進(jìn)程）
示例使用 Vue 框架進(jìn)行頁(yè)面設(shè)計(jì)。
<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>效果展示
用 Electron 頁(yè)面展示了 7 個(gè) Hikvison NVR 的攝像頭，可以實(shí)現(xiàn)低延遲，低 CPU 占用，無(wú)花屏現(xiàn)象。由于涉及保密，這里就不放截圖了。
同樣的方法我播放了 9 個(gè)本地 1080p 的視頻《白鹿原》，可以看一下這個(gè)效果。
播放效果非常好，完全沒有卡頓和花屏，CPU 占用率也不高。
示例代碼倉(cāng)庫(kù)： WhuRS-FGis/html5-rtsp 示例代碼倉(cāng)庫(kù)：
總結(jié)
以上所述是小編給大家介紹的HTML5 播放 RTSP 視頻的實(shí)例代碼,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
新聞熱點(diǎn)
疑難解答
