236 lines
8.0 KiB
HTML
236 lines
8.0 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">
|
||
|
||
var video;
|
||
window.onVideoRealPlayLoad = function(suport, v) {
|
||
if (suport == false) return console.log("不支持该浏览器！");
|
||
video = v;
|
||
//this.init();
|
||
}
|
||
function getUrlParams() {
|
||
const params = {};
|
||
const url = window.location.href;
|
||
const urlObj = new URL(url);
|
||
for (const [key, value] of urlObj.searchParams.entries()) {
|
||
params[key] = value;
|
||
}
|
||
return params;
|
||
}
|
||
// 使用方法
|
||
const params = getUrlParams();
|
||
console.log(params);
|
||
setTimeout(()=>{ init() },200)
|
||
|
||
|
||
//初始化================================================================================================
|
||
|
||
function init() {
|
||
var videoIp = '8.142.156.35';
|
||
var videoPort = '9988';
|
||
var timeout = '300';
|
||
var user = 'TSH';
|
||
var pwd = "77804d2ba1922c33";
|
||
var row = "2";
|
||
var col = "2";
|
||
video.init({ip:videoIp, port:videoPort, user:user, pwd:pwd, timeout:timeout, row:row, col:col, toolbar:false/*top|bottom|false*/, onServerOpen:onServerOpen, onServerClose:onServerClose, onVideoClose:onVideoClose});
|
||
|
||
setTimeout(()=>{ loadVidep() },800)
|
||
}
|
||
|
||
function onServerOpen(time) {
|
||
console.log("第"+time+"次连接上视频服务器");
|
||
}
|
||
|
||
function onServerClose(time) {
|
||
console.log("第"+time+"次断开视频服务器");
|
||
}
|
||
|
||
//视频================================================================================================
|
||
|
||
function onVideoClose(sim, chn) {
|
||
console.log("视频关闭 SIM卡号:"+sim+" 通道号:"+chn);
|
||
}
|
||
|
||
async function loadVidep() {
|
||
for (let index = 1; index <= 4; index++) {
|
||
let obj = {
|
||
playTitle: "通道" + index,
|
||
playSim: params.devCode,
|
||
playChn: index,
|
||
}
|
||
await playVideo(obj);
|
||
}
|
||
}
|
||
|
||
function playVideo(obj) {
|
||
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.log("成功播放");
|
||
} else if (ret === -1) {
|
||
console.log("窗口播放满了,不播放");
|
||
} else if (ret === 0) {
|
||
console.log("该设备通道已经有窗口在播放");
|
||
}
|
||
}
|
||
|
||
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 console.log("设备请求失败 SIM卡号:"+sim+" 通道号:"+chn+" 原因:"+tip);
|
||
if (state === 1) return console.log("对讲成功 SIM卡号:"+sim+" 通道号:"+chn);
|
||
if (state === 2) return console.log("设备请求成功，但获取不到麦克风！ SIM卡号:"+sim+" 通道号:"+chn+" 原因:"+tip);
|
||
}
|
||
|
||
function onTalkClose(sim, chn) {
|
||
console.log("对讲关闭 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 console.log("设备监听失败 SIM卡号:"+sim+" 通道号:"+chn+" 原因:"+tip);
|
||
if (state === 1) return console.log("监听成功 SIM卡号:"+sim+" 通道号:"+chn);
|
||
}
|
||
|
||
function onListenClose(sim, chn) {
|
||
console.log("监听关闭 SIM卡号:"+sim+" 通道号:"+chn);
|
||
}
|
||
|
||
function closeListen() {
|
||
video.closeListen();
|
||
}
|
||
|
||
//布局================================================================================================
|
||
|
||
function regrid() {
|
||
var row = 2;
|
||
var col = 2;
|
||
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>视频服务器IP1</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;">
|
||
<span style="margin-left:5px;">登录密码</span>
|
||
<input type="text" id="pwd" value="77804d2ba1922c33" style="width:120px;">
|
||
<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/>
|
||
<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="13100000007" style="width:100px;">
|
||
<span style="margin-left:5px;">通道号</span>
|
||
<input type="text" id="chn" value="33" style="width:30px;">
|
||
<button type="button" onclick="playTalk()">开始对讲</button>
|
||
<button type="button" onclick="closeTalk()">停止对讲</button>
|
||
<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>
|
||
<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>
|
||
<button onclick="closeAll()" >关闭所有视频/对讲/监听</button>
|
||
<button onclick="destroy()">离开页面销毁</button>
|
||
</div> -->
|
||
|
||
<div style="width:calc(100%);height:calc(100%);position:absolute;left:4px;top:4px;">
|
||
<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>
|