视频通话部分接口联调
This commit is contained in:
tdg930622
parent
42da96030b
commit
31247fce3a
@ -21,31 +21,40 @@
|
||||
v-for="(item, index) in remoteUsersViews" :key="index">
|
||||
<div class="video-col-Graphics border-radius-4" :id="item.id"></div>
|
||||
<div class="video-col-btn" v-if="zoomActive">
|
||||
<div class="cursor-pointer"><svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" /></div>
|
||||
<div class="cursor-pointer"><svg-icon icon-class="remove-room" className="tabs-svg" /></div>
|
||||
<div class="cursor-pointer" v-if="item.microphone" @click="handleOffRemoteAudio(item.userId)">
|
||||
<svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" />
|
||||
</div>
|
||||
<div class="cursor-pointer" v-if="!item.microphone" @click="handleOnRemoteAudio(item.userId)">
|
||||
<svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" />
|
||||
</div>
|
||||
<div class="cursor-pointer" @click="handleKickOut(item.userId)"><svg-icon icon-class="remove-room" className="tabs-svg" /></div>
|
||||
</div>
|
||||
<div class="video-col-name text-center color-fff f12">{{item.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="zoomActive" class="room-bottom border-radius-8 background-color-fff flex-row justify-content-between align-items-center">
|
||||
<div class="flex-row align-items-center cursor-pointer">
|
||||
<svg-icon icon-class="video-recording-1" className="tabs-svg" />
|
||||
<div class="pl-4 f14">录制</div>
|
||||
<div class="flex-row align-items-center cursor-pointer" @click="handleVideoRecording">
|
||||
<svg-icon :icon-class="videoRecordingSts ? 'video-recording-2' : 'video-recording-1'" className="tabs-svg" />
|
||||
<div class="pl-4 f14">{{ videoRecordingSts ? '录制中': '录制' }}</div>
|
||||
</div>
|
||||
<div class="flex-row align-items-center cursor-pointer">
|
||||
<svg-icon icon-class="Invite-room" className="tabs-svg" />
|
||||
<div class="pl-4 f14">邀请</div>
|
||||
</div>
|
||||
<div class="flex-row align-items-center cursor-pointer">
|
||||
<div class="flex-row align-items-center cursor-pointer" v-if="micStatus" @click="handleStopLocalAudio">
|
||||
<i class="f24 el-icon-microphone color-4E5969"></i>
|
||||
<div class="pl-4 f14">关闭语音</div>
|
||||
</div>
|
||||
<div class="flex-row align-items-center cursor-pointer">
|
||||
<div class="flex-row align-items-center cursor-pointer" v-if="!micStatus" @click="handleStartLocalAudio">
|
||||
<i class="f24 el-icon-turn-off-microphone color-4E5969"></i>
|
||||
<div class="pl-4 f14">开启语音</div>
|
||||
</div>
|
||||
<div class="flex-row align-items-center cursor-pointer" @click="handleOffRemoteAudio('')">
|
||||
<svg-icon icon-class="mute-all" className="tabs-svg" />
|
||||
<div class="pl-4 f14">全部静音</div>
|
||||
</div>
|
||||
<div class="room-bottom-btn-finish cursor-pointer border-radius-4 f14 color-fff" @click="handleClose">
|
||||
结束录制
|
||||
<div class="room-bottom-btn-finish cursor-pointer border-radius-4 f14 color-fff" @click="handleStopMediate">
|
||||
结束调解
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -67,6 +76,7 @@ export default {
|
||||
return {
|
||||
zoomActive: true,// true 放大状态、false 缩小状态
|
||||
|
||||
arrPersonnel: [],
|
||||
roomId: 0,
|
||||
sdkAppId: 0,
|
||||
userId: '',
|
||||
@ -80,6 +90,8 @@ export default {
|
||||
trtc: null,
|
||||
personnelNumber: 1,
|
||||
remoteUsersViews: [],
|
||||
|
||||
videoRecordingSts: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -98,10 +110,12 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.initMedia();
|
||||
this.getVideoDetail();
|
||||
this.getRoomArgument();
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.handleKickedOut()
|
||||
this.$emit('update:eventDialog', null)
|
||||
},
|
||||
toggleZoom() {
|
||||
@ -116,17 +130,32 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
// 获取详情
|
||||
getVideoDetail() {
|
||||
videoTelephone.videoDetail({id: this.eventDialog.id}).then((res) => {
|
||||
// console.log(res, '---videoDetail')
|
||||
this.arrPersonnel = [...res.litigants, ...res.members]
|
||||
});
|
||||
},
|
||||
// 获取房间参数
|
||||
getRoomArgument() {
|
||||
videoTelephone.getEnterById({id: this.eventDialog.id}).then((res) => {
|
||||
let {roomId, sdkAppId, userId, userSig} = res;
|
||||
this.roomId = roomId;
|
||||
this.sdkAppId = sdkAppId;
|
||||
this.userId = userId;
|
||||
this.userSig = userSig;
|
||||
console.log(res, '---房间参数')
|
||||
this.handleEnterRoom();
|
||||
});
|
||||
let {roomId, sdkAppId, userId, userSig} = this.eventDialog;
|
||||
console.log(roomId, sdkAppId, userId, userSig, '---roomId, sdkAppId, userId, userSig')
|
||||
this.roomId = parseInt(roomId, 10);
|
||||
this.sdkAppId = parseInt(sdkAppId, 10);
|
||||
this.userId = userId;
|
||||
this.userSig = userSig;
|
||||
console.log(this.roomId, this.sdkAppId, this.userId, this.userSig, '---this.roomId, sdkAppId, userId, userSig')
|
||||
this.handleEnterRoom();
|
||||
// videoTelephone.getEnterById({id: this.eventDialog.id}).then((res) => {
|
||||
// let {roomId, sdkAppId, userId, userSig} = res;
|
||||
// this.roomId = roomId;
|
||||
// this.sdkAppId = sdkAppId;
|
||||
// this.userId = userId;
|
||||
// this.userSig = userSig;
|
||||
// console.log(res, '---房间参数')
|
||||
// this.handleEnterRoom();
|
||||
// });
|
||||
},
|
||||
|
||||
// 获取视频、音频权限
|
||||
@ -145,9 +174,11 @@ export default {
|
||||
// stream.getTracks().forEach(track => track.stop());
|
||||
this.getDeviceList();
|
||||
}).catch(err =>{
|
||||
this.$message.error("访问用户媒体设备失败,请重新打开视频通话！");
|
||||
console.log('访问用户媒体设备失败：' , err)
|
||||
});
|
||||
} else {
|
||||
this.$message.error("你的浏览器不支持访问用户媒体设备！");
|
||||
console.log('你的浏览器不支持访问用户媒体设备')
|
||||
}
|
||||
},
|
||||
@ -272,16 +303,18 @@ export default {
|
||||
this.trtc.on(TRTC.EVENT.KICKED_OUT, this.handleKickedOut);
|
||||
this.trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, this.handleRemoteVideoAvailable);
|
||||
this.trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, this.handleRemoteVideoUnavailable);
|
||||
this.trtc.on(TRTC.EVENT.CUSTOM_MESSAGE, this.handleCustomMessage);
|
||||
},
|
||||
uninstallEventHandlers() {
|
||||
this.trtc.off(TRTC.EVENT.KICKED_OUT, this.handleKickedOut);
|
||||
this.trtc.off(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, this.handleRemoteVideoAvailable);
|
||||
this.trtc.off(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, this.handleRemoteVideoUnavailable);
|
||||
this.trtc.off(TRTC.EVENT.CUSTOM_MESSAGE, this.handleCustomMessage);
|
||||
},
|
||||
|
||||
// 退出房间
|
||||
async handleKickedOut(event) {
|
||||
this.trtc = null;
|
||||
// this.trtc = null;
|
||||
await this.exitRoom();
|
||||
},
|
||||
// 远端进入房间
|
||||
@ -289,11 +322,14 @@ export default {
|
||||
console.log(event, '---event远端进入房间')
|
||||
const { userId, streamType } = event;
|
||||
try {
|
||||
let obj = this.arrPersonnel.find(item => item.phone === userId)
|
||||
let data = {
|
||||
id: `${userId}_main`,
|
||||
name: '222',
|
||||
userId: userId
|
||||
name: obj.name,
|
||||
userId: userId,
|
||||
microphone: true
|
||||
}
|
||||
|
||||
this.personnelNumber++;
|
||||
this.remoteUsersViews.push(data);
|
||||
this.$nextTick(async () => {
|
||||
@ -311,6 +347,93 @@ export default {
|
||||
this.personnelNumber--;
|
||||
this.remoteUsersViews = this.remoteUsersViews.filter(item => item.userId !== event.userId);
|
||||
},
|
||||
// 接收远端消息
|
||||
handleCustomMessage(event) {
|
||||
console.log(`---收到 ${event.userId} 的 sei message: ${event.data}`)
|
||||
},
|
||||
|
||||
// 关闭远端声音
|
||||
async handleOffRemoteAudio(userId) {
|
||||
console.log(userId, '---关闭远端声音')
|
||||
try {
|
||||
let jsonString = JSON.stringify({behavior: 'offAudio', userId: userId});
|
||||
let encoder = new TextEncoder();
|
||||
let encoded = encoder.encode(jsonString).buffer;
|
||||
console.log(encoded, '---关闭远端声音')
|
||||
let decoder = new TextDecoder();
|
||||
let decodedString = decoder.decode(encoded);
|
||||
let parsedObj = JSON.parse(decodedString);
|
||||
console.log(parsedObj, '---解析关闭远端声音');
|
||||
await this.trtc.sendCustomMessage({
|
||||
cmdId: 1,
|
||||
data: encoded
|
||||
});
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
// 开启远端声音
|
||||
async handleOnRemoteAudio(userId) {
|
||||
console.log(userId, '---开启远端声音')
|
||||
try {
|
||||
let jsonString = JSON.stringify({behavior: 'onAudio', userId: userId});
|
||||
let encoder = new TextEncoder();
|
||||
let encoded = encoder.encode(jsonString).buffer;
|
||||
await this.trtc.sendCustomMessage({
|
||||
cmdId: 2,
|
||||
data: encoded
|
||||
});
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
// 踢出远端用户
|
||||
async handleKickOut(userId) {
|
||||
console.log(userId, '---踢出远端用户')
|
||||
try {
|
||||
let jsonString = JSON.stringify({behavior: 'kickOut', userId: userId});
|
||||
let encoder = new TextEncoder();
|
||||
let encoded = encoder.encode(jsonString).buffer;
|
||||
await this.trtc.sendCustomMessage({
|
||||
cmdId: 3,
|
||||
data: encoded
|
||||
});
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// 录制
|
||||
handleVideoRecording(){
|
||||
if (this.videoRecordingSts){
|
||||
videoTelephone.stopRecord({id: this.eventDialog.id}).then((res) => {
|
||||
console.log('---视频已停止录制')
|
||||
this.videoRecordingSts = false;
|
||||
});
|
||||
}else {
|
||||
videoTelephone.startRecord({id: this.eventDialog.id}).then((res) => {
|
||||
console.log('---视频已开始录制')
|
||||
this.videoRecordingSts = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 停止调解
|
||||
handleStopMediate() {
|
||||
this.$confirm("请确定是否结束调解?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
if(!this.$clickThrottle()) { return }//防止重复点击
|
||||
let data = {id:this.eventDialog.id}
|
||||
// if (this.videoRecordingSts){
|
||||
// this.handleVideoRecording();
|
||||
// }
|
||||
videoTelephone.stopMediate(data).then((res) => {
|
||||
this.handleClose();
|
||||
});
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -129,16 +129,20 @@ export default {
|
||||
}).catch(() => {});
|
||||
},
|
||||
handleVideoCall(item) {
|
||||
this.$parent.VideoCallDialog = {
|
||||
id: item.id,
|
||||
roomId: item.roomId,
|
||||
sdkAppId: item.sdkAppId,
|
||||
userId: item.userId,
|
||||
userSig: item.userSig
|
||||
if(!this.$parent.VideoCallDialog) {
|
||||
this.$parent.VideoCallDialog = {
|
||||
id: item.id,
|
||||
roomId: item.roomId,
|
||||
sdkAppId: item.sdkAppId,
|
||||
userId: item.userId,
|
||||
userSig: item.userSig
|
||||
}
|
||||
// videoTelephone.getEnterById({id: item.id}).then((res) => {
|
||||
//
|
||||
// });
|
||||
}else {
|
||||
this.$message.warning("请先关闭当前视频通话，才能再次点击视频通话！");
|
||||
}
|
||||
// this.VideoCallDialog = {
|
||||
// id: item.id
|
||||
// }
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,5 +40,13 @@ const apiVideoTelephone = {
|
||||
getListByCaseId: data => {
|
||||
return service.service.post(`${api}listByCaseId`, data)
|
||||
},
|
||||
// 邀请
|
||||
videoInvite: data => {
|
||||
return service.service.post(`${api}invite`, data)
|
||||
},
|
||||
// 视频案件详情接口
|
||||
videoDetail: data => {
|
||||
return service.service.post(`${api}detail`, data)
|
||||
},
|
||||
}
|
||||
export default apiVideoTelephone;
|
||||
Loading…
x
Reference in New Issue
Block a user