RTSP/H264 to MP4の超低遅延ブラウザ再生（配信）

はてブ数 2021/02/22 プログラム::TCP/IP

カメラ等で使われるRTSPストリームはブラウザとすこぶる相性が悪く、以前はFlashを使って親戚のRTMPが再生されたりしていましたが、もはや過去のお話。

最近は、分割した MPEG4 ファイルを連続再生する HLS や MPEG-DASH が主流です。しかし、すべてを数秒に分割する仕組みのため通信効率が悪くなってしまいますし、どうやっても遅延の問題が避けられません。

かと言って WebRTC はP2P用に設計されていて、ブラウザ間ビデオチャットには向いていますが、配信等の目的に使うことは難しく、そもそもUDPが使えない環境では動作もしません。

そこで超低遅延（1秒未満）のストリーミング再生（配信）システムを構築しました。

デモ

デモを設置しています。

rtsp:// で始まるURLを入力すると、RTSPをリアルタイムで変換を確認できます。残念ながら適当なフリーのRTSPソースがないため、各自ご用意ください。

  • Chrome および Firefox が推奨です。
  • 対応しているのは「H264/avc1」ストリームのみです。
  • デモはセキュリティのため以下の制限を加えています。
    • RTSPパスワード認証には非対応です。
    • RTSP接続ポートは 554 のみに制限されています。
    • 再生時間は60秒に制限されています。
  • 「WebSocket Server Down」と言われた場合は、変換サーバの起動忘れなので、コメント or ご連絡ください。
  • デモですので、常識の範囲内でご利用ください*1。

WebCodecsにも対応しておりますが、現時点で対応しているChrome M88*2ではすぐに再生が止まってしまいます。

*1 : 外部から利用する等はやめてください。ログは取っていますので発見次第対処します。

*2 : chrome://flags から #enable-experimental-web-platform-features を設定する必要があります。

仕組み

rtsp_to_mp4.png

RTSPサーバに接続して、リアルタイムでmp4に変換しています。コンテナ（フォーマット）を変換していますが再圧縮しているわけではないので高速に動作します。ffmpegを使っても同様のことが可能ですが、ffmpegでは変換過程で数秒程度の遅延が発生します。

ffmpeg -i rtsp://<ip_address>/path -c:v copy -an -movflags empty_moov+omit_tfhd_offset+frag_keyframe+default_base_moof -f mp4 pipe:1

mp4に変換されたデータを WebSocket 経由でブラウザに送信し、受け取ったデータを JavaScript で MediaSource に入力し、VIDEOタグで表示しています。

let sourceBuffer;
const ms  = new MediaSource();
ms.addEventListener('sourceopen', function(evt){
	sourceBuffer= ms.addSourceBuffer('video/mp4; codecs=avc1.64001E');
});

const VIDEO = document.getElementById('video');
VIDEO.src   = window.URL.createObjectURL(ms);

const ws = new WebSocket('ws://example.com/');
ws.binaryType = "arraybuffer";

ws.onmessage = function(evt) {
	sourceBuffer.appendBuffer( evt.data );
}

実際はもう少し複雑ですが、フロントエンド（JavaScript）では難しいことはしていません。デモページ内のソースに、スクリプトが全部書かれていますので、興味のある方はご覧ください。

変換サーバは？

今のところ非公開です。興味のある方はメール等でご連絡ください。ライセンス等する予定です。

まとめ

  • 映像が目的だったため、今のところオーディオには非対応です。
  • H264の圧縮も伸張もしていないので、H264がらみの特許問題は起きないはずです。
  • Windows Media ServerやReal Serverがそうだったように、将来的にはRTSPが廃れるか、ブラウザがRTSPやRTSPライクな何かをサポートして状況は変化するように思います。

参考文献

  • html5_rtsp_player
    WebSocket経由でRTSPサーバにアクセスし、JavaScript側でRTSP通信をしながらmp4を再構成しています。原理的には似ていますが、サーバ/クライアントでの処理分担が異なります。サーバはNode.jsで書かれていますが、30行程度のスクリプトでサーバを自作することも可能でした。
コメント（0件）

2018/09/29(土)Strawberry PerlでImage::Magick(PerlMagick)ごとEXE化

はてブ数 プログラム::Perl

Image::Magickモジュールを含むWindows用EXEが生成できる pp 環境の構築。

Strawberry Perl

Strawberry Perlのサイトから、ダウンロードしました。執筆時点で最新は「5.28.0.1」ですが、Image::Magickが入らないので、5.26.2.1を選択。

形式はどれでも構わないと思いますが、個人的にPortableを選びました。

Image::MagickとPAR::Packerの導入

Image::Magickはppmから入れるので簡単でした。

c:\> ppm
ppm> install Image::Magick
Install package 'Image-Magick?' (y/N): y

ppm> quit

続いてPAR::Packerです。PARは普通にインストールするとよくエラーが出るので、force installしました。

c:\> cpan
cpan> force install PAR::Packer

コンパイル＆テストが長いのでそこそこ待たされます。

PAR::Packer Ver1.047の修正

Image::Magickをパッケージに含めるためには、Image::MagickのDLLを一緒に含める必要があります。

pp は -l オプションや -a オプションを使うと、DLLや他のファイルを一緒にパッケージ化することができます。できますが、それではImage::Magickのロードに失敗します。Image::MagickのDLLは通常と違う場所に置かれているのでDLLがロードできませんし、DLL以外の必要ファイルを参照するための情報も不足します。

これを修正するために、perl/vendor/lib/PAR.pm にパッチを充ててください。

sub import {
    my $class = shift;

    PAR::SetupProgname::set_progname();
    PAR::SetupTemp::set_par_temp_env();

    # patch for sitelib by nabe@abk ---------
    if ($ENV{PAR_TEMP} && $^O eq 'MSWin32') {
        my %conf;
        foreach(keys(%Config)) {
            $conf{$_} = $Config{$_};
        }
        *Config::Config = \%conf;   # replace read-only object

        my $base = "$ENV{PAR_TEMP}\\inc";
        $Config::Config{sitelib}    = "$base\\site\\lib";
        $Config::Config{sitelibexp} = "$base\\site\\lib";
    }
    # patch end -----------------------------

Image::Magickは環境変数を参照しながら、.dllや.xmlファイルをその都度ロードするようになっているのですが、それらのファイルは指定しないとパッケージ化されませんし、パッケージ化しても $Config{sitelib} が適切に設定されていないため、Magick.pm で正しく環境変数を設定できません。

これを解決するためのパッチになります。

Image::MagickのライブラリごとEXE化

pp コマンドの -a オプションで、Image::Magickのライブラリ類（*.dll, *.xml）を一緒にパッケージ化します。

Strawberry Perlインストールディレクトの「perl\site\lib\Image」以下にあるすべてのファイルをパッケージに収録します。面倒なのでファイルに記述してそれをコマンドラインで与えることにします。

以下は例になります。パスは適当に読み替えてください。

pp -a "C:/strawberry-perl-5.26.2.1/perl/site/lib/Image;site/lib/Image"
   -o test.exe test.pl

オプションが長くなり入力が面倒なので、pp-option というファイルを用意してその中にオプションを書きました。

pp @pp-option

注意

スクリプト内で、スレッド生成やforkをしている場合は、スクリプト最初の方で「use Image::Magick」してください。生成されたスレッドやプロセスから「require Image::Magick」しても必要な環境変数が設定されず、Image::Magickが動作しません。

まとめ

Image::Magickモジュールごと、PerlスクリプトをEXE化できるようになりました。

ActivePerlでも同じ方法で解決できると思います。

コメント（0件）

2015/12/01(火)gitコマンドメモ

はてブ数 プログラムメモ

自分用メモ。

初期設定

$ git config --global user.name "nabe"
$ git config --global user.email "nabe-g@example.com"
$ git config --global core.editor vi
$ git config --global color.ui true 
$ git config --global core.pager 'less'
$ git config --list
$ git init
$ git clone http://------/

基本コマンド

$ git status
$ git log
$ git log --oneline
$ git log --pretty=oneline
$ git diff
$ git diff --cached
$ git rm
$ git mv

コミット

$ git commit
$ git commit --amend		直前のコミットをやり直し（上書き）
$ git reset  --soft HEAD^	ファイルをそのままでコミットの取り消し

stash

$ git stash
$ git stash pop

ブランチとタグ

$ git branch new-branch
$ git checkout branch-name
$ git merge develop
$ git tag -a v3.00-beta2 -m "Version 3.0x"
$ git push
$ git push --tags
$ git tag -d DeleteTAG
$ git push origin :DeleteTAG

リモート操作

$ git remote -v
$ git remote add [name] [url]
$ git remote add 
$ git remote rename pb paul

その他

手元の変更取り消し

$ git checkout -- .

ログ

$ git log --pretty=oneline
コメント（0件）

2015/11/09(月)IPカメラ（Webcam）リレープログラム / ip-camera-relay.pl

はてブ数 プログラム::TCP/IPプログラム::配布プログラム::Perl

IP Cameraの映像を中継するプログラムです。以下の機能があります。

  • IPカメラへの自動再接続。
  • 複数のIPカメラを登録し、接続できたカメラの映像を中継する。接続が切れたら、次に接続できたカメラに接続する。
  • IPカメラに接続できていない時は、指定した画像（ブランクイメージ）を代わりに送信する。

VLCなどのIPCamストリーム受信ソフトでは、カメラとの接続が切れた場合に自動再接続を行ってくれないものがあります。またカメラと接続が切れたときにブランク画像を挿入したいこともあり、それを実現するためのソフトになります。

プログラム

Gistに置いたので、適当に拾ってください。

使い方

$ ip-camera-relay.pl -p 8888 http://(camera-ip):port/stream-path

クライアント接続用に8888番ポートを開き、指定したカメラに接続します。カメラURLはブラウザから接続するURLではなく、ビデオストリームのURLを指定してください*1。

複数のカメラを指定すると、それぞれを順番に接続します。最初に接続できたストリームをクライアントに配信し、カメラとの接続が切れたら次に接続できたカメラの映像を送ります。

どのカメラとも接続できない時は、ブランク画像（標準では640x480の青い画像）を送信します。

その他オプションはヘルプを参照してください。

*1 : ブラウザから接続したりカメラの仕様書を見れば、書かれているかと思います。

WebCamのプロトコル

続きを読む

コメント（3件）

2015/11/06(金)UPnP/SSDPマルチキャスト中継プログラム（DLNA用）

はてブ数 プログラム::TCP/IPプログラム::Perlプログラム::配布

UPnPのマルチキャストパケットを中継するためのプログラムです。通常、同一ネットワーク内でしか使用できないUPnPを、ルーターを超えて使用できるようになります。

想定

  • DLNAサーバとクライアント（またはコントローラーとレンダー）がルーターを超えて存在する。
  • それぞれネットワークAとBとすれば、A内のPCとB内のPCは互いに通信可能である（NATされていない）。
  • どちらのネットワークにも属するPCが存在する。

「WiFiと有線LAN環境を同一ネットワークにしたくない」ただそれだけなのですが、そのせいでUPnP/DLNAが超えられず大変苦労しました……。

続きを読む

コメント（0件）