RTSPビデオストリームをWebページに表示するにはどうすればよいですか？

Question 1

ライブRTSPビデオストリームを提供するIPカメラがあります。VLCメディアプレーヤーを使用して、次のURLを指定することでフィードを表示できます。

rtsp://cameraipaddress

ただし、フィードをWebページに表示する必要があります。カメラプロバイダーは私が動作するActiveXコントロールを提供しましたが、それは本当にバグがあり、ブラウザーが頻繁にハングする原因になります。

RTSPをサポートする代替のビデオプラグインを知っている人はいますか？

カメラは、H264またはMPEG4のいずれかでストリーミングするように構成できます。

Question 2

VLCには、Webページにフィードを表示できるActiveXプラグインも付属しています。

http://wiki.videolan.org/ActiveX/HTML

<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
     codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
     width="640" height="480" id="vlc" events="True">
   <param name="Src" value="rtsp://cameraipaddress" />
   <param name="ShowDisplay" value="True" />
   <param name="AutoLoop" value="False" />
   <param name="AutoPlay" value="True" />
   <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
     target="rtsp://cameraipaddress" ></embed>
</OBJECT>

Question 3

広いインターネット帯域幅と主要なブラウザと互換性のある優れたビデオプレーヤーが必要なため、IPカメラからのライブビデオストリームをWebページに表示するのは簡単ではありません。

しかし幸いなことに、私たちのためにこの仕事をすることができるいくつかのクラウドベースのサービスがあります。最高の1つはIPCamLiveです。このサービスは、IPカメラからRTSP / H264ビデオストリームを受信し、視聴者にブロードキャストできます。IPCamLiveには、PC、MAC、タブレット、またはモバイルでビデオを表示するFlash / HTML5ビデオプレーヤーコンポーネントがあります。最大の利点は、このサイトが次のようにライブビデオを埋め込むために必要なHTMLスニペットを生成することです。

<iframe src="http://ipcamlive.com/player/player.php?alias=szekesfehervar" width="800px" height="600px"/>

したがって、変更せずにHTMLファイルにコピーアンドペーストする必要があります。

Question 4

WebページにRTSPビデオストリームを表示するには、大まかに3つの選択肢があります。

リアルプレーヤー
Quicktimeプレーヤー
VLCプレーヤー

あなたはグーグル検索を介してActiveXを埋め込むためのコードを見つけることができます。

私の知る限り、各プレイヤーにはいくつかの制限があります。

RealplayerはH.264ビデオをネイティブでサポートしていません。H.264デコードを実現するには、RealplayerのQuickTimeプラグインをインストールする必要があります。
QuicktimeプレーヤーはRTP / AVP / TCPトランスポートをサポートしておらず、RTP / AVP（UDP）トランスポートにはNATホールパンチングが含まれていません。したがって、実行可能な唯一のトランスポートは、WAN展開でのHTTPトンネリングです。
VLCは、RTP / AVPトランスポートのNATホールパンチングもサポートしていませんが、RTP / AVP / TCPトランスポートは使用できます。

Question 5

RTSPをWebページに直接ストリーミングしたい場合は、カメラに付属のActiveXコントロールビューアを使用するしかありません。これは直接接続のIPカメラ->ビューアであり、実際に最速である必要があります。問題が発生している理由がわかりません。AxisActiveXは私にとってかなりうまく機能します。

ただし、このオプションは実際には帯域幅効率が高くなく、複数の同時ビューアにサービスを提供することはできません（ほとんどのIPカムには10のビューア制限があります）。より良いオプションは、単一のRTSPストリームを中央でホストされているストリーミングサーバーにアップロードすることです。これにより、ストリームがRTMP / MPEG-TSに変換され、Flashプレーヤー/セットトップボックスに公開されます。

Wowza、Erlyvideo、Unreal Media Server、Red5がオプションです。

Question 6

WebプラグインのVLC公式ドキュメントからシンプルで実用的なソリューションを見つけました

https://wiki.videolan.org/Documentation:WebPlugin/

コードを少し変更して、機能させました。これが私のコードです-

<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" autoplay="yes" loop="no" width="300" height="200" target="rtsp://10.20.50.15:554/0/888888:888888/main" />
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" style="display:none;"></object>

注：上記のスニペットは、rtsp私のIPカメラでサポートされているURL形式を使用しています。だからあなたはあなたのカメラのために同じものを手に入れる必要があります。この情報は、カメラベンダーのサポートに相談して入手できます。また、Chromeでテストし（Chrome用のActiveXプラグインを使用）、他のブラウザー（携帯電話のブラウザーを含む）がサポートされていない可能性があることにも注意してください。

Question 7

また、オープンソースのWebRTC Media ServerKurentoを試すこともできます

RTSPビデオストリームを再生してWebRTCに送信したり、RTMPにトランスコードしたり、サーバーに保存したりできます。

以下の場合に本番環境で使用しています。

 -WebRTCからWebrtc（多対多）
 -WebRTCからRTMP
 -RTSPからWebRTCへ

Question 8

Wowza

RTSPをRTMP（Flash Player）に再ストリーミングするAndroid ChromeまたはFFでは機能しません（Flashはサポートされていません）
RTSPをHLSに再ストリーミングする

Webコールサーバー（Flashphoner）

RTSPをWebRTCに再ストリーミング（AndroidまたはデスクトップのいずれかでのChromeおよびFFのネイティブブラウザー機能）
RTSPをWebsocketに再ストリーミングする（iOSSafariおよびChrome / FFデスクトップ）

この記事を見てください。

Question 9

この投稿は古いことは知っていますが、先日非常によく似たものを探していました（IPカムのRTSPビデオフィードを、派手なActiveXプラグインのない単純なhtmlページで表示してください）。幸運なことに、私は解決策を見つけました！これは、ffmpeg、NodeJS、NGINX（必須ではありませんが便利です）およびNode MediaServerに基づいています。

リンクの説明は詳細でわかりやすいですが、動作させる前に対処する必要のある調整がいくつかありました（NodeJSサーバー上のエンドポイントに関して）。私はそれについて独自の質問をし、良い実用的な答えを得ました。

Question 10

QuickTime Playerをお試しください！Webページに埋め込みオブジェクトを生成してストリームを再生するJavaScriptは次のとおりです。

//SET THE RTSP STREAM ADDRESS HERE
var address = "rtsp://192.168.0.101/mpeg4/1/media.3gp";

var output = '<object width="640" height="480" id="qt" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">';
    output += '<param name="src" value="'+address+'">';
    output += '<param name="autoplay" value="true">';
    output += '<param name="controller" value="false">';
    output += '<embed id="plejer" name="plejer" src="/poster.mov" bgcolor="000000" width="640" height="480" scale="ASPECT" qtsrc="'+address+'"  kioskmode="true" showlogo=false" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">';
    output += '</embed></object>';

    //SET THE DIV'S ID HERE
    document.getElementById("the_div_that_will_hold_the_player_object").innerHTML = output;

Question 11

メディアソース拡張を中継するAxisによるメディアストリームライブラリを確認します

JSのGstreamerと同様のパイプラインを実装し、h264デペイを使用します。注：jsで消費されるストリーミングは直接rtspではなく、node.jsrtsp-websocketプロキシ上のライブラリ自体によってws：//にカプセル化されます。

Question 12

プラグインを必要とせずにIP /ネットワークカメラをWebブラウザにリアルタイムでストリーミングするのに役立つプロジェクトをGithubに公開しました。これは、MITライセンスの下で、ニーズに合ったオープンソースプロジェクトに貢献しました。

NodeJSを使用したWebブラウザでのIP /ネットワークカメラのストリーミング

フレームワークの完全なパッケージはまだありませんが、それはあなたにさらに進む方法を与えるかもしれないキックスタートです。
学生として、これがお役に立てば幸いです。このプロジェクトに貢献してください。

Question 13

1つのオプションは、ある種のストリーミングサーバー/ゲートウェイを使用することです。私はさまざまなソリューション（vlc、ffmpeg、その他いくつか）を試しましたが、私にとって最も効果的なのはJanusWebRTCサーバーでした。セットアップはやや難しく、ソースからコンパイルする必要があります（UbuntuリポジトリのバージョンはRTSPをサポートしていませんでした）が、詳細なコンパイル手順とドキュメントがありますすべてをセットアップする方法に関するがあります。

ローカルネットワーク上の3台のFullHDカメラからほとんど遅延なくビデオとオーディオのフィードを取得することができました。DahuaおよびHikvisionカメラで動作することを確認できます（すべてのモデルかどうかはわかりません）。

私が使用したのは、ApacheWebサーバーを実行しているUbuntuServer 18.04と、ブラウザーとしてのChromeでした（デフォルトではFirefoxでは機能しませんでしたが、おそらく回避策があります）。

Question 14

Microsoft Mediaplayerは、必要なすべてを実行できます。2003/2008サーバーのMSMediaservicesを使用して、ビデオをブロードキャストおよびユニキャストストリームとして配信しています。このサービスは、カムからストリームを取得してブロードキャストすることができます。すべてのOSシステムのすべてのブラウザでその画像を「表示」する問題が「唯一」あるより

ヒント：プラグインをロードするよりも、まずOSを確認してください。Windowsでは簡単です-WMPを取り、他の場合はMSSilverligtを取ります..

Question 15

このような目的のために、私はVLCを再配布サーバーとして使用します。あなたはVLCでビデオをキャッチできると言いましたか？VLCでメディアを右クリックし、[ストリーム]を選択して、オプションを選択します。コマンドラインを使用してこれを行うこともできます。これにより、さまざまなオプション（トランスコーディング、スケーリング、圧縮、インターレース解除）の潜在的な利点が得られます。これは、ソースから独自の555ポートへのVLC配布を開始するバッチです（したがって、ストリームを取得するには、Webページのsrcオプションにrstp：// myvlcserveripaddress：555と入力する必要があります）

cd \
cd C:\Program Files (x86)\VideoLAN\VLC\

vlc --logo-file C:\logo.png --logo-position 5 --logo-opacity 200 --logo-x 900 --logo-y -2 "mmsh://typeyoursourceIPhere:554" :sout=#transcode{vcodec=div3,vb=800,scale=0,acodec=mpga,ab=128,channels=2,samplerate=44100}:duplicate{dst=rtp{mux=ts,sdp=rtsp://:555/stream}} :sout-all :sout-keep

ここに、プレーヤーを埋め込んだWebページのサンプルがあります（VLCプラグインに基づく）。

Question 16

上記のすべてのソリューションは、もはや機能しないか、理解するのに時間がかかりすぎます。

これが究極の答えです。あなたはあなたのウェブサイトにrtspリンクを埋め込むことができます。

以下のコードをhtmlエディターにコピーします。

<!--- BEGIN PLAYER --->

<!-- webbot bot="HTMLMarkup" startspan ---->

<object ID="MediaPlayer" WIDTH="320" HEIGHT="270" CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">

<param name="autoStart" value="True">

<param name="filename" value="rtsp://xxx.xxx.xxx:xxxx">

<param NAME="ShowControls" VALUE="False">

<param NAME="ShowStatusBar" VALUE="False">

<embed TYPE="application/x-mplayer2" SRC="rtsp://xxx.xxx.xxx:xxxx" NAME="MediaPlayer" WIDTH="320" HEIGHT="270" autostart="1" showcontrols="0"></embed></object>

<!-- webbot bot="HTMLMarkup" endspan ---->

<!--- end PLAYER --->

これがすべて複雑すぎてそれでも解決しない場合は、私がお手伝いします。

私はクライアントのためにこれを行いました。

ここをクリックhttp://www.mhcreative.com.my/ipcameratowebsite/