web-dev-qa-db-ja.com

ストリーミングRTSPメディアをHTML5ページに埋め込む方法

VLCプレーヤーでキャプチャできるrtsp経由で送信するセキュリティカムがありますが、それを自分のWebページに埋め込みたいです。私はこれを行う方法について何時間も探していましたが、これを行う方法に関する最近のドキュメントを見つけることができませんでした。

私もvlcを設定していないので、基本的にはcam-> rtsp-> player(必要な場合)-> html embedから移動しようとしています。

任意の助けいただければ幸いです。そして、これは未解決の問題であることは知っていますが、ネット上で必要なものを見つけることができないので、あらゆる解決策を受け入れます。

そうは言っても、私にストリームを送信するサードパーティのプロバイダーを探しているのではありません。セキュリティ上の理由から、ストリームはコンパウンドを終了しません。

古い記事への古いリンクも送らないでください。私は精査して、おそらくそれらをすでに読んでいます、そして私の経験は物事が変わったということです。同様の問題を経験し、解決できる人からの回答を探しています。ありがとう!

5
stevenlacerda

I。VLCを開き、[メディア]メニューから[ネットワークストリームを開く]を選択します。

II。IPカメラのRTSP文字列(資格情報を含む)を入力します。つまり、IPカメラ用のrtsp://test:[email protected]:554/cam/realmonitor?channel=1&subtype=1を入力します。

III。[再生]ボタンの横にある下矢印をクリックし、[ストリーム]を選択します。

IV。宛先を「HTTP」に設定し、「ADD」を選択します。ポートフィールドで、VLCがビデオのストリーミングに使用するポートを設定できます。この例では8080を使用しました。「/」のままにできるパス。

V。[トランスコーディングをアクティブにする]チェックボックスをオンにし、プロファイルを「ビデオ-Theora + Vorbis(OGG)」に設定します。

VI。ドライバー+レンチアイコンをクリックし、カプセル化をOgg/Ogmに設定し、ビデオコーデックを "Theora"に設定してから、ビットレートを希望する値に設定しますストリームをサイトにブロードキャストします(その価値のために、カメラストリームを使用しているのと同じビットレートを使用します。さらに、フレームレートを設定することもできます

VII。サブタブ[解像度]を使用すると、スケール、幅、高さを「自動」で使用できます。カメラにマイクがない場合や、音声を放送したくない場合は、音声コーデックを無効にし、字幕を無効にすることができます。最後に「保存」、「次へ」の順にクリックします。

VIII。[すべてのエレメンタリーストリームをストリーミングする]チェックボックスをオンにし、[ストリーム]をクリックします。 VLCは、通常ビデオが意図されている場所にブラックボックスを表示することに注意してください。ビデオタイマーが[一時停止/再生]ボタンの真上に移動するのを確認します。

IX。次に、このコードをページにドロップします。

<video id="video" src="http://IP_of_VLC_computer:VLC_Port" autoplay="autoplay" width="videowidth" height="videoheight"></video>

私の1つは次のとおりです。

<video id="video" src="http://192.168.0.4:8080" autoplay="autoplay" width="704" height="480"></video>

X。Webページをロードして、ビデオの外観を確認します。緑色の画面のように見えても気にしないでください。 5秒ごとにページを更新するだけで、ページにストリームを更新させることができます。これは、RTSPビデオ転送で一般的です。

要約すると、VLCを介してPCをトランスコーダーに変え、HTML5フレンドリーなRTSPビデオを吐き出しています。

このプロセスを完了する方法を示すために 1分46秒のビデオ をyoutubeにアップロードしました。

6
B.DeWitt