ビデオディスプレイのWebフロントエンドの監視

RTSP、HLS、およびFLV：フロントエンドの表示映像のモニタリング、私は主に3つのビデオストリームを示していました。

1、RTSPビデオストリーム

　　RTSPビデオストリームプラグインをインストールする必要があり、私はこのストリームをやっていたと、その互換性をプラグインVLCプレーヤーをインストールすることで、良いではありません現在、通常の唯一の360のブラウザで再生、重大な制限を発見しました。HTML5でのObjectタグは、コードを見て：

1  < オブジェクトCLASSID = "CLSID：9BE31822-FDAD-461B-AD51-BE1D1C159921"  
2        コードベース= "http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" 
3        、ID =」 VLC " 
4        名= "VLC" 
5        クラス= "vlcPlayer" 
6つの        イベント= "真の" 幅= "400" 高さ= "400" > 
7          < のparam の名前= "Srcの" 値=" RTSPは：//管理者：123456 @ IP：？ポート/カム/ RealMonitorのチャンネル= 1＆サブタイプ= 0"  />
8          < のparam の名前= "ShowDisplay" 値= "真"  /> 
9          < のparam の名前= "AutoLoop" 値= "偽"  /> 
10          < のparam の名前= "自動再生" 値= "真"  /> 
11          < のparam の名前= 'フルスクリーン' 値= '偽' /> 
12          < 埋め込むID = "vlcEmb"   タイプ= "アプリケーション/ X-GoogleがVLC-プラグイン" バージョン= "VideoLAN.VLCPlugin.2" 自動再生= "YES"ループ=「なし」幅=「600」高さん= "450" 
13           ターゲット= "RTSP：//管理者：？123456 IP @：ポート/カム/ RealMonitorのチャンネル= 1＆サブタイプ= 0"  > </ 埋め込み> 
14  </ objetc >

　　ビデオストリーム住所：

　　RTSP：//管理：IP @ 123456：ポート/カム/ RealMonitorのチャンネル= 1＆サブタイプ= 0？

2、HLSおよびFLV

　　厳しすぎるRTSPので、顧客は帰りを求めたので、彼は、遅滞なくHLSとFLVストリームは、HLSが数秒間遅れることになる方法が、ネットワーク環境にあまり厳しく、FLVを変更しましたが、より多くのネットワーク環境の要件に高いです。新しいラベルビデオHTML5、および良好な適合性を持つこのように、それは多くのブラウザと互換性を持つことができます。

　　HTMLページ：

1  < DIV   ID = 'servicehallSlide_camera' > < 動画ID = 'myVideo' クラス= 'ビデオ-JS のVJ-デフォルト・スキン'コントロールプリロード= 'auto'で自動再生= '真' > </ DIV >

　　JSコード：

1  / * *
 2  *ビデオモニタは、ストリームタイプを表示
 。3  * playVideoを@method
 。4  * @param {文字列} videoUrlビデオストリームアドレス
 。5  * @param {文字列}ビデオストリーム型スキーム
 6  * @return {}戻り戻り型値説明
 7。 * * / 
8。 機能playVideo（videoUrl、スキーム）{
 9。     IF（flvjs.isSupported（）！）{アラート（ "ブラウザはFLVをサポートしていません、アップグレード！" ）;}
 10      IF（Hls.isSupported（）！ ）{警告（ "ブラウザはHLSをサポートしていません、アップグレード！" ）;}
 11。     VARのビデオ=のdocument.getElementById（ "myVideo" ）;
 12がある     // プレイストリーミングビデオHLS 
13である     のIF（スキーム== 'HLS' ）{
 14          のvar myPlayer = 新しいHLS（）。
15          myPlayer.loadSource（videoUrl）。
16          myPlayer.attachMedia（ビデオ）。
17          myPlayer.on（Hls.Events.MANIFEST_PARSED、関数（）{
 18              video.play（）;
 19          }）。
20      } 他 { // 播放FLV流视频
21          VAR myPlayer = flvjs.createPlayer（{
 22              タイプ： 'FLV' 、
 23              URL：videoUrl
 24          }）;
25         myPlayer.attachMediaElement（ビデオ）。
26          myPlayer.load（）。
27          myPlayer.play（）。
28      }
 29 }

　　HLSはhls.min.jsを必要とし、FLVはflv.min.jsを必要とする、これは、オンラインでダウンロードする必要があります。

　　また、CSSコードが比較的長い私は貼り付けられませんで、ビデオ-JS-cdn.cssと呼ばれるCSSファイルをCSSを設定する必要があります。

　　これが終了しました。