最近,项目中需要添加视频监控,录像功能,前端库采用了liveQing,但是项目是基于vue3开发的,出现了不兼容的问题,因此,经过研究,采用原生js,使用iframe的方式引入liveQing。
基本使用
vue3页面中通过iframe引入html,这里要注意一点,引入的html路径必须写成public下的"/XXX.html"。
<iframe
v-if="videoInfo.iframeSrc"
ref="iframeRef"
allowfullscreen="true"
webkitallowfullscreen="true"
mozallowfullscreen="true"
@load="loaded"
:src="videoInfo.iframeSrc"
style="width: 100%; height: 50vh"
scrolling="auto"
frameborder="0"
id="iframe"
>
</iframe>
在onMounted生命周期内监听message,注意,必须使用onBeforeUnmount移出message。
onMounted(async () => {
// 在外部vue的window上添加postMessage的监听,并且绑定处理函数handleMessage
window.addEventListener("message", handleMessage);
});
const handleMessage = event => {
// 根据上面制定的结构来解析iframe内部发回来的数据
const data = event.data;
...
};
onBeforeUnmount(() => {
window.removeEventListener("message", handleMessage);
});
iframe通讯
使用xxx.contentWindow.postMessage()传递数据
const loaded = () => {
// iframe 加载时传递数据给子组件
if (iframeRef.value) {
iframeRef.value.contentWindow.postMessage(
{
cwd: "sendMsg",
params: {
name: videoInfo.cameraName,
url: videoInfo.videoUrl,
},
},
"*"
);
}
};
html页接收信息
// 接收src等信息
window.addEventListener('message', function (event) {
if (event.data.cwd == "sendMsg") {
player.setAttribute("video-url", event.data.params.url);
}
});
html页发送信息
// 向父vue页面发送信息
function sendMsgCb(cmd, data) {
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(() => {
window.parent.postMessage({
cmd: cmd,
params: {
success: true,
data: data
}
}, '*')
}, 300)
}
完!