206 lines
5.8 KiB
HTML
206 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
|
||
<style type="text/css">
|
||
html,
|
||
body {
|
||
overflow: hidden;
|
||
height: 100%;
|
||
width: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
button {
|
||
font-size: 12px;
|
||
color: #232323;
|
||
}
|
||
</style>
|
||
|
||
<link href="css/chunk-common.css" rel="stylesheet">
|
||
|
||
<script type="text/javascript">
|
||
let devCode = null;
|
||
// 接受父页面传递的参数
|
||
window.addEventListener('message', function (event) {
|
||
const params = event.data;
|
||
console.error(params);
|
||
// 获取到设备编码并进行处理
|
||
devCode = params.devCode;
|
||
this.init();
|
||
}, false);
|
||
// 视频参数
|
||
const videoParam = {
|
||
'videoIp': '8.142.156.35',
|
||
'videoPort': 9988,
|
||
'timeout': 0,
|
||
'user': 'TSH',
|
||
'pwd': '77804d2ba1922c33',
|
||
'row': 2,
|
||
'col': 2,
|
||
};
|
||
var video;
|
||
window.onVideoRealPlayLoad = function (suport, v) {
|
||
if (suport == false) return alert("不支持该浏览器！");
|
||
video = v;
|
||
// 设置播放窗口为 2 * 2
|
||
video.regrid(2, 2);
|
||
toolbar(false);
|
||
}
|
||
|
||
//初始化================================================================================================
|
||
|
||
async function init() {
|
||
var videoIp = videoParam.videoIp;
|
||
var videoPort = videoParam.videoPort;
|
||
var timeout = videoParam.timeout;
|
||
var user = videoParam.user;
|
||
var pwd = videoParam.pwd;
|
||
var row = videoParam.row;
|
||
var col = videoParam.col;
|
||
video.init({ ip: videoIp, port: videoPort, user: user, pwd: pwd, timeout: timeout, row: row, col: col, toolbar: false, onServerOpen: onServerOpen, onServerClose: onServerClose, onVideoClose: onVideoClose });
|
||
setTimeout(() => {
|
||
loopPlayVideo();
|
||
}, 1500);
|
||
}
|
||
|
||
/* 循环播放视频 */
|
||
async function loopPlayVideo() {
|
||
for (let index = 1; index <= 4; index++) {
|
||
let obj = {
|
||
playTitle: "通道" + index,
|
||
playSim: devCode,
|
||
playChn: index,
|
||
}
|
||
await playVideo(obj);
|
||
}
|
||
}
|
||
|
||
function onServerOpen(time) {
|
||
// alert("第" + time + "次连接上视频服务器");
|
||
}
|
||
|
||
function onServerClose(time) {
|
||
// alert("第" + time + "次断开视频服务器");
|
||
}
|
||
|
||
//视频================================================================================================
|
||
|
||
function onVideoClose(sim, chn) {
|
||
console.log("视频关闭 SIM卡号:" + sim + " 通道号:" + chn);
|
||
}
|
||
|
||
async function playVideo(obj) {
|
||
return new Promise((resolve, reject) => {
|
||
setTimeout(() => {
|
||
var playTitle = obj.playTitle;
|
||
var playSim = obj.playSim;
|
||
var playChn = obj.playChn;
|
||
var playStream = 1;// 0-清晰(主码流); 1-流畅(子码流) 可不传该参数
|
||
var cloud = true;
|
||
var ret = video.playVideo(playTitle, playSim, playChn, playStream, cloud);
|
||
if (ret === 1) {
|
||
console.error(playSim + '-' + playChn + '成功播放');
|
||
resolve(true);
|
||
} else if (ret === -1) {
|
||
alert("窗口播放满了,不播放");
|
||
reject(false);
|
||
} else if (ret === 0) {
|
||
alert("该设备通道已经有窗口在播放");
|
||
reject(false);
|
||
}
|
||
}, 1000);
|
||
});
|
||
}
|
||
|
||
function closeVideo() {
|
||
var playSim = document.getElementById("playSim").value;
|
||
var playChn = document.getElementById("playChn").value;
|
||
video.closeVideo(playSim, playChn);
|
||
}
|
||
|
||
//对讲================================================================================================
|
||
|
||
function playTalk() {
|
||
var sim = document.getElementById("sim").value;
|
||
var chn = document.getElementById("chn").value;
|
||
video.playTalk(sim, chn, onTalkResult, onTalkClose);
|
||
}
|
||
|
||
function onTalkResult(state, sim, chn, tip) {
|
||
if (state === 0) return alert("设备请求失败 SIM卡号:" + sim + " 通道号:" + chn + " 原因:" + tip);
|
||
if (state === 1) return alert("对讲成功 SIM卡号:" + sim + " 通道号:" + chn);
|
||
if (state === 2) return alert("设备请求成功，但获取不到麦克风！ SIM卡号:" + sim + " 通道号:" + chn + " 原因:" + tip);
|
||
}
|
||
|
||
function onTalkClose(sim, chn) {
|
||
alert("对讲关闭 SIM卡号:" + sim + " 通道号:" + chn);
|
||
}
|
||
|
||
function closeTalk() {
|
||
video.closeTalk();
|
||
}
|
||
|
||
//监听================================================================================================
|
||
|
||
function playListen() {
|
||
var sim = document.getElementById("sim").value;
|
||
var chn = document.getElementById("chn").value;
|
||
video.playListen(sim, chn, onListenResult, onListenClose);
|
||
}
|
||
|
||
function onListenResult(state, sim, chn, tip) {
|
||
if (state === 0) return alert("设备监听失败 SIM卡号:" + sim + " 通道号:" + chn + " 原因:" + tip);
|
||
if (state === 1) return alert("监听成功 SIM卡号:" + sim + " 通道号:" + chn);
|
||
}
|
||
|
||
function onListenClose(sim, chn) {
|
||
alert("监听关闭 SIM卡号:" + sim + " 通道号:" + chn);
|
||
}
|
||
|
||
function closeListen() {
|
||
video.closeListen();
|
||
}
|
||
|
||
//布局================================================================================================
|
||
|
||
function regrid() {
|
||
var row = document.getElementById("row").value;
|
||
var col = document.getElementById("col").value;
|
||
video.regrid(parseInt(row), parseInt(col));
|
||
}
|
||
|
||
//关闭全部================================================================================================
|
||
|
||
function closeAll() {
|
||
video.closeAll();
|
||
}
|
||
|
||
//销毁全部================================================================================================
|
||
|
||
function destroy() {
|
||
video.destroy();
|
||
video = null;
|
||
}
|
||
|
||
function toolbar(v) {
|
||
video && (video.toolbar = v);
|
||
}
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
<div style="width:calc(100% - 10px);height:calc(100% - 50px);position:absolute;left:5px;top:40px;">
|
||
<div id="VideoRealPlay"></div>
|
||
</div>
|
||
<script src="js/chunk-vendors.js"></script>
|
||
<script src="js/chunk-common.js"></script>
|
||
<script src="js/VideoRealPlay.js"></script>
|
||
|
||
</body>
|
||
|
||
</html> |