web-dev-qa-db-ja.com

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

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

rtsp://cameraipaddress

しかし、Webページにフィードを表示する必要があります。カメラプロバイダーから提供されたActiveXコントロールを使用して作業しましたが、本当にバグが多く、ブラウザーが頻繁にハングします。

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

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

video-streamingrtsp
79
elMarquis

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>
27
Russell

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

  1. リアルプレーヤー
  2. Quicktimeプレーヤー
  3. VLCプレーヤー

Google検索でactiveXを埋め込むコードを見つけることができます。

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

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

広いインターネット帯域幅と主要なブラウザと互換性のある優れたビデオプレーヤーが必要なため、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ファイルに貼り付けるだけです。

16
Adorjan Princz

RTSPを直接Webページにストリーミングしたい場合は、カメラに付属しているActiveXコントロールビューアーを使用することが唯一のオプションであると思います。これは直接接続IP Cam-> Viewerであり、実際に最速です。問題がある理由がわかりません。 Axis ActiveXは私にとって非常にうまく機能します。

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

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

8
user1390208

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>

注：上記のスニペットは、IPカメラでサポートされているrtsp url形式を使用しています。そのため、カメラでも同じようにする必要があります。この情報は、カメラベンダーのサポートに問い合わせることにより取得できます。また、Chrome（ChromeのactiveXプラグインを使用）および他のブラウザー（携帯電話を含むブラウザー）はサポートされていない可能性があります。

6
CrakC

また、オープンソースのWebRTC Media Serverを試すことができます Kurento

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

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

-WebRTCからWebrtc（多対多）
-WebRTCからRTMP 
-RTSPからWebRTC
6
Denis Lisitskiy

Wowza

  1. RTSPへのRTSP（Flash Player）の再ストリーミングは、Android ChromeまたはFFでは機能しません（Flashはサポートされていません）
  2. RTSPからHLSへの再ストリーミング

Web Call Server （Flashphoner）

  1. RTSPをWebRTCに再ストリーミングする（Chromeまたはデスクトップ上のAndroidおよびFFのネイティブブラウザ機能）

  2. RTSPをWebsocketに再ストリーミングする（iOS SafariおよびChrome/FFデスクトップ）

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

5
ankitr

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="'+adsress+'">';
    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;
4
Cipi

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

リンクの説明は詳細でわかりやすいものですが、動作させる前に（NodeJSサーバー上のエンドポイントに関して）いくつかの調整が必要でした。 独自の質問 を作成し、うまく機能しました answer を取得しました。

3
Hauns TM

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

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

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

2
Phok Chanrithisak

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

私のヒント：プラグインをロードする前に、まずOSをチェックしてください。 Windowsでは簡単です-WMPを取得し、他の場合はMS Silverligtを取得します...

1
uwe

Media Source拡張機能を中継するAxisのメディアストリームライブラリを確認します

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

1
loreii

このような目的のために、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プラグインに基づく）。

1
Grigory Kornilov

私が使用するものでは、次のURLが機能します。

rtmp://<IP_address>/flash/11:<username>:<password>

例えば：

rtmp://192.168.1.10:1935/flash/11:admin:admin

IP CAMのIP、ユーザー名、パスワードを見つける必要があります。

上記のURLをブラウザーに入力すると、そのストリームが検出され、メディアプレーヤーが開きます。見つけたIPアドレスにログインすることで、makeの正しいURLを見つけることができます。 （Nmap、怒っているIPスキャナーなどのスキャナーを使用してください）

find URL in Javascript

0
Prometheus