現在、ほとんどの Web カメラは RTSP プロトコルを通じてビデオ ストリームを送信しますが、HTML は標準的に RTSP ストリームをサポートしていません。 RTSP ストリームを直接再生できる Firefox ブラウザを除いて、RTSP ストリームを直接再生できるブラウザはほとんどありません。 Electron アプリケーションは Chromium カーネルに基づいているため、RTSP ストリームを直接再生できません。
特定のツールを使用すると、RTSP ストリームを Web ページ上で再生できます。この記事で紹介する方法は、従来の Web アプリケーションと Electron アプリケーションに適用できます。唯一の違いは、Electron アプリケーションのメイン プロセスが従来の Web アプリケーションのサーバーとして使用されることです。
現在、RTSP 再生ソリューションの比較が行われています。ライブブロードキャストなので、遅延は小さい必要があります。カメラがオフラインになると、特定のイベント プロンプトも表示されるはずです。この 2 つの点で、ライセンスを購入せずに実装されている既存の RTSP 再生ソリューションを比較します (原理段階では当面は分析しません)。
4 つの方法をすべて実装しましたが、4 番目の方法が全体的な効果が最も高く、使用するポートが少なく、遅延が短く、レンダリング速度が速く、オフライン イベントの処理が簡単です。
flv.js ベースの RTSP 再生ソリューションflv.js は、Bilibili のオープンソース HTML5 ブラウザーです。ビデオ再生には Media Source Extension を利用し、ビデオは HTTP-FLV または WebSocket-FLV プロトコルを通じて送信され、ビデオ形式は FLV 形式である必要があります。
サーバー側（メインプロセス）サーバー側は、express + Express-ws フレームワークを使用して作成されます。HTTP リクエストが指定されたアドレスに送信されると、ffmpeg ストリーミング プログラムが開始され、RTSP ストリームが FLV 形式のビデオ ストリームに直接カプセル化され、プッシュされます。指定された WebSocket 応答ストリーム。
import * Express から Express;インポート * Express-ws から ExpressWebSocket として;fluent-ffmpeg から ffmpeg をインポート;websocket-stream/stream から webSocketStream をインポート;websocket-stream から WebSocket をインポート;http から http としてインポート * http;function localServer() { let app =express(); app.use(express.static(__dirname)); perMessageDeflate: true }); app.ws(/rtsp/:id/, rtspRequestHandle) app.listen(8888); console.log(express listen)}function rtspRequestHandle(ws, req) { console.log(rtsp リクエスト ハンドル) ; const ストリーム = webSocketStream(ws, { バイナリ: true, ブラウザバッファタイムアウト: 1000000 }, {ブラウザバッファタイムアウト: 1000000 }); url = req.query.url; console.log(rtsp params:, req.params); を試してください。 , tcp, -buffer_size, 102400) // ここに RTSP を追加できます最適化されたparameters.on(start, function () { console.log(url, Stream starting.); }) .on(codecData, function () { console.log(url, Stream codecData.) // カメラのオンライン処理} ) .on(error, function (err) { console.log(url, エラーが発生しました: , err.message); }) .on(end, function () { console.log(url, Stream end!); // カメラ切断処理 }) .outputFormat(flv).videoCodec(copy).noAudio().pipe(stream); } catch (error) { console.log(error);読み込み時間を短縮するには、次のパラメータを ffmpeg に追加します。
もちろん、この実装はまだ比較的大まかです。同じアドレスに対して複数のリクエストがある場合、新しい ffmpeg プロセス ストリームを開始する代わりに、ffmpeg の出力を増やす必要があります。
ブラウザ側（レンダリング処理）この例では、ページ デザインに Vue フレームワークを使用します。
<template> <div> <video class=demo-video ref=player></video> </div></template><script>flv.js から flvjs をインポート;デフォルトをエクスポート { 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); this.player.load(); this.player.play(); } キャッチ (エラー) { } } ; beforeDestroy () { this.player.destory(); /script><スタイル> .demo-video {最大幅: 480ピクセル; 最大高さ: 360ピクセル;エフェクト表示Electron ページは 7 台の Hikvison NVR カメラを表示するために使用され、低遅延、低 CPU 使用率、および画面の歪みを実現できます。機密保持のため、スクリーンショットはここには掲載しません。
同様に、ローカル 1080p ビデオ「White Deer Plain」を 9 本再生して効果を確認しました。
再生効果は非常に優れており、遅延やぼやけはまったくなく、CPU 使用率も高くありません。
サンプルコードリポジトリ: WhuRS-FGis/html5-rtsp サンプルコードリポジトリ:
要約する上記は、編集者が紹介した HTML5 で RTSP ビデオを再生するためのサンプル コードです。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！
この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明記してください。ありがとうございます。