介绍
- 使用的物联网视频监控 分为 h264、h265解码格式 使用的 easywasmplayer 播放器 下面有npm的链接
- 监控为 flv 格式、有h264 、h265格式, 需要打开监控后必须关闭 在组件里面生命周期结束之前 调用了关闭接口。
- videodata 参数: 关闭监控时候需要传入进来的
- videoPlay 方法 是加载视频的data参数 是通过this.$ref调用的这个方法
- 如何配置可以看 easyWasmPlayer.js 文档
可能遇到的问题
- 问题:本地可以查看视频 线上不能查看
- 原因可能是:libDecoder.wasm 文件的问题,nginx代理的问题,地址配置对了和文件格式配置对了即可。返回的类型必须是wasm,给nginx配置这个格式,网上搜
<template>
<div class="videoCon">
<div id="wasmPlayer_video1"></div>
<div class="videoOperation">
<ul class="direction">
<li class="up" @click="videoOperation('UP')"><i class="el-icon-caret-top"></i></li>
<li class="down" @click="videoOperation('DOWN')"><i class="el-icon-caret-bottom"></i></li>
<li class="left" @click="videoOperation('LEFT')"><i class="el-icon-caret-left"></i></li>
<li class="right" @click="videoOperation('RIGHT')"><i class="el-icon-caret-right"></i></li>
</ul>
<p class="changeSize"><i class="el-icon-plus" @click="videoOperation('ZOOM_IN')">
</i> <i class="el-icon-minus" @click="videoOperation('ZOOM_OUT')"></i></p>
</div>
</div>
</template>
<script>
import {stopPlay, tallOperate} from "@/api/device";
export default {
name: "wasmPlayer",
data() {
return {
wasm_player: null,
operateArr: {
UP: 10,
DOWN: 10,
LEFT: 10,
RIGHT: 10,
ZOOM_IN: 10,
ZOOM_OUT: 10,
}
};
},
props: {
videoData: null
},
methods: {
videoPlay(data) {
try {
this.wasm_player = new WasmPlayer(
null,
"wasmPlayer_video1",
function (e) {
},
{Height: true}
);
this.wasm_player.play(data["flv"], 1);
} catch (e) {
console.log(e.message);
}
},
async stopPlay() {
if (this.wasm_player === null) {
return;
}
this.wasm_player.destroy()
let form_data = new FormData();
form_data.append("deviceId", this.videoData["deviceId"]);
form_data.append("channelId", this.videoData["channelId"]);
form_data.append("streamId", this.videoData["streamId"]);
let res = await stopPlay(form_data);
if (res.code === 0) {
console.log("pause the device");
}
this.wasm_player === null
},
videoOperation(type) {
let form_data = new FormData();
form_data.append("deviceId", this.videoData["deviceId"]);
form_data.append("channelId", this.videoData["channelId"]);
form_data.append("operateType", type);
form_data.append("num", this.operateArr[type]);
tallOperate(form_data).then(res => {
console.log(res);
});
}
},
beforeDestroy() {
this.stopPlay();
}
};
</script>
<style lang="scss" scoped>
.player-box {
overflow: visible;
}
.videoCon {
position: relative;
width: 100%;
height: 100%;
.videoOperation {
position: absolute;
right: 20px;
top: 60px;
width: 150px;
height: 200px;
background: rgba(255, 255, 255, .6);
border-radius: 20px;
.direction {
position: relative;
height: 150px;
i {
font-size: 34px;
}
li {
width: 30px;
height: 30px;
position: absolute;
cursor: pointer;
}
.up {
left: 50%;
margin-left: -15px;
top: 10px;
}
.down {
left: 50%;
margin-left: -15px;
bottom: 10px;
}
.left {
top: 50%;
margin-top: -15px;
left: 10px;
}
.right {
top: 50%;
margin-top: -15px;
right: 10px;
}
}
.changeSize {
display: flex;
justify-content: space-around;
margin-top: 10px;
i {
font-size: 22px;
font-weight: bold;
cursor: pointer;
display: block;
width: 30px;
height: 30px;
}
}
}
}
</style>