foreword
Before, I introduced the function of playing Shiyun surveillance video stream (ezopen) instead of Universal?Media?PlayerUMP. The function of iframe is to open the playing webpage provided by Shiyun. The functions are basically only image quality switching, sound switching, etc.; you can check the details step by step (https://blog.csdn.net/qq_33789001/article/details/132025298). The function of this article is still based on the 3D WebView for Windows and macOS (Web Browser)? plug-in, using the EZUIKit plug-in to realize the pan-tilt control (device that supports the pan-tilt) function.
Effect
WebGL support:
PTZ support:
function realization
Plugins used by the author:
LitJson is used to generate/parse json for network requests.
DOTweenPro is used to make simple window pop-up and close animations;
3D WebView for Windows and macOS (Web Browser) is used to open web pages (instructions for use (https://blog.csdn.net/qq_33789001/article/details/126180804)) Plug-ins (Embedded Browser can also be used depending on the requirements), and the 2D WebView for WebGL (Web Browser IFrame) plug-in is required for the WebGL platform.
Obtain the accessToken, the administrator account obtains the accessToken according to the appKey and secret; the basic functions such as obtaining the surveillance video stream will not be described again, you can refer to the article in the preface.
Here's how to open a local webpage:
string url = "streaming-assets://CamLocalWebPlay/WebPlayCamVideo.html?url=" + path + "&token=" + YsAccessTokenMgr.instance.AT;
canvasWebView.WebView.LoadUrl(url);
streaming-assets:// indicates that the path of the file is under the StreamingAssets folder of Unity3d.
Method one local iframe
Video embedded playback method, please refer to https://open.ys7.com/bbs/article/20 for details. So it is a local web page, here I will paste the code first:
<!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>
Here, the parameters of iframe_se are generated according to the input url and token, and it can be played normally.
Method 1 Local EZUIKit
The EZUIKit plug-in is an official plug-in, which reduces the difficulty of access, adapts to custom UI, and adapts to mainstream frameworks; low-latency preview, cloud storage playback, and SD card playback. Rich function APIs, such as: playback control, audio control, video screenshot, real-time video OSDTime acquisition, video recording, device intercom, electronic zoom, full screen, etc.
Its usage is also relatively simple:
create DOM
<div id="video-container"></div>
Live broadcast
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,
})
playback play
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'
})
To use it, you need to git the code warehouse first, and put the EZUIKit-JavaScript-npm/demos/base-demo/ezuikit_static/ folder into the function
Import script:
<script src="./ezuikit.js"></script>
Write a very simple web page with only one element
<div id="video-container"></div>
And initialize it through the EZUIKit.EZUIKitPlayer function:
var player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
url: 'ezopen://open.ys7.com/203751922/1.live',
})
The key here is to pass in the values of url and accessToken, which have been obtained through EZVIZ’s background before.
Templates can be set:
Template // simple - minimalist version; standard-standard version; security - security version (preview playback); voice-voice version;
theme-configurable theme;
After the author tried it, I found that only the standard-standard version and theme-configurable themes are valid, and the others are white screen effects.
standard-Standard Edition:
theme - configurable theme:
Click the PTZ control button to bring up the control panel of the PTZ:
You can also customize buttons to control playback:
End playback: player.stop() Turn on sound: player.openSound()
Close sound: player.closeSound()
Start recording: player.startSave()
End recording: player.stopSave()
Video capture: player.capturePicture()
Full screen ( Automatically adapt to the full screen of the mobile terminal and PC terminal): player.fullScreen()
Cancel full screen: player.cancelFullScreen()
Get playback time Callback: player.getOSDTime()
Start intercom: player.startTalk()
End intercom: player.stopTalk( )
Project source code
Complete project source code: https://download.csdn.net/download/qq_33789001/88135255
Cannot be opened, indicating that the audit has not passed.
Now after the project, open the Main.unity scene in the project, select the FunNodes>YsAccessTokenMgr node to set your own appKey and appSecret:
Select Icon_Camera to modify the information deviceSerial and channelNo of the video tag:
Ensure that the information is under the same account. After running, click the video icon to see the playback effect.