WebRTC に基づく RTSP ビデオのリアルタイムプレビュー

導入

背景

プロジェクトのニーズにより、カメラプレビュー機能を使用する必要があり、デバイスモデルは Hikvision です。既存の FFmpeg ベースのソリューションの遅延は長すぎるため、プロジェクトは最終的にこのソリューションに基づいて選択します。

プラン

このソリューションは WebRTC ベースのビデオインスタントメッセージングで、RTP プロトコルのデコードをネイティブにサポートしているため、約 0.2 ～ 0.4 秒という非常に低い遅延を実現できますが、他のソリューションでは 1 秒を超える遅延が発生します。
WebRTC にはブラウザの要件があり、サポートされているブラウザは以下のアドレスで確認できます。
https://caniuse.com/rtcpeerconnection

以下の紹介は百度百科事典より

WebRTC は、Web Real-Time Communication (英語: Web Real-Time Communication) の略語に由来しており、Web ブラウザーとのリアルタイムの音声またはビデオ会話をサポートする API です。これは 2011 年 6 月 1 日にオープンソース化され、Google、Mozilla、Opera のサポートを受けて World Wide Web Consortium の W3C 推奨標準に組み込まれました。

WebRTC は、Web ページベースのビデオ会議を実装します。標準は WHATWG プロトコルです。目的は、ブラウザによって提供される単純な JavaScript を通じてリアルタイム通信 (リアルタイム通信 (RTC)) 機能を提供することです。

Github には WebRTC の実装が多数ありますが、一連の比較とテストを行った結果、最終的には使いやすく比較的安定したwebrtc-streamerプロジェクトを使用することが選択されました。

はじめる

webrtc-streamer は、 RTSP ストリームのキャプチャをサポートするだけでなく、V4L2 および画面ウィンドウのスナップショットのキャプチャもサポートします。

webrtc-streamer には、webrtc に必要な関連インターフェイスのサポートを提供する小さな HTTP サーバーが組み込まれています。
セットアップを開始する方法は次のとおりです。

カメラを設定する

webrtc のコアライブラリはまだ h265 をサポートしていないため、h264 エンコーディングに設定する必要があります。
Hikvision カメラの背景設定センターにログインし、「ビデオとオーディオ」メニューで設定して保存します。

試験装置

問題がない場合は、ローカルデバイスをテストに使用できます。Hikvision ビデオストリーミングのデフォルトのアドレスは次のとおりです。

rtsp://账号:密码@IP地址:554/Streaming/Channels/101

テスト用に適切な情報を置き換えます。
Windows の下にある場合、webrtc-streamer はウィンドウと画面のスナップショットページもキャプチャします。これは、正規表現をサポートする -q パラメータでフィルタリングできます。ソースコードを確認して見つけたので、このパラメータはヘルプリストに記載されていません。

./webrtc-streamer  rtsp://账号:密码@IP地址:554/Streaming/Channels/101 -q (?=rtsp).*

統合された

ダウンロードしたリリースパッケージの html フォルダーにあるindex.html を見つけてサンプルコードを表示できます。コアコードは以下にリストされています。

<html>
<head>
<script src="libs/adapter.min.js" ></script>
<script src="webrtcstreamer.js" ></script>
<script>        
    var webRtcServer      = null;
    window.onload         = function() { 
        webRtcServer      = new WebRtcStreamer("video",location.protocol+"//"+window.location.hostname+":8000");
    webRtcServer.connect("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov");
    }
    window.onbeforeunload = function() { webRtcServer.disconnect(); }
</script>
</head>
<body> 
    <video id="video" />
</body>
</html>

Webコンポーネントを使用して統合する

<html>
<head>
    <script type="module" src="webrtc-streamer-element.js"></script>
</head>
<body>
   <webrtc-streamer url="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></webrtc-streamer>
</body>
</html>

要約する

重要なのは、webrtc に慣れることです。関連ガイドはhttps://webrtc.org/getting-started/overviewで見つけることができます。
たとえば、TURN サーバーとは何か、ピア接続とは何かについては、上記のガイドで確認できます。

原文 WebRTC に基づく RTSP ビデオのリアルタイムプレビュー - 短編本

★記事末尾の名刺では、オーディオ・ビデオ開発学習教材（FFmpeg、webRTC、rtmp、hls、rtsp、ffplay、srs）やオーディオ・ビデオ学習ロードマップ等を無料で受け取ることができます。

以下を参照してください！