文章目录
法一:使用ezuikit-js插件(accessToken+url)
适用情况：
1. 安装
npm install ezuikit-js --save
2. 使用:
<template>
<div id="video-container"></div>
</template>
<script>
import EZUIKit from 'ezuikit-js';
export default {
name: '',
data() {
return {
player:null,
}
},
created(){
this.getVideoData()
},
methods:{
getVideoData(){
....
this.player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
url: 'ezopen://open.ys7.com/203751922/1.live',
audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
autoplay: true,
width: 408,
height: 237
})
},
},
beforeDestroy() {
this.player && this.player.stop() //销毁并停止直播视频
}
}
</script>
3.初始化时可传参数:
| 参数名 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| id | String | 播放器容器DOM的id | Y |
| accessToken | String | 授权过程获取的access_token | Y |
| url | String | 视频ezopen协议播放地址 | Y |
| audio | int | 是否默认开启声音 1：打开（默认） 0：关闭 | N |
| width | int | 视频宽度，默认值为容器容器DOM宽度 | N |
| height | int | 视频高度，默认值为容器容器DOM高度 | N |
| templete | string | 播放器模板，可以通过选定模板，使用内置的播放器样式，组件 simple：极简版;standard：标准版;security：安防版(预览回放);vioce：语音版 | N |
| header | Array | 视频头部可选UI组件，可选值：capturePicture：截图,save：录像保存,zoom：电子放大 | N |
| footer | Array | 视频底部部可选UI组件，可选值：talk：对讲,broadcast：语音播报,hd：高清标清切换,fullScreen：全屏 | N |
| plugin | Array | 按需加载插件，可选值： talk：对讲 | N |
| handleSuccess | function | 播放成功回调 | N |
| handleError | function | 播放错误回调 | N |
| openSoundCallBack | function | 开启声音回调 | N |
| closeSoundCallBack | function | 关闭回调 | N |
| startSaveCallBack | function | 开始录像回调 | N |
| stopSaveCallBack | function | 结束录像回调 | N |
| capturePictureCallBack | function | 截图回调 | N |
| fullScreenCallBack | function | 全屏回调 | N |
| getOSDTimeCallBack | function | 获取OSD时间回调 | N |
4.可调用的方法:
| 方法名 | 类型 | 描述 | 使用示例 |
|---|---|---|---|
| play | function | 开始播放 | player.play() |
| stop | function | 结束播放 | player.stop() |
| openSound | String | 开启声音 | player.openSound() |
| closeSound | String | 关闭声音 | player.closeSound() |
| startSave | int | 开始录像 | player.startSave() |
| stopSave | int | 结束录像 | player.stopSave() |
| capturePicture | function | 视频截图 | player.capturePicture() |
| fullScreen | function | 全屏 | player.fullScreen() |
| getOSDTime | function | 获取播放时间回调 | player.getOSDTime() |
| startTalk | function | 开始对讲 | player.startTalk() |
| stopTalk | function | 结束对讲 | player.stopTalk() |
5.萤石云:
6.最终效果:
法二:使用ezuikit.js文件(链接)
优点：不需要做控件按钮功能
适用情况：
1、官网下载js包
资源地址:https://download.csdn.net/download/weixin_53791978/86512096
2、（把下载好的ezuikit.js js包）放进vue 的 static 下
这里报错ezuikit is not undefined,就放到public下
3、public在index.html引入
<script src="static/ezuikit.js"></script>
4、使用:
<video id="videoCamera"
style="object-fit: fill; width: 100%; height: 100%; background: #000;"
:src="formData.videoCamera" autoplay="true" controls playsInline webkit-playsinline>
</video> //记得给宽高
<script>
export default{
data(){
return{
formData:{
},
palyer:null,// 页面跳转时注意关闭视频流，vue跳转原有任务不会停止或者在beforeDestroy销毁掉
}
},
mounted(){
},
methods:{
//获取播放地址
getVideoCameraAddr(id, index) {
const This = this
let param = {
id: id
}
videoCameraAddr(param).then(res => {
if (res.data.code == 0) {
This.formData.videoCamera = res.data.data
This.palyer = null
setTimeout(function () {
This.player = new EZUIKit.EZUIPlayer('videoCamera')
}, 0)
} else {
This.$message.error('获取视频监控摄相机播放地址失败' + res.data.msg)
}
})
},
},
beforeDestroy(){
this.palyer = null
}
}
</script>
法三:后端只给设备号
相关JS文件：https://download.csdn.net/download/weixin_53791978/87231692
<section class="sectionVideo">
<div class="video_warp_item" v-for="(item, index) in liveAddress" :key="index">
<video :id=item.tdh :src="item.url" autoplay muted controls playsInline webkit-playsinline></video>
</div>
</section>
<script>
import {
videoCameraId } from '@/api/manage/videoAPI.js'
import $ from 'jquery' // npm i jquery
export default {
name: 'dashboard',
data() {
return {
accessToken: '',
liveAddress: [],
diveType: '',
players: [],
}
},
methods: {
// 获取磅点摄像头ID列表
getbagndianID() {
const This = this
// 获取萤石云的accessToken
$.ajax({
"url": 'https://open.ys7.com/api/lapp/token/get',
"type": 'POST',
"dataType": "json",
"data": {
appKey: '412f919adde14fe3af396d5bef2c6db1', //String appKey Y
appSecret: '7566546bfc7adc4f55b86af93703599c' // String appSecret Y
},
"cache": false,
"success": function (response) {
This.accessToken = response.data.accessToken;
}
})
let param = {
deptId: This.formData.deptId,
stationId: This.formData.stationId,
pageNum: "1", // string true 当前页数
pageSize: "100", // string true 每页条数
}
videoCameraId(param).then(res => {
if (res.success) {
// 根据列表长度获取播放地址
if (res.result.list.length <= 0) {
This.$message.error('暂无数据,磅点摄相机列表为空' + res.data.msg)
} else {
res.result.list.forEach((item, index) => {
this.getDeviceInfo(item.id, index, item.deviceNumber, This.accessToken);
})
}
} else {
This.$message.error('获取视频监控摄相机ID列表失败' + res.data.msg)
}
})
},
// 查询设备类型
getDeviceInfo(id, indexer, deviceNum, accessToken) {
const that = this
$.ajax({
"url": 'https://open.ys7.com/api/lapp/device/info',
"header": {
'Content-Type': 'application/x-www-form-urlencoded'
},
"type": 'POST',
"dataType": "json",
"data": {
accessToken: accessToken, // String 授权过程获取的access_token Y
deviceSerial: deviceNum, // G66585615 J29276929
},
"success": function (res) {
if (res.code == 200) {
if (res.data.model.indexOf('IPC') >= 0) {
//摄像机
this.diveType = 1;
that.liveAddress = []
this.getUrl(accessToken, deviceNum, 1);
setTimeout(() => {
if (that.liveAddress.length > 0) {
that.players = [];
that.liveAddress.forEach((item, i) => {
let player = new EZUIKit.EZUIPlayer(item.tdh)
that.players.push(player);
})
}
}, 500)
} else {
//录像机
this.diveType = 2;
let tdS = [];
// 获取设备通道号
$.ajax({
"url": 'https://open.ys7.com/api/lapp/device/camera/list',
"header": {
'Content-Type': 'application/x-www-form-urlencoded' //multipart/form-data text/plain
},
"type": 'POST',
"dataType": "json",
"data": {
accessToken: accessToken, // String 授权过程获取的access_token Y
deviceSerial: deviceNum
},
"success": function (response) {
response.data.forEach((item) => {
if (item.status == 1) {
tdS.push(item) }
})
that.liveAddress = []
tdS.forEach((item) => {
that.getUrl(accessToken, deviceNum, item.channelNo);
})
setTimeout(() => {
if (that.liveAddress.length > 0) {
that.players = [];
that.liveAddress.forEach((item, i) => {
let player = new EZUIKit.EZUIPlayer(item.tdh)
that.players.push(player);
})
}
}, 500)
}
})
}
}
},
});
},
// 获取视频播放地址
getUrl(accessToken, id, typeId) {
const that = this
$.ajax({
"url": 'https://open.ys7.com/api/lapp/v2/live/address/get',
"type": 'POST',
"data": {
accessToken: accessToken, // String 授权过程获取的access_token Y
deviceSerial: id,
protocol: 2,
channelNo: typeId,
},
"dataType": "json",
"success": function (res) {
let item = {
tdh: 'm' + res.data.id,
url: res.data.url
}
that.liveAddress.push(item)
}
})
},
},
//销毁视频
destroyed() {
for (var j = 0; j < this.players.length; j++) {
this.players[j].stop();
}
}
}
</script>