一、前言
本文只是简单分享最近的小demo。海康威视设备对接萤石云实现实时观看直播和语音对讲功能。
废话不多开始
二、实操
安装ezuikit-js
npm引入
npm install ezuikit-js
在vue里引用并初始化
我这里是提成了组件，大家可以按需食用
获取播放地址的接口可以参考官网： 获取播放地址
下面的视频初始化参数也可以访问官网： UiKit
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import EZUIKit from 'ezuikit-js';
const props = defineProps({
videoUrl: String,
width: String,
height: String,
});
// 生成一个唯一的 containerId
const containerId = ref(`video-container-${Math.random().toString(36).substr(2, 9)}`);
let video = ref({})
const getVideo = () => {
return video.value
}
const autoVideo = () => {
const accessToken = "your_actual_access_token_here"; // 替换为实际的访问令牌
video.value = new EZUIKit.EZUIKitPlayer({
autoplay: true, // 默认播放
//视频播放包裹元素
id: containerId.value,
//萤石token
accessToken: accessToken,
// ezopen://open.ys7.com/${设备序列号}/{通道号}.live
url: props.videoUrl, // 播放地址
template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
plugin: ['talk'], // 加载插件，talk-对讲
// 视频下方底部控件
footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
width: props.width ? props.width : 770,
height: props.height ? props.height : 500,
});
}
onMounted(() => {
autoVideo()
})
onUnmounted(() => {
video.value.stop()
video.value.stopTalk()
})
// vue3父子通信
defineExpose({getVideo, video})
</script>
<template>
<div class="video">
<div :id="containerId"></div>
<div style="display: flex; padding: 10px 0px;">
<el-button type="success" @click="onStartTalk">
<template #default="scope">
<el-icon><Bell /></el-icon>
<el-icon><Microphone /></el-icon>
双向对讲
</template>
</el-button>
<el-button type="success" @click="onStartTalkBAN">
<template #default="scope">
<el-icon><MuteNotification /></el-icon>
<el-icon><Microphone /></el-icon>
单向对讲
</template>
</el-button>
<el-button type="warning" icon="Mute" @click="onStopTalk">关闭对讲</el-button>
</div>
</div>
</template>
<style lang="scss" scoped>
.video {
width: 100%;
height: 100%;
}
</style>
对讲功能
语音功能需设置：音频AAC 、通道传输协议需为tcp （ps：这个是萤石云客服一通交流的结果)
在实现这个功能前需要先确定自己的设备支不支持语音，可以访问 获取设备能力集 发送POST请求 support_talk 值是否为 1
萤石云官方直播插件带的对讲会关闭声音所以我就自己写了
/**
* 开启对讲不关闭声音
*/
const onStartTalk = () => {
setTimeout(() => {
video.value.startTalk();
}, 500); // 延时500毫秒
}
/**
* 开启对讲关闭声音
*/
const onStartTalkBAN = () => {
setTimeout(() => {
video.value.closeSound();
video.value.startTalk();
}, 500); // 延时500毫秒
}
/**
* 关闭对讲
*/
const onStopTalk = () => {
setTimeout(() => {
video.value.stopTalk();
}, 500); // 延时500毫秒
}
具体可以查看**萤石云官方api文档**
