ライブRTSPストリームをWebページに埋め込む

私は最近、スマートホームのセットアップに取り組んでおり、セットアップしようとしていることの1つは、スマートホームを管理するためのタッチスクリーンWebインターフェースを備えたタブレットです。. 私が最初にクラックしなければならなかった問題の1つは、cctvフィードをWebブラウザーにストリーミングする方法でした…

問題

私のCCTVカメラ, 多くのように, RTSPストリームのみを提供. RTSPをサポートする最新のWebブラウザーはありません.

検索と要件

Googleは以前とは異なり、私の要件をすべて満たす許容可能なソリューションを見つけるのに数日かかりました…

サードパーティのサーバーが関与しなくても、完全にオフラインで機能するものが欲しかった.
私は完全に合法的に自由な何かが欲しかった, 理想的にはオープンソース
ビデオやオーディオをトランスコードしないと処理リソースが無駄になるので、何かが必要でした

ソリューション

私が見つかりました。本当に役立つガイドこれは、JavaScriptとffmpegを使用してこれを行う方法を説明しています, どちらも無料ですぐに利用できました.

ffmpegを実行するには、次のコマンドを使用しました, 私はサービスとしてWindowsで実行しました, nssmで作成…
ffmpeg -i rtsp://your_rtsp_ip:port/path/to/file.stream -c:v copy -c:a copy -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/video.m3u8

ビデオを埋め込むには、次のcssファイルをダウンロードして、 2 jsファイル

https://vjs.zencdn.net/7.2.3/video-js.css
https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js
https://vjs.zencdn.net/7.2.3/video.js

次に、ガイドのコードを使用しました (位置ファイルへの変更されたパス) すぐに機能したビデオを埋め込む. ffmpegは周りを使用しています 0.2% WebサイトをホストするサーバーのCPU使用率と数MBのメモリ.

最後に, 問題が発生した場合—私は ffmpegのwin64統計ビルド 4.2.2