上个小节我们写好了后端的Web方法，把参会人的列表查询出来了，这节课我们在前端页面，把这些参会人生成到视频墙上面。
一、进入视频会议室
线上会议审批通过之后，直到会议开始前的10分钟，参会人才可以进入到视频会议室。在online_meeting.vue页面的loadDataList()函数中，把查询到的线上会议列表加以处理，判断当前用户是不是参会人，而且距离会议开始在10分钟之内。满足这样的条件，进入按钮才有效。
loadDataList: function() {
……
that.$http('meeting/searchOnlineMeetingByPage', 'POST', data, true, function(resp) {
let page = resp.page;
for (let one of page.list) {
//计算会议是否可以进入
//1.开会前10分钟可以进入会议室
//2.会议状态必须是未开始或者进行中
let minute = dayjs(new Date()).diff(dayjs(`${one.date} ${one.start}`), 'minute');
if (one.mine == 'true' && ((minute >= -10 && minute <= 0 && one.status == '未开始') || one.status == '进行中')) {
one.canEnterMeeting = true;
} else {
one.canEnterMeeting = false;
}
}
}
}
<el-button type="text"
size="medium"
:disabled="!scope.row.canEnterMeeting"
@click="enterHandle(scope.row.id, scope.row.uuid)"
>
进入
</el-button>
定义enterHandle()函数，通过路由跳转到meeting_video.vue页面，然后传入meetingId和uuid俩个参数。让meeting_video.vue页面查询RoomID和参会人列表。
enterHandle: function(id, uuid) {
let that = this;
that.$router.push({ name: 'MeetingVideo', params: { meetingId: id, uuid: uuid } });
},
二、生成视频墙
在meeting_video.vue页面的created()函数中发起Ajax请求，查询RoomID和参会人。
created: function() {
let that = this;
//路由传入的参数
let params = that.$route.params;
that.meetingId = params.meetingId;
that.uuid = params.uuid;
let data = { meetingId: that.meetingId };
//查询会议所有参会人，并且生成视频墙
that.$http('meeting/searchOnlineMeetingMembers', 'POST', data, true, function(resp) {
let list = resp.list;
if (list != null && list.length > 0) {
//取出当前用户的信息
that.mine = list[0];
//其他参会人信息保存在memberList里面
for (let i = 1; i < list.length; i++) {
that.memberList.push(list[i]);
}
}
});
data = {
uuid: that.uuid
};
// 查询视频会议室的ID
that.$http('meeting/searchRoomIdByUUID', 'POST', data, true, function(resp) {
if (resp.roomId == null) {
that.$message({
message: '不存在视频会议室',
type: 'error',
duration: 1200
});
} else {
that.roomId = resp.roomId;
}
});
}
我们看一下视图层的HTML标签是怎么定义视频墙的。
<!-- 视频墙 -->
<el-col :span="19">
<div class="meeting-container">
<el-scrollbar height="650px" id="videoListContainer">
<div class="video-list">
<!--当前用户排在视频墙第一位-->
<div class="video">
<div class="user">
<img class="photo" :src="mine.photo" />
<span class="name">{{ mine.name }}{{ shareStatus ? '（共享中）' : '' }}</span>
</div>
<div id="localStream"></div>
</div>
<!--其他参会人-->
<div class="video" v-for="one in memberList">
<div class="user">
<img class="photo" :src="one.photo" />
<span class="name">{{ one.name }}</span>
</div>
<div :id="one.id" class="remote-stream" @dblclick="bigVideoHandle(one.id)"></div>
</div>
</div>
</el-scrollbar>
<div id="videoBig" @dblclick="smallVideoHandle()"></div>
</div>
<p class="desc">
会议过程中，不需要发言的会场要主动将本地会场的MIC关闭，保证会场安静，当需要发言时要及时打开MIC。会议过程中，需要发言讨论时，先打开MIC向主会场提出请求，得到同意后再继续发言，否则请继续保持静音。发言时，要—个人一个人的发言，不要多人同时讲话，因为全向MIC会把所有人的声音混合，远端听到的声音会非常嘈杂，听不清具体说话内容。在会议进行过程中，尽量控制会场噪音，不要在会场中随意走动
</p>
</el-col>