HTML/JavaScript

ブラウザでRTSPストリーミング再生

2022年8月21日

カメラなどで使用されているRTSPストリーミングは、そのままではブラウザで再生することはできません。
昔は Adobe FlashPlayer を使って再生していましたが、セキュリティの関係で利用されなくなり、
最近では HLS(HTML Live Streaming)や MPEG-DASH での配信が主流となっています。

そこで、できるだけシンプル・簡単に RTSP のストリーミング再生をブラウザで行えるようにする
WebSocket と HTML Canvas を使って実現する方法をご紹介いたします。

 

システム構成

RTSP配信機器

  • RTSPでネゴシエーションし、RTPで動画ストリームを配信する機器
  • 代表的なものとしては、IPカメラなど

WebSocketサーバ

  • RTSP配信機器とRTSPで接続
  • RTPで受信した動画フレームをWebSocketで再配信(リアルタイム)

ブラウザ

  • WebSocketサーバと接続
  • 受信した動画フレームをHTML Canvasに描画

 

動作環境

RTSP配信機器は市販の製品、ブラウザはChromeを使用しましたが特に指定なし。
ここでは、パッケージ類が必要となるWebSocketサーバの環境について記載します。

Python3 3.10.4
opencv-python 4.6.0.66
pillow 9.2.0
numpy 1.23.1
websockets 10.3

 

WebSocketサーバ

RTSPストリームの受像

RTSP配信機器への接続、RTPポートのネゴシエーション、受信ストリームのデコードは、
基本的に OpenCV を使って行います。OpenCV を使うと、以下のように非常にシンプルに書けます。

 

WebSocketでリアルタイム再配信

OpenCV で受像した1フレームのデータは、BGRA のフォーマットで格納されています。
このままだとブラウザで扱いにくいため、RGBA に変換するか Jpeg 画像のデータに変換します。

変換したデータを WebSocket で送信すれば、リアルタイム再配信が可能となります。

関連

OpenCV を利用する際の注意点は「画像処理の基礎知識」にまとめています。

 

サンプルプログラム

参考

C++で実装したい場合は「ブラウザでRTSPストリーミング再生【C++版】」を参照ください。

 

ブラウザ(HTML/JavaScript)

WebSocket サーバと接続

もともと HTML5 の規格のため、JavaScript で WebSocket を扱うのは非常に簡単です。
以下のように記述するだけで、サーバ側と接続することができます。

 

動画フレームを HTML Canvas に描画

WebSocket サーバからの送信フォーマットによって処理が少し異なります。

  • Jpeg画像のバイナリデータ
    受信したバイナリデータを base64 に変換して描画させます
  • RGBA のバイナリデータ
    受信したデータを配列に格納し、HTMLCanvas.getContext('2d').putImageData() で描画します

 

サンプルプログラム

 

さいごに

今回のサンプルプログラムでは、Jpeg配信とRGBA配信の両方を記述しています。
お気づきの方もおられると思いますが、動画のストリーミング風の静止画パラパラ漫画になります。

パラパラ漫画ではありますが、WebSocket+HTML Canvasは 90 FPS 以上出せる手法のため、
一般的な使用範囲であれば問題ないでしょう。

 

こちらの記事もよく読まれています

  • この記事を書いた人
  • 最新記事
SANACHAN

SANACHAN

「生涯一エンジニア」を掲げ、大手グローバル企業でSE/PGとして8年勤め、キャリアアップ転職した現役のエンジニアです。世にあるメジャーな全プログラム言語(コボル除く)を自由に扱えます。一児の父。自分のため、家族のため、日々勉強してます。システムエンジニア、プログラミングに関する情報を蓄積している雑記帳です。

-HTML/JavaScript
-, , , ,