lj-zhgd-htweb/public/dz_video.html

206 lines
5.8 KiB
HTML
Raw Normal View History

2024-08-26 15:03:24 +08:00
<!DOCTYPE html>
<html lang="en">
2024-08-27 08:55:35 +08:00
2024-08-26 15:03:24 +08:00
<head>
2024-08-27 08:55:35 +08:00
<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);
2024-08-27 10:43:46 +08:00
toolbar(false);
2024-08-27 08:55:35 +08:00
}
//初始化================================================================================================
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;
2024-08-27 10:43:46 +08:00
video.init({ ip: videoIp, port: videoPort, user: user, pwd: pwd, timeout: timeout, row: row, col: col, toolbar: false, onServerOpen: onServerOpen, onServerClose: onServerClose, onVideoClose: onVideoClose });
2024-08-27 08:55:35 +08:00
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) {
2024-09-29 15:36:20 +08:00
// alert("第" + time + "次连接上视频服务器");
2024-08-27 08:55:35 +08:00
}
function onServerClose(time) {
2024-09-29 15:36:20 +08:00
// alert("第" + time + "次断开视频服务器");
2024-08-27 08:55:35 +08:00
}
//视频================================================================================================
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>
2024-08-26 15:03:24 +08:00
</head>
2024-08-27 08:55:35 +08:00
<body>
<div style="width:calc(100% - 10px);height:calc(100% - 50px);position:absolute;left:5px;top:40px;">
2024-08-26 15:03:24 +08:00
<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>
2024-08-27 08:55:35 +08:00
2024-08-26 15:03:24 +08:00
</body>
2024-08-27 08:55:35 +08:00
</html>