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

私は、RTSPのライブビデオストリームを提供するIPカメラを持っています。私はVLCメディアプレーヤーを使って、URLを提供することでフィードを表示することができます。

rtsp://cameraipaddress

しかし、私はウェブページにフィードを表示する必要があります。カメラのプロバイダーはActiveXコントロールを提供し、私はそれを動作させることができましたが、それは本当にバグが多く、ブラウザが頻繁にハングアップする原因となっています。

RTSPをサポートする別のビデオプラグインをご存知の方はいらっしゃいませんか？

カメラはH264またはMPEG4でストリーミングするように設定することができます。

JakeGould
編集された質問 9日 2月 2015 в 9:36
プログラミング
video-streaming rtsp
11日 2月 2010 в 2:27
401 ビュー
質問へのコメント (2)

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

http://wiki.videolan.org/ActiveX/HTMLです。


   <param name="Src" value="rtsp://cameraipaddress" />
   <param name="ShowDisplay" value="True" />
   <param name="AutoLoop" value="False" />
   <param name="AutoPlay" value="True" />
解説 (7)

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

1.リアルプレイヤー 2.クイックタイムプレーヤー 3.VLCプレーヤー

ActiveXを埋め込むためのコードは、google検索で見つけることができます。

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

1.RealplayerはH.264ビデオをネイティブにサポートしていません。H.264デコードを実現するには、Realplayer用のquicktimeプラグインをインストールする必要があります。 2.2. Quicktime PlayerはRTP/AVP/TCPトランスポートをサポートしておらず、RTP/AVP（UDP）トランスポートはNATホールパンチを含んでいません。そのため、WAN環境下では、HTTPトンネリングが唯一のトランスポートとなります。 3.3. VLC は RTP/AVP トランスポートの NAT ホールパンチングをサポートしていませんが、RTP/AVP/TCP トランスポートは利用可能です。

解説 (2)

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

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

したがって、変更せずにHTMLファイルに貼り付けてコピーするだけです。

解説 (3)

RTSPを直接Webページにストリーミングする場合は、カメラに付属のActiveXコントロールビューアを使用するのが唯一の選択肢だと思います。 これは直接接続IP Cam ->です。視聴者、そして本当に最速でなければなりません。 なぜ問題があるのかわからない。 Axis ActiveXは私にとってかなりうまくいきます。

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

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

解説 (1)

また、opensource WebRTC Media Server [Kurento][1]を試すこともできます。

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

次のケースでは、Productionで使用しています。

。
 -WebRTCからWebrtc(多数から多数)。
 -WebRTCからRTMP。
 -RTSPからWebRTCへ。
< / pre>。
  [1]:http://www.kurento.org/。
elmicha
編集した答え 3日 2月 2019 в 1:38
解説 (2)

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

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

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

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

解説 (4)

Wowza 。

1。 RTSPをRTMP(Flash Player)に再ストリーミングしても、Androidでは機能しません。 ChromeまたはFF(Flashはサポートされていません)。 2。 RTSPをHLSに再ストリーミングします。

Web Call Server(Flashphoner)。

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

2。 RTSPをWebソケット(iOS SafariおよびChrome / FFデスクトップ)に再ストリーミングします。

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

解説 (1)

QuickTime Playerを試してみようウェブページに埋め込みオブジェクトを生成し、ストリームを再生する私のJavaScriptはこちらです。


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

var output = '';
    output += '<param name="src" value="'+adsress+'">';
    output += '<param name="autoplay" value="true">';
    output += '<param name="controller" value="false">';
    output += '
解説 (4)

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

リンクの説明は詳細でわかりやすいですが、機能させる前に(NodeJSサーバーのエンドポイントに関して)対処する必要があるいくつかの調整がありました。 私はそれのために独自の質問をしました、そして、良いと働く答えを得ました。

Hauns TM
編集した答え 27日 12月 2018 в 11:04
解説 (0)

プラグインを必要とせずにIP /ネットワークカメラをWebブラウザーにリアルタイムでストリーミングするのに役立つプロジェクトをGithubで公開しました。これは、MITライセンスに基づくオープンソースプロジェクトに貢献しました。これは、ニーズに一致する可能性があります。< br />。

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

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

Phok Chanrithisak
編集した答え 7日 1月 2019 в 12:44
解説 (0)

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

私のヒント:プラグインをロードするよりも、まずOSをチェックします。 . Windowsでは簡単です-WMPを取る、他のテイクMS Silverligt。 ...

解説 (0)

Media Source拡張機能をリレーするAxisによるメディアストリームライブラリを確認します。

-https://github.com/AxisCommunications/media-stream-library-js。 -https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API。

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

解説 (0)

このような目的で、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

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

解説 (0)

使用するものについては、次のURLが機能します。

rtmp:///flash/11::

例:

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

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

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

。![JavaScriptでURLを検索](https://i.stack.imgur.com/dAMGp.png。)。

解説 (0)

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

これが究極の答えです。 rtspリンクをWebサイトに埋め込むことができます。

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







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

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

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

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

_____。

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

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

ここhttp://www.mhcreative.com.my/ipcameratowebsite/をクリックしてください。

Mazlan Halim
編集した答え 24日 5月 2014 в 3:55
解説 (5)