478 lines
12 KiB
Vue
478 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<div class="jy-media-container">
|
|||
|
|
<!-- 设备选择区域 -->
|
|||
|
|
<div class="device-selector">
|
|||
|
|
<el-select v-model="selectedDevice" placeholder="选择设备" filterable>
|
|||
|
|
<el-option
|
|||
|
|
v-for="device in onlineDevices"
|
|||
|
|
:key="device.hostbody"
|
|||
|
|
:label="`${device.hostname} (${device.hostbody})`"
|
|||
|
|
:value="device.hostbody"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
|
|||
|
|
<el-button-group class="control-buttons">
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
:disabled="!selectedDevice || videoLoading"
|
|||
|
|
@click="startVideoCall"
|
|||
|
|
>
|
|||
|
|
{{ videoLoading ? '呼叫中...' : '视频呼叫' }}
|
|||
|
|
</el-button>
|
|||
|
|
|
|||
|
|
<el-button
|
|||
|
|
type="success"
|
|||
|
|
:disabled="!selectedDevice || audioLoading"
|
|||
|
|
@click="startAudioCall"
|
|||
|
|
>
|
|||
|
|
{{ audioLoading ? '呼叫中...' : '音频呼叫' }}
|
|||
|
|
</el-button>
|
|||
|
|
|
|||
|
|
<el-button
|
|||
|
|
type="warning"
|
|||
|
|
:disabled="!isVideoActive || isAudioInVideoActive"
|
|||
|
|
@click="startAudioInVideo"
|
|||
|
|
>
|
|||
|
|
视频中开启音频
|
|||
|
|
</el-button>
|
|||
|
|
|
|||
|
|
<el-button
|
|||
|
|
type="danger"
|
|||
|
|
:disabled="!isVideoActive && !isAudioActive"
|
|||
|
|
@click="stopAllCalls"
|
|||
|
|
>
|
|||
|
|
停止所有
|
|||
|
|
</el-button>
|
|||
|
|
</el-button-group>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 视频播放区域 -->
|
|||
|
|
<div class="video-container">
|
|||
|
|
<video
|
|||
|
|
ref="videoPlayer"
|
|||
|
|
controls
|
|||
|
|
autoplay
|
|||
|
|
playsinline
|
|||
|
|
class="video-element"
|
|||
|
|
:class="{ active: isVideoActive }"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div v-if="!isVideoActive" class="video-placeholder">
|
|||
|
|
<el-icon :size="50"><VideoCamera /></el-icon>
|
|||
|
|
<p>视频未开启</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 状态信息 -->
|
|||
|
|
<div class="status-info">
|
|||
|
|
<el-alert
|
|||
|
|
v-if="errorMessage"
|
|||
|
|
:title="errorMessage"
|
|||
|
|
type="error"
|
|||
|
|
show-icon
|
|||
|
|
closable
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<el-alert
|
|||
|
|
v-if="callStatus"
|
|||
|
|
:title="callStatus"
|
|||
|
|
:type="callStatusType"
|
|||
|
|
show-icon
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
|||
|
|
import { VideoCamera } from '@element-plus/icons-vue'
|
|||
|
|
import axios from 'axios'
|
|||
|
|
|
|||
|
|
// 响应式数据
|
|||
|
|
const selectedDevice = ref('')
|
|||
|
|
const onlineDevices = ref([])
|
|||
|
|
const isVideoActive = ref(false)
|
|||
|
|
const isAudioActive = ref(false)
|
|||
|
|
const isAudioInVideoActive = ref(false)
|
|||
|
|
const videoLoading = ref(false)
|
|||
|
|
const audioLoading = ref(false)
|
|||
|
|
const errorMessage = ref('')
|
|||
|
|
const callStatus = ref('')
|
|||
|
|
const callStatusType = ref('info')
|
|||
|
|
const videoPlayer = ref(null)
|
|||
|
|
const websocket = ref(null)
|
|||
|
|
|
|||
|
|
// WebSocket连接配置
|
|||
|
|
const WS_URL = 'ws://localhost:5000' // 替换为实际WS地址
|
|||
|
|
const API_BASE = '' // 替换为实际API地址
|
|||
|
|
|
|||
|
|
// 获取在线设备列表
|
|||
|
|
const fetchOnlineDevices = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await axios.post(`${API_BASE}/rest/other/unitjson/gdlist`, {
|
|||
|
|
id: "1001", // 替换为单位ID
|
|||
|
|
bh: "bh",
|
|||
|
|
text: "dname"
|
|||
|
|
}, {
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
'Cookie': `PHPSESSID=${localStorage.getItem('sessionId')}`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onlineDevices.value = response.data.data[0]?.sub || []
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取设备列表失败:', error)
|
|||
|
|
errorMessage.value = `获取设备列表失败: ${error.message}`
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化WebSocket连接
|
|||
|
|
const initWebSocket = () => {
|
|||
|
|
websocket.value = new WebSocket(WS_URL)
|
|||
|
|
|
|||
|
|
websocket.value.onopen = () => {
|
|||
|
|
console.log('WebSocket连接已建立')
|
|||
|
|
callStatus.value = '实时通讯连接已建立'
|
|||
|
|
callStatusType.value = 'success'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
websocket.value.onmessage = (event) => {
|
|||
|
|
const data = JSON.parse(event.data)
|
|||
|
|
console.log('WebSocket消息:', data)
|
|||
|
|
|
|||
|
|
// 处理视频流回调
|
|||
|
|
if (data.zk_start_video) {
|
|||
|
|
handleVideoStream(data.zk_start_video)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理音频流回调
|
|||
|
|
if (data.zk_start_audio) {
|
|||
|
|
handleAudioStream(data.zk_start_audio)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理平台推流回调
|
|||
|
|
if (data.zk_platform_push_video || data.zk_platform_push_audio) {
|
|||
|
|
handlePlatformStream(data)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
websocket.value.onerror = (error) => {
|
|||
|
|
console.error('WebSocket错误:', error)
|
|||
|
|
errorMessage.value = `实时通讯连接错误: ${error.message}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
websocket.value.onclose = () => {
|
|||
|
|
console.log('WebSocket连接已关闭')
|
|||
|
|
callStatus.value = '实时通讯连接已断开'
|
|||
|
|
callStatusType.value = 'warning'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 开始视频呼叫
|
|||
|
|
const startVideoCall = async () => {
|
|||
|
|
if (!selectedDevice.value) return
|
|||
|
|
|
|||
|
|
videoLoading.value = true
|
|||
|
|
callStatus.value = '正在发起视频呼叫...'
|
|||
|
|
callStatusType.value = 'info'
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await axios.post(`${API_BASE}/rest/live/chrome/startLive`, {
|
|||
|
|
hostbody_arr: [selectedDevice.value],
|
|||
|
|
callId: "",
|
|||
|
|
type: ""
|
|||
|
|
}, {
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
'Cookie': `PHPSESSID=${localStorage.getItem('sessionId')}`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (response.data.code === 200) {
|
|||
|
|
callStatus.value = '视频呼叫已发起，等待设备响应...'
|
|||
|
|
callStatusType.value = 'success'
|
|||
|
|
} else {
|
|||
|
|
throw new Error(response.data.msg)
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('视频呼叫失败:', error)
|
|||
|
|
errorMessage.value = `视频呼叫失败: ${error.message}`
|
|||
|
|
callStatus.value = `视频呼叫失败: ${error.message}`
|
|||
|
|
callStatusType.value = 'error'
|
|||
|
|
} finally {
|
|||
|
|
videoLoading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 开始音频呼叫
|
|||
|
|
const startAudioCall = async () => {
|
|||
|
|
if (!selectedDevice.value) return
|
|||
|
|
|
|||
|
|
audioLoading.value = true
|
|||
|
|
callStatus.value = '正在发起音频呼叫...'
|
|||
|
|
callStatusType.value = 'info'
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await axios.post(`${API_BASE}/rest/live/chrome/startAudio`, {
|
|||
|
|
hostbody_arr: [selectedDevice.value],
|
|||
|
|
callId: ""
|
|||
|
|
}, {
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
'Cookie': `PHPSESSID=${localStorage.getItem('sessionId')}`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (response.data.code === 200) {
|
|||
|
|
callStatus.value = '音频呼叫已发起，等待设备响应...'
|
|||
|
|
callStatusType.value = 'success'
|
|||
|
|
} else {
|
|||
|
|
throw new Error(response.data.msg)
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('音频呼叫失败:', error)
|
|||
|
|
errorMessage.value = `音频呼叫失败: ${error.message}`
|
|||
|
|
callStatus.value = `音频呼叫失败: ${error.message}`
|
|||
|
|
callStatusType.value = 'error'
|
|||
|
|
} finally {
|
|||
|
|
audioLoading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 视频中开启音频
|
|||
|
|
const startAudioInVideo = async () => {
|
|||
|
|
if (!selectedDevice.value || !isVideoActive.value) return
|
|||
|
|
|
|||
|
|
callStatus.value = '正在视频通话中开启音频...'
|
|||
|
|
callStatusType.value = 'info'
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await axios.post(`${API_BASE}/rest/live/chrome/startAudioInVideo`, {
|
|||
|
|
hostbody: selectedDevice.value
|
|||
|
|
}, {
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
'Cookie': `PHPSESSID=${localStorage.getItem('sessionId')}`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (response.data.code === 200) {
|
|||
|
|
isAudioInVideoActive.value = true
|
|||
|
|
callStatus.value = '已在视频通话中开启音频'
|
|||
|
|
callStatusType.value = 'success'
|
|||
|
|
|
|||
|
|
// 处理平台音频流
|
|||
|
|
if (response.data.data.platform_rtsp) {
|
|||
|
|
setupAudioStream(response.data.data.platform_rtsp)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
throw new Error(response.data.msg)
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('开启音频失败:', error)
|
|||
|
|
errorMessage.value = `开启音频失败: ${error.message}`
|
|||
|
|
callStatus.value = `开启音频失败: ${error.message}`
|
|||
|
|
callStatusType.value = 'error'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理视频流
|
|||
|
|
const handleVideoStream = (streamData) => {
|
|||
|
|
if (streamData.hostbody !== selectedDevice.value) return
|
|||
|
|
|
|||
|
|
isVideoActive.value = true
|
|||
|
|
callStatus.value = '视频流已连接'
|
|||
|
|
callStatusType.value = 'success'
|
|||
|
|
|
|||
|
|
// 优先使用WebRTC流，回退到RTSP
|
|||
|
|
const streamUrl = streamData.webrtc_url || streamData.rtsp_url
|
|||
|
|
if (streamUrl) {
|
|||
|
|
setupVideoStream(streamUrl)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理音频流
|
|||
|
|
const handleAudioStream = (streamData) => {
|
|||
|
|
if (streamData.hostbody !== selectedDevice.value) return
|
|||
|
|
|
|||
|
|
isAudioActive.value = true
|
|||
|
|
callStatus.value = '音频流已连接'
|
|||
|
|
callStatusType.value = 'success'
|
|||
|
|
|
|||
|
|
// 优先使用WebRTC流，回退到RTSP
|
|||
|
|
const streamUrl = streamData.webrtc_url || streamData.rtsp_url
|
|||
|
|
if (streamUrl) {
|
|||
|
|
setupAudioStream(streamUrl)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理平台推流
|
|||
|
|
const handlePlatformStream = (data) => {
|
|||
|
|
if (data.zk_platform_push_video && data.zk_platform_push_video.status === 1) {
|
|||
|
|
callStatus.value = '平台视频推流已开始'
|
|||
|
|
callStatusType.value = 'success'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (data.zk_platform_push_audio && data.zk_platform_push_audio.status === 1) {
|
|||
|
|
callStatus.value = '平台音频推流已开始'
|
|||
|
|
callStatusType.value = 'success'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置视频流
|
|||
|
|
const setupVideoStream = (streamUrl) => {
|
|||
|
|
const video = videoPlayer.value
|
|||
|
|
if (!video) return
|
|||
|
|
|
|||
|
|
// 实际项目中可能需要使用专门的播放器库(如hls.js)处理流媒体
|
|||
|
|
if (streamUrl.startsWith('rtsp://')) {
|
|||
|
|
// RTSP流需要转协议，实际项目中应使用转码服务
|
|||
|
|
console.warn('浏览器不支持直接播放RTSP流，需要转协议')
|
|||
|
|
errorMessage.value = '浏览器不支持直接播放RTSP流，需要后端转协议'
|
|||
|
|
} else {
|
|||
|
|
video.src = streamUrl
|
|||
|
|
video.play().catch(err => {
|
|||
|
|
console.error('视频播放错误:', err)
|
|||
|
|
errorMessage.value = `视频播放错误: ${err.message}`
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置音频流
|
|||
|
|
const setupAudioStream = (streamUrl) => {
|
|||
|
|
// 在实际项目中，可能需要创建单独的audio元素处理音频流
|
|||
|
|
console.log('音频流地址:', streamUrl)
|
|||
|
|
// 实现逻辑与视频流类似
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 停止所有呼叫
|
|||
|
|
const stopAllCalls = async () => {
|
|||
|
|
if (!selectedDevice.value) return
|
|||
|
|
|
|||
|
|
callStatus.value = '正在停止所有呼叫...'
|
|||
|
|
callStatusType.value = 'info'
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 停止视频
|
|||
|
|
if (isVideoActive.value) {
|
|||
|
|
await axios.post(`${API_BASE}/rest/live/chrome/stopLive`, {
|
|||
|
|
hostbody_arr: [selectedDevice.value]
|
|||
|
|
}, {
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
'Cookie': `PHPSESSID=${localStorage.getItem('sessionId')}`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 停止音频
|
|||
|
|
if (isAudioActive.value || isAudioInVideoActive.value) {
|
|||
|
|
await axios.post(`${API_BASE}/rest/live/chrome/stopAudio`, {
|
|||
|
|
hostbody_arr: [selectedDevice.value],
|
|||
|
|
wsChannelId_arr: [] // 实际项目中需要填充正确的wsChannelId
|
|||
|
|
}, {
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
'Cookie': `PHPSESSID=${localStorage.getItem('sessionId')}`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 重置状态
|
|||
|
|
isVideoActive.value = false
|
|||
|
|
isAudioActive.value = false
|
|||
|
|
isAudioInVideoActive.value = false
|
|||
|
|
|
|||
|
|
// 清除视频源
|
|||
|
|
if (videoPlayer.value) {
|
|||
|
|
videoPlayer.value.src = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
callStatus.value = '所有呼叫已停止'
|
|||
|
|
callStatusType.value = 'success'
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('停止呼叫失败:', error)
|
|||
|
|
errorMessage.value = `停止呼叫失败: ${error.message}`
|
|||
|
|
callStatus.value = `停止呼叫失败: ${error.message}`
|
|||
|
|
callStatusType.value = 'error'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 组件生命周期
|
|||
|
|
onMounted(() => {
|
|||
|
|
fetchOnlineDevices()
|
|||
|
|
initWebSocket()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
if (websocket.value) {
|
|||
|
|
websocket.value.close()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.jy-media-container {
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device-selector {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-buttons {
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-container {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 0;
|
|||
|
|
padding-bottom: 56.25%; /* 16:9 比例 */
|
|||
|
|
background-color: #000;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-element {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: contain;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-element.active {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-placeholder {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-info {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
</style>
|