161 lines
4.1 KiB
Vue
161 lines
4.1 KiB
Vue
<template>
|
||
<custom-nav-bar :left="true" title="摄像头"></custom-nav-bar>
|
||
<view class="content">
|
||
<view :item="item" :change:item="ezuikit.loadItem"></view>
|
||
<view class="preview" id="video-container" ></view>
|
||
<view>
|
||
<button @click="ezuikit.handlePlay">播放</button>
|
||
<button @click="ezuikit.LookBack">回看</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
item: {}
|
||
}
|
||
},
|
||
onLoad(option){
|
||
if(option.item){
|
||
this.item = JSON.parse(decodeURIComponent(option.item));
|
||
}
|
||
},
|
||
methods: {
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<script module="ezuikit" lang="renderjs">
|
||
var accessToken=null;
|
||
var ezopenUrl1=null;
|
||
var ezopenUrl2=null;
|
||
var outDeviceCode=null;
|
||
var player = null;
|
||
export default {
|
||
onUnload(){
|
||
try{
|
||
this.stop();
|
||
}catch{
|
||
}
|
||
},
|
||
mounted() {
|
||
console.log('mounted...');
|
||
if (typeof window.EZUIKit !== 'undefined') {
|
||
console.log('defined EZUIKit...');
|
||
this.initPlayer();
|
||
} else {
|
||
console.log('undefined EZUIKit...');
|
||
// 动态引入较大类库避免影响页面展示
|
||
const script = document.createElement('script')
|
||
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
|
||
script.src = 'static/ezuikit.js'
|
||
script.onload = this.initPlayer.bind(this)
|
||
document.head.appendChild(script)
|
||
}
|
||
},
|
||
methods: {
|
||
loadItem(oldValve,newValve,ownerInstance,insance){
|
||
this.accessToken = newValve.accessToken;
|
||
this.ezopenUrl1 = newValve.ezopenUrl1;
|
||
this.ezopenUrl2 = newValve.ezopenUrl2;
|
||
this.outDeviceCode = newValve.outDeviceCode;
|
||
},
|
||
initPlayer() {
|
||
this.player = new EZUIKit.EZUIKitPlayer({
|
||
id: 'video-container', // 视频容器ID
|
||
accessToken: this.accessToken,
|
||
url: this.ezopenUrl1,
|
||
// simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
|
||
//template: "pcRec",
|
||
//template: "mobileRe",
|
||
//plugin: ['talk'], // 加载插件，talk-对讲
|
||
width: 500,
|
||
height: 500 * 2 / 3,
|
||
});
|
||
window.player = this.player;
|
||
},
|
||
play() {
|
||
var playPromise = this.player.play();
|
||
playPromise.then((data) => {
|
||
console.log("promise 获取 数据", data)
|
||
})
|
||
},
|
||
handlePlay(){
|
||
this.changePlayUrl(this.ezopenUrl1,this.accessToken,this.outDeviceCode);
|
||
},
|
||
LookBack(){
|
||
this.changePlayUrl(this.ezopenUrl2,this.accessToken,this.outDeviceCode);
|
||
},
|
||
changePlayUrl(url, accessToken, deviceSerial) {
|
||
this.player.changePlayUrl({ url: url, accessToken: accessToken, deviceSerial: deviceSerial });
|
||
},
|
||
stop() {
|
||
var stopPromise = this.player.stop();
|
||
stopPromise.then((data) => {
|
||
console.log("promise 获取 数据", data)
|
||
})
|
||
},
|
||
getOSDTime() {
|
||
var getOSDTimePromise = this.player.getOSDTime();
|
||
getOSDTimePromise.then((data) => {
|
||
console.log("promise 获取 数据", data)
|
||
})
|
||
},
|
||
capturePicture() {
|
||
var capturePicturePromise = this.player.capturePicture(`${new Date().getTime()}`);
|
||
capturePicturePromise.then((data) => {
|
||
console.log("promise 获取 数据", data)
|
||
})
|
||
},
|
||
openSound() {
|
||
var openSoundPromise = this.player.openSound();
|
||
openSoundPromise.then((data) => {
|
||
console.log("promise 获取 数据", data)
|
||
})
|
||
},
|
||
closeSound() {
|
||
var openSoundPromise = this.player.closeSound();
|
||
openSoundPromise.then((data) => {
|
||
console.log("promise 获取 数据", data)
|
||
})
|
||
},
|
||
startSave() {
|
||
var startSavePromise = this.player.startSave(`${new Date().getTime()}`);
|
||
startSavePromise.then((data) => {
|
||
console.log("promise 获取 数据", data)
|
||
})
|
||
},
|
||
stopSave() {
|
||
var stopSavePromise = this.player.stopSave();
|
||
stopSavePromise.then((data) => {
|
||
console.log("promise 获取 数据", data)
|
||
})
|
||
},
|
||
ezopenStartTalk() {
|
||
this.player.startTalk();
|
||
},
|
||
ezopenStopTalk() {
|
||
this.player.stopTalk();
|
||
},
|
||
fullScreen() {
|
||
this.player.fullScreen();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.preview {
|
||
background-color: black;
|
||
}
|
||
</style>
|