lj-zhgd-htweb/public/dz_video.html

211 lines
7.8 KiB
HTML
Raw Normal View History

2024-08-26 15:03:24 +08:00
<!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">
var video;
window.onVideoRealPlayLoad = function(suport, v) {
if (suport == false) return alert("不支持该浏览器!");
video = v;
//this.init();
}
//初始化================================================================================================
function init() {
var videoIp = document.getElementById("videoIp").value;
var videoPort = parseInt(document.getElementById("videoPort").value);
var timeout = document.getElementById("timeout").value;
var user = document.getElementById("user").value;
var pwd = document.getElementById("pwd").value;
var row = parseInt(document.getElementById("row").value);
var col = parseInt(document.getElementById("col").value);
video.init({ip:videoIp, port:videoPort, user:user, pwd:pwd, timeout:timeout, row:row, col:col, toolbar:'top'/*top|bottom|false*/, onServerOpen:onServerOpen, onServerClose:onServerClose, onVideoClose:onVideoClose});
}
function onServerOpen(time) {
alert("第"+time+"次连接上视频服务器");
}
function onServerClose(time) {
alert("第"+time+"次断开视频服务器");
}
//视频================================================================================================
function onVideoClose(sim, chn) {
alert("视频关闭 SIM卡号:"+sim+" 通道号:"+chn);
}
function playVideo() {
var playTitle = document.getElementById("playTitle").value;
var playSim = document.getElementById("playSim").value;
var playChn = document.getElementById("playChn").value;
var playStream = 1;// 0-清晰(主码流); 1-流畅(子码流) 可不传该参数
var cloud = document.getElementById("cloud").checked;
var ret = video.playVideo(playTitle, playSim, playChn, playStream, cloud);
if (ret === 1) {
alert("成功播放");
} else if (ret === -1) {
alert("窗口播放满了,不播放");
} else if (ret === 0) {
alert("该设备通道已经有窗口在播放");
}
}
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="border:1px solid #D6D6D6;background:#F5F5F5;padding:5px;margin:5px;">
<span>视频服务器IP</span>
<input type="text" id="videoIp" value="8.142.156.35" style="width:100px;">
<span style="margin-left:5px;">端口</span>
<input type="text" id="videoPort" value="9988" style="width:30px;">
<span style="margin-left:5px;">未操作关闭(0不关闭)</span>
<input type="text" id="timeout" value="300" style="width:30px;">
<span></span>
<span style="margin-left:5px;">登录用户</span>
<input type="text" id="user" value="TSH" style="width:47px;">&nbsp;&nbsp;
<span style="margin-left:5px;">登录密码</span>
<input type="text" id="pwd" value="77804d2ba1922c33" style="width:120px;">&nbsp;&nbsp;
<button onclick="init()">初始化</button>
</div>
<div style="border:1px solid #D6D6D6;background:#F5F5F5;padding:5px;margin:-6px 5px 5px 5px;">
<span>设备SIM卡号</span>
<input type="text" id="playSim" value="19500000002" style="width:100px;">
<span style="margin-left:5px;">通道号</span>
<input type="text" id="playChn" value="1" style="width:30px;">
<span style="margin-left:5px;">标题</span>
<input type="text" id="playTitle" value="车辆A-通道B" style="margin-left:5px;width:95px;">
<span style="margin-left:5px;">云台</span>
<input type="checkbox" id="cloud" checked/>&nbsp;&nbsp;
<button type="button" onclick="playVideo()">播放视频</button>
<button type="button" onclick="closeVideo()">停止视频</button>
</div>
<div style="border:1px solid #D6D6D6;background:#F5F5F5;padding:5px;margin:-6px 5px 5px 5px;">
<span>设备SIM卡号</span>
<input type="text" id="sim" value="19500000002" style="width:100px;">
<span style="margin-left:5px;">通道号</span>
<input type="text" id="chn" value="2" style="width:30px;">&nbsp;
<button type="button" onclick="playTalk()">开始对讲</button>
<button type="button" onclick="closeTalk()">停止对讲</button>&nbsp;&nbsp;
<button type="button" onclick="playListen()">开始监听</button>
<button type="button" onclick="closeListen()">停止监听</button>
</div>
<div style="border:1px solid #D6D6D6;background:#F5F5F5;padding:5px;margin:-6px 5px 5px 5px;">
<span>工具栏</span>
<button type="button" onclick="toolbar('top')"></button>
<button type="button" onclick="toolbar('bottom')" style="margin-left:-5px;"></button>
<button type="button" onclick="toolbar(false)" style="margin-left:-5px;"></button>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" id="row" value="3" style="width:15px;">
<input type="text" id="col" value="3" style="width:15px;">
<button type="button" onclick="regrid()">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button onclick="closeAll()" >关闭所有视频/对讲/监听</button>&nbsp;&nbsp;
<button onclick="destroy()">离开页面销毁</button>
</div>
<div style="width:calc(100% - 10px);height:calc(100% - 147px);position:absolute;left:5px;top:142px;">
<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>