414 lines
12 KiB
Vue
414 lines
12 KiB
Vue
<template>
|
|
<div ref="videoRoom" class="room-content border-radius-8" v-vdrag :class="zoomActive ? `room-content-big` : 'room-content-small'">
|
|
<div class="room-top flex-row justify-content-between align-items-center">
|
|
<div class="f16 f-weight600">调解视频画面</div>
|
|
<div class="room-top-btn background-color-fff flex-row align-items-center border-radius-4 cursor-pointer"
|
|
@click="toggleZoom">
|
|
<span class="mr-4">{{ zoomActive ? '缩小' : '放大' }}</span>
|
|
<svg-icon
|
|
:icon-class="zoomActive ? `zoom-1` : 'zoom-2'"
|
|
className="tabs-svg" />
|
|
</div>
|
|
</div>
|
|
<div class="room-middle">
|
|
<!-- 本地 -->
|
|
<div class="video-col position-r" :class="personnelNumber <= 4 ? 'w-50' : 'w-33'" v-show="camStatus">
|
|
<div class="video-col-Graphics border-radius-4" id="realTimeVideo0"></div>
|
|
<div class="video-col-name text-center color-fff f12">调解人</div>
|
|
</div>
|
|
<!-- 远端 -->
|
|
<div class="video-col position-r" :class="personnelNumber <= 4 ? 'w-50' : 'w-33'"
|
|
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>
|
|
<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>
|
|
<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">
|
|
<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">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TRTC from 'trtc-sdk-v5';
|
|
export default {
|
|
props: {
|
|
eventDialog: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
zoomActive: true,// true 放大状态、false 缩小状态
|
|
|
|
roomId: '',
|
|
sdkAppId: '',
|
|
userId: '',
|
|
userSig: '',
|
|
cameraId: '',// 本地视频通道
|
|
microphoneId: '',// 本地音频通道
|
|
vidStatus: false,// 本地视频状态
|
|
micStatus: false,// 本地音频状态
|
|
|
|
trtc: null,
|
|
personnelNumber: 1,
|
|
remoteUsersViews: [],
|
|
};
|
|
},
|
|
computed: {
|
|
zoomedStyles() {
|
|
return {
|
|
left: '269px',
|
|
top: '330px'
|
|
};
|
|
},
|
|
defaultTop() {
|
|
const itemsPerRow = 4;
|
|
const rowHeight = 35.5;
|
|
const numberOfRows = Math.ceil(this.personnelNumber / itemsPerRow);
|
|
return `${numberOfRows * rowHeight + 35.5}px`;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initMedia()
|
|
},
|
|
methods: {
|
|
handleClose() {
|
|
this.$emit('update:eventDialog', null)
|
|
},
|
|
toggleZoom() {
|
|
this.zoomActive = !this.zoomActive;
|
|
|
|
this.$nextTick(() => {
|
|
if (this.$refs.videoRoom) {
|
|
console.log(this.defaultTop, '---this.defaultTop')
|
|
this.$refs.videoRoom.style.left = this.zoomActive ? this.zoomedStyles.left : '157px';
|
|
this.$refs.videoRoom.style.top = this.zoomActive ? this.zoomedStyles.top : this.defaultTop;
|
|
}
|
|
});
|
|
},
|
|
|
|
// 获取视频、音频权限
|
|
async getDeviceList() {
|
|
let camera = await TRTC.getCameraList();
|
|
let microphone = await TRTC.getMicrophoneList();
|
|
console.log(camera, '---camera')
|
|
console.log(microphone, '---microphone')
|
|
this.cameraId = camera[0].deviceId;
|
|
this.microphoneId = microphone[0].deviceId;
|
|
},
|
|
async initMedia() {
|
|
if (navigator.mediaDevices.getUserMedia) {
|
|
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((stream) => {
|
|
console.log('音视频初始化完毕：', stream)
|
|
// stream.getTracks().forEach(track => track.stop());
|
|
this.getDeviceList();
|
|
}).catch(err =>{
|
|
console.log('访问用户媒体设备失败：' , err)
|
|
});
|
|
} else {
|
|
console.log('你的浏览器不支持访问用户媒体设备')
|
|
}
|
|
},
|
|
// 获取进入房间的参数
|
|
handleEnterRoom() {
|
|
let data = {
|
|
sdkSecretKey: '',
|
|
sdkAppId: '',
|
|
userId: '',
|
|
roomId: '',
|
|
userSig: ''
|
|
}
|
|
this.enterRoom();
|
|
this.handleStartLocalAudio();
|
|
this.handleStartLocalVideo();
|
|
},
|
|
async enterRoom() {
|
|
this.trtc = TRTC.create();
|
|
try {
|
|
await this.trtc.enterRoom({
|
|
roomId: this.roomId,
|
|
sdkAppId: parseInt(this.sdkAppId, 10),
|
|
userId: this.userId,
|
|
userSig: this.userSig,
|
|
});
|
|
this.installEventHandlers();
|
|
this.startGetAudioLevel();
|
|
}catch (e) {
|
|
console.log('视频云初始化报错！', e)
|
|
throw e;
|
|
}
|
|
|
|
},
|
|
|
|
// 本地音频
|
|
async handleStartLocalAudio() {
|
|
if (this.micStatus) {
|
|
return;
|
|
}
|
|
try {
|
|
await this.trtc.startLocalAudio({
|
|
option: {
|
|
microphoneId: this.microphoneId,
|
|
},
|
|
});
|
|
this.micStatus = true;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
},
|
|
async handleStopLocalAudio() {
|
|
if (!this.micStatus) {
|
|
return;
|
|
}
|
|
try {
|
|
await this.trtc.stopLocalAudio();
|
|
this.micStatus = false;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
},
|
|
// 本地视频
|
|
async handleStartLocalVideo() {
|
|
if (this.vidStatus) {
|
|
return;
|
|
}
|
|
try {
|
|
await this.trtc.startLocalVideo({
|
|
view: 'local',
|
|
option: {
|
|
cameraId: this.cameraId,
|
|
profile: '1080p',
|
|
},
|
|
});
|
|
this.vidStatus = true;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
},
|
|
async handleStopLocalVideo() {
|
|
if (!this.vidStatus) {
|
|
return;
|
|
}
|
|
try {
|
|
await this.trtc.stopLocalVideo();
|
|
this.vidStatus = false;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
},
|
|
// 退出房间-结束调解
|
|
async exitRoom() {
|
|
this.stopGetAudioLevel();
|
|
try {
|
|
await this.trtc.exitRoom();// 退出当前音视频通话房间
|
|
this.micStatus = false;
|
|
this.personnelNumber = 1;
|
|
this.remoteUsersViews = [];
|
|
this.uninstallEventHandlers();
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
await this.trtc.stopLocalAudio();// 停止本地麦克风的采集及发布
|
|
await this.trtc.stopLocalVideo();// 停止本地摄像头的采集、预览及发布
|
|
// await this.trtc.stopScreenShare();// 停止屏幕分享
|
|
},
|
|
|
|
// 音量
|
|
startGetAudioLevel() {
|
|
this.trtc.on(TRTC.EVENT.AUDIO_VOLUME, (event) => {
|
|
event.result.forEach(({ userId, volume }) => {
|
|
const isMe = userId === '';
|
|
if (isMe) {
|
|
console.log(`my volume: ${volume}`);
|
|
} else {
|
|
console.log(`user: ${userId} volume: ${volume}`);
|
|
}
|
|
});
|
|
});
|
|
this.trtc.enableAudioVolumeEvaluation(2000);
|
|
},
|
|
stopGetAudioLevel() {
|
|
this.trtc && this.trtc.enableAudioVolumeEvaluation(-1); // 开启或关闭音量大小回调
|
|
},
|
|
// 流对象事件
|
|
installEventHandlers() {
|
|
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);
|
|
},
|
|
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);
|
|
},
|
|
|
|
// 退出房间
|
|
async handleKickedOut(event) {
|
|
this.trtc = null;
|
|
await this.exitRoom();
|
|
},
|
|
// 远端进入房间
|
|
handleRemoteVideoAvailable(event) {
|
|
const { userId, streamType } = event;
|
|
try {
|
|
let data = {
|
|
id: `${userId}_main`,
|
|
name: '222',
|
|
userId: userId
|
|
}
|
|
this.personnelNumber++;
|
|
this.remoteUsersViews.push(data);
|
|
this.$nextTick(async () => {
|
|
await this.trtc.startRemoteVideo({ userId, streamType, view: `${userId}_main` });
|
|
});
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
// 远端退出房间
|
|
handleRemoteVideoUnavailable(event) {
|
|
const { streamType } = event;
|
|
this.trtc.stopRemoteVideo({ userId: event.userId, streamType });
|
|
this.personnelNumber--;
|
|
this.remoteUsersViews = this.remoteUsersViews.filter(item => item.userId !== event.userId);
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.room-content{
|
|
background: linear-gradient(180deg, #F8E8FF 0%, #E7EAFE 100%);
|
|
border: 2px solid #FFFFFF;
|
|
top: 50%;
|
|
left: 50%;
|
|
position: absolute;
|
|
margin: 0 !important;
|
|
transform: translate(-50%, -50%);
|
|
user-select: none;
|
|
.room-top{
|
|
.room-top-btn{
|
|
padding: 6px 10px;
|
|
.tabs-svg{
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
.room-middle{
|
|
display: flex;
|
|
flex-wrap: wrap; /* 当子元素总宽度超过父容器时，子元素会自动换到下一行 */
|
|
|
|
.video-col{
|
|
aspect-ratio: 1 / 1; /* 宽度与高度的比例为1:1 */
|
|
//flex: 0 0 auto; /* 禁用子元素的伸缩性 */
|
|
.video-col-Graphics{
|
|
width: 100%;
|
|
height: 100%;
|
|
//background-color: #FFFFFF;
|
|
}
|
|
.video-col-btn{
|
|
position: absolute;
|
|
top: 11px;
|
|
right: 10px;
|
|
.tabs-svg{
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
.video-col-name{
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 21px;
|
|
background-color: #00000059;
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
}
|
|
}
|
|
.room-bottom{
|
|
position: absolute;
|
|
left: 24px;
|
|
bottom: 24px;
|
|
padding: 8px 16px;
|
|
width: calc(100% - 45px);
|
|
.tabs-svg{
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.room-bottom-btn-finish{
|
|
background-color: #F53F3F;
|
|
padding: 10px 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.room-content-big{
|
|
padding: 24px;
|
|
width: 536px;
|
|
height: 658px;
|
|
//left: calc(50% - 268px);
|
|
//bottom: 86px;
|
|
|
|
.room-middle{
|
|
padding: 16px 0;
|
|
width: 488px;
|
|
//height: 488px;
|
|
gap: 8px; /* 子元素之间的间隔 */
|
|
.w-100{
|
|
width: calc(100%);
|
|
//height: calc(100%);
|
|
}
|
|
.w-50{
|
|
width: calc(50% - 4px);
|
|
//height: calc(50% - 4px);
|
|
}
|
|
.w-33{
|
|
width: calc(33% - 5px);
|
|
//height: calc(33% - 5px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.room-content-small{
|
|
padding: 12px 16px;
|
|
//width: 300px;
|
|
min-height: 140px;
|
|
//top: 0;
|
|
//left: 0;
|
|
.room-middle{
|
|
padding: 8px 0;
|
|
width: 272px;
|
|
gap: 4px; /* 子元素之间的间隔 */
|
|
.video-col{
|
|
width: 65px;
|
|
}
|
|
}
|
|
}
|
|
</style> |