效果图：
1、在大屏上的效果：
页面嵌入实时视频，可通过点击下面的按钮实现，摄像头拉进，缩小，上下左右等旋转动作
image.png
2、双击视频时候全屏的放大效果：
image.png
步骤：
一、在要嵌入监控的vue页面中，用iframe引入：
image.png
vedio的目录结构：整个demo文件都要导入项目中，可以看到在ysyDemo下面还有几个js文件和一些样式，
我们需要修改的就是，在vedio里面接入视频地址，修改按钮样式就行
image.png
二、vedio.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>球机示例模板</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" href="layuiadmin/layui/font/font_2wmcsfamra2/iconfont.css">
<link href="mui.min.css" rel="stylesheet">
<script src="js/mui.min.js"></script>
<script src="js/ezuikit.js"></script>
</head>
<style>
.layui-text-bottom {
height: 25px;
}
.layui-text-bottom button {
height: 100%;
width: 67px;
line-height: 10px
}
.content {
position: relative;
overflow: hidden;
}
.front {
width: 100%;
height: 100%;
position: absolute;
background-color: transparent;
top: 0px;
left: 0;
cursor: pointer;
}
.btns {
position: absolute !important;
right: 0;
bottom: 2px;
width: 100%;
height: 20px;
/* overflow: hidden; */
background: rgb(1, 26, 32, 0.3);
}
.btns button {
padding: 0;
border: none;
height: 17px;
width: 11px;
position: absolute;
background-color: transparent;
}
/* 右 */
.btns button:nth-of-type(4) {
left: 94px;
top: 4px;
width: 16px;
height: 16px;
background: url('./videoCtrl/jiantou-right.png') 0 0 no-repeat / 100% 100%;
}
/* 左 */
.btns button:nth-of-type(3) {
left: 80px;
top: 4px;
width: 16px;
height: 16px;
background: url('./videoCtrl/jiantou-left.png') 0 0 no-repeat / 100% 100%;
}
/* 下 */
.btns button:nth-of-type(2) {
left: 67px;
top: 4px;
width: 16px;
height: 16px;
background: url('./videoCtrl/jiantou-down.png') 0 0 no-repeat / 100% 100%;
}
/* 上 */
.btns button:nth-of-type(1) {
left: 54px;
top: 4px;
width: 16px;
height: 16px;
background: url('./videoCtrl/jiantou-up.png') 0 0 no-repeat / 100% 100%;
}
.btns button:nth-of-type(5) {
width: 16px;
height: 16px;
left: 33px;
top: 4px;
background: url('./videoCtrl/plus.png') 0 0 no-repeat / 100% 100%;
}
.btns button:nth-of-type(6) {
width: 16px;
height: 16px;
left: 18px;
top: 4px;
background: url('./videoCtrl/minus.png') 0 0 no-repeat / 100% 100%;
}
.btns button:nth-of-type(7) {
/* 左上*/
width: 16px;
height: 16px;
left: 112px;
top: 4px;
background: url('./videoCtrl/left-up.png') 0 0 no-repeat / 100% 100%;
}
.btns button:nth-of-type(8) {
/* 左下 */
width: 16px;
height: 16px;
left: 125px;
top: 4px;
background: url('./videoCtrl/left-down.png') 0 0 no-repeat / 100% 100%;
}
.btns button:nth-of-type(9) {
/* 右上 */
width: 16px;
height: 16px;
left: 139px;
top: 4px;
background: url('./videoCtrl/right-up.png') 0 0 no-repeat / 100% 100%;
}
.btns button:nth-of-type(10) {
/* 右下*/
width: 16px;
height: 16px;
left: 152px;
top: 4px;
background: url('./videoCtrl/right-down.png') 0 0 no-repeat / 100% 100%;
}
/* 按钮內圆 */
.inner {
width: 56px;
height: 56px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
#myPlayer {
/* transform: scaleY(1.08); */
/* transform-origin: top; */
width: 100% !important;
height: 100% !important;
}
#myPlayer div,
canvas {
width: 100% !important;
height: 100% !important;
}
#chaoxian {
display: none
}
#chaoxian p {
font-size: 30px;
color: #000;
margin: 26px 26px;
}
body,
html {
width: 100%;
height: 100%;
}
</style>
<body>
<div style="width:100%;height:100%">
<!-- <div style="width: 210px;height:125px"> -->
<div style="width:100%;height:100%" id="fulldiv">
<div class="layuiadmin-card-text content" style="width:100%;height:100%;padding:0">
<div id="myPlayer" style="width:100%;height:100%">
</div>
<div class="front" ondblclick="fullSreen()">
<h2 id="chaoxian">
<p>9048,开放平台并发路数超限</p>
<p>请升级到VIP企业版</p>
</h2>
</div>
<div class="layui-text-bottom btns">
<div class="inner"></div>
<!-- 0~3:上下左右 -->
<button onmousedown="control(0)" onmouseup="stop(0)"></button>
<button onmousedown="control(1)" onmouseup="stop(1)"></button>
<button onmousedown="control(2)" onmouseup="stop(2)"></button>
<button onmousedown="control(3)" onmouseup="stop(3)"></button>
<!-- 8：放大 9：缩小 -->
<button onmousedown="control(8)" onmouseup="stop(8)"></button>
<button onmousedown="control(9)" onmouseup="stop(9)"></button>
<!-- 4-左上，5-左下，6-右上，7-右下 -->
<button onmousedown="control(4)" onmouseup="stop(4)"></button>
<button onmousedown="control(5)" onmouseup="stop(5)"></button>
<button onmousedown="control(6)" onmouseup="stop(6)"></button>
<button onmousedown="control(7)" onmouseup="stop(7)"></button>
</div>
</div>
</div>
</div>
<script src="layuiadmin/layui/layui.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// (function(){
var item = location.search
item = item.substr(1)
let data = {}
let arr = item.split("&")
arr.forEach((item1, index) => {
item1 = item1.split("=")
data[item1[0]] = item1[1]
})
data.deviceSerial ='你的设备序列号'
data.channelNo = '你的通道号'
// data.src = 'ezopen://open.ys7.com/' + data.deviceSerial + '/' + data.channelNo + '.hd.live'
data.src = 'ezopen://open.ys7.com/' + data.deviceSerial + '/' + data.channelNo + '.hd.live'
$(function() {
$.ajax({
type: "get",
url: '你获取token的后台地址',
async: true,
success: function(res) {
data.accessToken = res
},
error: function(res) {
console.log("请求失败")
}
});
})
setTimeout(() => {
// 异步 等ajax前面获取token成功后再加载下面代码
var decoder = new EZUIKit.EZUIPlayer({
id: 'myPlayer',
autoplay: true,
url: data.src,
accessToken: data.accessToken,
// decoderPath: '/static/html/ysyDemo/js', //decoderPath：${window.YOUR_PATH};请在生产模式输入ezuikit.js的绝对路径
decoderPath: '/static/ysyDemo/js', // 这里是ezuikit的文件路径，千万不能定位到完整文件夹
// width: 500,
// height: 441
width: 210,
height: 125
});
// 这里是打印日志，本例抛出到播放页面
decoder.on('log', log);
}, 500);
function log(str) {
if (str.indexOf('9048') >= 0) {
document.getElementById("chaoxian").style.display = "block"
document.getElementsByClassName("front")[0].style.backgroundColor = "#fff"
}
}
layui.config({
base: 'layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'sample']);
// data=item
var timer = 0 //用来计算鼠标按下到松开的时间
var no = null //定时器名字
//开始控制
var control = function(direction) {
no = setInterval(function() {
timer++
}, 100)
console.log('111')
data.direction = direction;
data.speed = '1';
layui.use(['jquery', 'layer'], function() {
var $ = layui.$,
layer = layui.layer;
$.post('https://open.ys7.com/api/lapp/device/ptz/start', data, function(res) {
if (res.code == 200) {
// console.log('开始')
// layer.msg(res.msg, {time: 2000});
} else {
layer.msg(res.msg, {
time: 2000
});
}
}, 'json');
return false;
});
}
//停止转动
var stop = function(direction) {
clearInterval(no)
if (timer <= 3) {
timer = 0
setTimeout(function() {
layui.use(['jquery', 'layer'], function() {
var $ = layui.$ //重点处
,
layer = layui.layer;
$.post('https://open.ys7.com/api/lapp/device/ptz/stop', data, function(res) {
if (res.code == 200) {
// layer.msg(res.msg, {time: 2000});
} else {
layer.msg(res.msg, {
time: 2000
});
}
}, 'json');
return false;
});
}, 500)
} else {
timer = 0
layui.use(['jquery', 'layer'], function() {
var $ = layui.$ //重点处
,
layer = layui.layer;
data.direction = direction;
$.post('https://open.ys7.com/api/lapp/device/ptz/stop', data, function(res) {
if (res.code == 200) {
// console.log('停止')
// layer.msg(res.msg, {time: 2000});
} else {
layer.msg(res.msg, {
time: 2000
});
}
}, 'json');
return false;
});
}
}
// 拿到要全屏显示的div
var fullDiv = document.getElementById("fulldiv")
var myPlayer = document.getElementById("myPlayer")
// 全屏
var fullSreen = function() {
// var myPlayerflashId = document.getElementsByName("myPlayerflashId")
if (isFullscreen()) {
exitFullscreen()
} else {
launchIntoFullscreen(fullDiv)
setTimeout(function() {
var canvas = document.getElementById("canvas0")
var canvas_draw0 = document.getElementById("canvas_draw0")
canvas.width = 1920
canvas.height = 1080
canvas_draw0.width = 1920
canvas_draw0.height = 1080
}, 100)
}
}
// 封装全屏的方法
function launchIntoFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 封装退出全屏的方法
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// 判断是否全屏状态
function isFullscreen() {
if (navigator.userAgent.indexOf("Firefox") != -1) {
return document.mozFullScreen;
} else if (navigator.userAgent.indexOf("Chrome") != -1) {
return document.webkitIsFullScreen;
}
return document.fullscreen;
}
// }())
</script>
</body>
</html>
当有的时候，在其他分辨率打开页面，会出现不能自适应（即会出现滚动条）的情况，上述代码中的一下一个地方就是控制实时视频iframe自适应的
image.png
网友评论