序文
以前、Universal?Media?PlayerUMPの代わりにShiyun監視ビデオストリームを再生する機能(ezopen)を紹介しましたが、iframeの機能はShiyunが提供する再生Webページを開く機能で、基本的には画質切り替え、音声切り替えなどの機能のみです。 .; 詳細を段階的に確認できます (https://blog.csdn.net/qq_33789001/article/details/132025298)。この記事の機能は、引き続き Windows および macOS の 3D WebView (Web Browser)? プラグインをベースにしており、EZUIKit プラグインを使用してパンチルト コントロール (パンチルトをサポートするデバイス) 機能を実現しています。
効果
WebGL のサポート:
PTZ サポート:
機能実現
作者が使用したプラグイン:
LitJson は、ネットワーク リクエストの json を生成/解析するために使用されます。
DOTweenPro は、単純なウィンドウのポップアップと閉じるアニメーションを作成するために使用されます。Windows
および macOS 用の 3D WebView (Web ブラウザー) は、Web ページを開くために使用されます (使用説明書 (https://blog.csdn.net/qq_33789001/article/details) /126180804)) プラグイン (要件に応じて埋め込みブラウザも使用可能)、WebGL プラットフォームには 2D WebView for WebGL (Web Browser IFrame) プラグインが必要です。
accessToken を取得します。管理者アカウントは、appKey とシークレットに従って accessToken を取得します。監視ビデオ ストリームの取得などの基本的な機能については、再度説明しません。序文の記事を参照してください。
ローカル Web ページを開く方法は次のとおりです。
string url = "streaming-assets://CamLocalWebPlay/WebPlayCamVideo.html?url=" + path + "&token=" + YsAccessTokenMgr.instance.AT;
canvasWebView.WebView.LoadUrl(url);
stream-assets:// は、ファイルのパスが Unity3d の StreamingAssets フォルダーの下にあることを示します。
メソッド 1 のローカル iframe
動画埋め込み再生方法、詳しくはhttps://open.ys7.com/bbs/article/20をご参照ください。これはローカル Web ページなので、最初にコードを貼り付けます。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>本地网页监控播放</title>
<style>
html, body, iframe {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
height: 100%;
}
iframe {
border: none;
}
</style>
<body onload="document.documentElement.webkitRequestFullScreen();">
<div id="wrap">
<iframe id="videoframe">
</iframe>
</div>
<script>
function getUrlParam(key) {
const search = window.location.search.substring(1);
const paramsArray = search.split("&");
let value = null;
paramsArray.forEach((param) => {
const [paramKey, paramValue] = param.split("=");
if (key === paramKey) {
value = paramValue;
}
});
return value;
}
var iframe = document.getElementById("videoframe");
iframe.src = "https://open.ys7.com/ezopen/h5/iframe_se?url=" + getUrlParam("url")
+ "&autoplay=1&audio=0&accessToken=" + getUrlParam("token") ;
</script>
</body>
</html>
ここでは、入力されたURLとトークンに応じてiframe_seのパラメータが生成され、正常に再生できるようになります。
方法 1 ローカル EZUIKit
EZUIKit プラグインは、アクセスの難しさを軽減し、カスタム UI に適応し、主流のフレームワーク (低遅延プレビュー、クラウド ストレージ再生、SD カード再生) に適応する公式プラグインです。再生制御、オーディオ制御、ビデオスクリーンショット、リアルタイムビデオOSDTime取得、ビデオ録画、デバイスインターコム、電子ズーム、フルスクリーンなどの豊富な機能API。
使い方も比較的簡単です:
DOM を作成します。
<div id="video-container"></div>
ライブブロードキャスト
var player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
url: 'ezopen://open.ys7.com/G39444019/1.live',
width: 600,
height: 400,
})
再生 再生
var player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
width: 600,
height: 400,
accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
url: 'ezopen://open.ys7.com/G39444019/1.rec'
})
これを使用するには、まずコード ウェアハウスを git し、EZUIKit-JavaScript-npm/demos/base-demo/ezuikit_static/ フォルダーを関数インポート スクリプトに配置する必要があります
。
<script src="./ezuikit.js"></script>
要素が 1 つだけある非常に単純な Web ページを作成する
<div id="video-container"></div>
そして、EZUIKit.EZUIKitPlayer 関数を使用して初期化します。
var player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
url: 'ezopen://open.ys7.com/203751922/1.live',
})
ここで重要なのは、以前に EZVIZ のバックグラウンドを通じて取得した URL と accessToken の値を渡すことです。
テンプレートは次のように設定できます。
テンプレート // シンプル - ミニマリスト バージョン; 標準 - 標準バージョン; セキュリティ - セキュリティ バージョン (プレビュー再生); 音声 - 音声バージョン; テーマ
- 設定可能なテーマ;
筆者が試してみたところ、有効となるのは標準版とテーマ設定可能なテーマのみで、それ以外は白い画面効果であることが分かった。
標準-標準エディション:
テーマ - 構成可能なテーマ:
PTZ コントロール ボタンをクリックして、PTZ のコントロール パネルを表示します。
ボタンをカスタマイズして再生を制御することもできます。
再生終了: player.stop() サウンドをオンにする: player.openSound()
サウンドを閉じる: player.closeSound()
録音開始: player.startSave()
録音終了: player.stopSave()
ビデオキャプチャ: player.capturePicture()
Full画面（モバイル端末とPC端末の全画面に自動適応）：player.fullScreen()
全画面解除：player.cancelFullScreen()
再生時間取得 Callback：player.getOSDTime()
インターコム開始：player.startTalk()
終了インターコム: player.stopTalk( )
プロジェクトのソースコード
完全なプロジェクトのソース コード: https://download.csdn.net/download/qq_33789001/88135255
監査に合格していないため、開くことができません。
プロジェクトの後で、プロジェクトの Main.unity シーンを開き、FunNodes>YsAccessTokenMgr ノードを選択して独自の appKey と appSecret を設定します。
Icon_Camera を選択して、ビデオ タグの deviceSerial と channelNo の情報を変更します。
情報が同じアカウントにあることを確認してください。実行後、ビデオ アイコンをクリックして再生効果を確認してください。