|
|
|
|
@ -46,7 +46,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setup(props) {
|
|
|
|
|
console.log(props.ptzShow)
|
|
|
|
|
// console.log(props.ptzShow)
|
|
|
|
|
const video = ref(null)
|
|
|
|
|
const selfVideo = ref(null)
|
|
|
|
|
const url = ref(null)
|
|
|
|
|
@ -59,27 +59,37 @@ export default {
|
|
|
|
|
const msgrecv = ref(null)
|
|
|
|
|
|
|
|
|
|
// const streamUrl = ref(document.location.protocol + "//" + window.location.host + "/index/api/webrtc?app=live&stream=test&type=play");
|
|
|
|
|
const streamUrl = ref(
|
|
|
|
|
document.location.protocol +
|
|
|
|
|
'//' +
|
|
|
|
|
window.location.host +
|
|
|
|
|
':8096/index/api/webrtc?app=live&stream=camera' +
|
|
|
|
|
props.cameraId +
|
|
|
|
|
'&type=play'
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const player = ref(null)
|
|
|
|
|
const recvOnly = ref(true)
|
|
|
|
|
const resolutions = ref([])
|
|
|
|
|
const resolution = ref('')
|
|
|
|
|
// 监听 cameraId 的变化
|
|
|
|
|
watch(() => props.cameraId, (newCameraId, oldCameraId) => {
|
|
|
|
|
console.log(newCameraId);
|
|
|
|
|
// console.log(newCameraId);
|
|
|
|
|
if (newCameraId !== oldCameraId) {
|
|
|
|
|
|
|
|
|
|
ZLMRTCClient.GetAllScanResolution().forEach((r, i) => {
|
|
|
|
|
let text = r.label + '(' + r.width + 'x' + r.height + ')'
|
|
|
|
|
resolutions.value.push({
|
|
|
|
|
text: text,
|
|
|
|
|
value: r
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
resolution.value = resolutions.value[0].text
|
|
|
|
|
stopVideo()
|
|
|
|
|
startVideo()
|
|
|
|
|
// console.log(newCameraId);
|
|
|
|
|
// 释放资源
|
|
|
|
|
console.log(newCameraId+"54651561");
|
|
|
|
|
// console.log(newCameraId+"54651561");
|
|
|
|
|
}
|
|
|
|
|
}),
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
|
|
|
|
// formData.value = CameraApi.getCamera(props.cameraId)
|
|
|
|
|
// console.log(formData.value);
|
|
|
|
|
ZLMRTCClient.GetAllScanResolution().forEach((r, i) => {
|
|
|
|
|
let text = r.label + '(' + r.width + 'x' + r.height + ')'
|
|
|
|
|
resolutions.value.push({
|
|
|
|
|
@ -89,32 +99,48 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
resolution.value = resolutions.value[0].text
|
|
|
|
|
formData.value = CameraApi.getCamera(props.cameraId)
|
|
|
|
|
|
|
|
|
|
stopVideo()
|
|
|
|
|
startVideo()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 卸载事件
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
stopVideo()
|
|
|
|
|
})
|
|
|
|
|
const radioChange = (value) => {
|
|
|
|
|
let urlObj = new URL(streamUrl.value)
|
|
|
|
|
urlObj.searchParams.set('type', value)
|
|
|
|
|
streamUrl.value = urlObj.href
|
|
|
|
|
if (value == 'play') {
|
|
|
|
|
recvOnly.value = true
|
|
|
|
|
} else if (value == 'echo') {
|
|
|
|
|
recvOnly.value = false
|
|
|
|
|
} else {
|
|
|
|
|
recvOnly.value = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// const radioChange = (value) => {
|
|
|
|
|
// let urlObj = new URL(streamUrl.value)
|
|
|
|
|
// urlObj.searchParams.set('type', value)
|
|
|
|
|
// streamUrl.value = urlObj.href
|
|
|
|
|
// if (value == 'play') {
|
|
|
|
|
// recvOnly.value = true
|
|
|
|
|
// } else if (value == 'echo') {
|
|
|
|
|
// recvOnly.value = false
|
|
|
|
|
// } else {
|
|
|
|
|
// recvOnly.value = false
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
const changeResolution = (e) => {
|
|
|
|
|
resolution.value = e.target.options[e.target.selectedIndex].text
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const start_play = () => {
|
|
|
|
|
const start_play =async () => {
|
|
|
|
|
// const urlIp = ref("")
|
|
|
|
|
const resCamera = await CameraApi.getCamera(props.cameraId)
|
|
|
|
|
const urlIp = resCamera
|
|
|
|
|
|
|
|
|
|
console.log(urlIp);
|
|
|
|
|
const streamUrl = ref(
|
|
|
|
|
document.location.protocol +
|
|
|
|
|
'//' +
|
|
|
|
|
urlIp.rtcServer +
|
|
|
|
|
':'+urlIp.rtcServerPort+'/index/api/webrtc?app=live&stream=camera' +
|
|
|
|
|
props.cameraId +
|
|
|
|
|
'&type=play'
|
|
|
|
|
)
|
|
|
|
|
console.log(streamUrl.value);
|
|
|
|
|
let res = resolution.value.match(/\d+/g)
|
|
|
|
|
let h = parseInt(res.pop())
|
|
|
|
|
let w = parseInt(res.pop())
|
|
|
|
|
@ -137,15 +163,15 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
player.value.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function (e) {
|
|
|
|
|
console.log('ICE 协商出错')
|
|
|
|
|
// console.log('ICE 协商出错')
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
player.value.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function (e) {
|
|
|
|
|
console.log('播放成功', e.streams)
|
|
|
|
|
// console.log('播放成功', e.streams)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
player.value.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, function (e) {
|
|
|
|
|
console.log('offer anwser 交换失败', e)
|
|
|
|
|
// console.log('offer anwser 交换失败', e)
|
|
|
|
|
stopVideo()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
@ -155,42 +181,42 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
player.value.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, function (s) {
|
|
|
|
|
console.log('获取本地流失败')
|
|
|
|
|
// console.log('获取本地流失败')
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
player.value.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, function (state) {
|
|
|
|
|
console.log('当前状态==>', state)
|
|
|
|
|
// console.log('当前状态==>', state)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
player.value.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN, function (event) {
|
|
|
|
|
console.log('rtc datachannel 打开 :', event)
|
|
|
|
|
// // console.log('rtc datachannel 打开 :', event)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
player.value.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG, function (event) {
|
|
|
|
|
console.log('rtc datachannel 消息 :', event.data)
|
|
|
|
|
// console.log('rtc datachannel 消息 :', event.data)
|
|
|
|
|
msgrecv.value.value = event.data
|
|
|
|
|
})
|
|
|
|
|
player.value.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR, function (event) {
|
|
|
|
|
console.log('rtc datachannel 错误 :', event)
|
|
|
|
|
// console.log('rtc datachannel 错误 :', event)
|
|
|
|
|
})
|
|
|
|
|
player.value.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE, function (event) {
|
|
|
|
|
console.log('rtc datachannel 关闭 :', event)
|
|
|
|
|
// console.log('rtc datachannel 关闭 :', event)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const startVideo = () => {
|
|
|
|
|
console.log('开始')
|
|
|
|
|
// console.log('开始')
|
|
|
|
|
stopVideo()
|
|
|
|
|
let res = resolution.value.match(/\d+/g)
|
|
|
|
|
let h = '50%'
|
|
|
|
|
let w = '50%'
|
|
|
|
|
console.log(h, w)
|
|
|
|
|
console.log(video.value)
|
|
|
|
|
// console.log(h, w)
|
|
|
|
|
// console.log(video.value)
|
|
|
|
|
start_play()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const stopVideo = () => {
|
|
|
|
|
console.log('停止')
|
|
|
|
|
// console.log('停止')
|
|
|
|
|
if (player.value) {
|
|
|
|
|
player.value.close()
|
|
|
|
|
player.value = null
|
|
|
|
|
@ -221,12 +247,12 @@ export default {
|
|
|
|
|
datachannel,
|
|
|
|
|
msgsend,
|
|
|
|
|
msgrecv,
|
|
|
|
|
streamUrl,
|
|
|
|
|
// streamUrl,
|
|
|
|
|
player,
|
|
|
|
|
recvOnly,
|
|
|
|
|
resolutions,
|
|
|
|
|
resolution,
|
|
|
|
|
radioChange,
|
|
|
|
|
// radioChange,
|
|
|
|
|
changeResolution,
|
|
|
|
|
startVideo,
|
|
|
|
|
stopVideo,
|
|
|
|
|
|
LAPTOP-S9HJSOEB\昊天
8 months ago
