本文介绍了一个视频教学系统的实现过程，包括如何将头像与视频进行合成显示，通过单击视频来触发私有白板功能，并详细阐述了清空与删除DOM元素的方法。此外，还深入探讨了如何利用RTC技术实现学生端与教师端之间的私有白板图片传输。
关键词：头像与视频合成, 私有白板在视频上拉取成功
一、加载控制语音视频代码
1.1 测试平台
1）本地服务器运行平台
老师端：https://localhost:9101/demos/index.html?roomid=888&t=600
学生一：
学生二：
学生三：
2）备用服务器运行平台
老师端：https://123.57.206.36:9101/demos/index.html?roomid=888&t=600
学生一：
学生二：
学生三：
1.2 合成头像与视频显示
1)现在没找到思路，用上述函数单击出问题
接下来的思路是找到它在哪里追加的。
2）知识扩充---清空div方法及删除div
清空div方法一：
document.getElementById('BIGDraw').innerHTML= "";
清空div方法二：
$('#BIGDraw').html("");
清空div方法三：
$('#studentIdSet').empty();
注：以上方法只是清空div中的子元素，但这个div依然存在，要完全删除这个div,可使用下面语句
$("#PriWB_controlVideoAudioDiv").remove();
注：删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
3）从视频传id成功
现在点击视频，可以增加单击函数，并且传id到拉私有白板图片函数里。代码如下：
a.)点击视频，获取id，并追加个小div进去，如下：---------getMediaElement.js
mediaBox.onclick= function(){
studentVideoId =mediaElementContainer.id;
$("#"+studentVideoId).append("<divid='PriWB_controlVideoAudioDiv'
class='PriWB_controlVideoAudioDiv'>
<button class='getPriWB-btn111'onclick='getPriWB("
+ studentVideoId + ")'>私有白板</button></div>");
}
b.) getPriWB(studentVideoId)
//拉学生白板
function getPriWB(studentVideoId) {
studentVideoIdPri=studentVideoId[1].id;
$("#PriWB_controlVideoAudioDiv").remove();
}
注：这里用到的是删除div（$("#PriWB_controlVideoAudioDiv").remove();）
4)优化getPriWB(studentVideoId)
a.)调私有白板时，先发个消息过去---------------------index.html
function getPriWB(studentVideoId) {
studentVideoIdPri=studentVideoId[1].id;
connection.send({
studentVideoIdPri:studentVideoIdPri
});
$("#PriWB_controlVideoAudioDiv").remove();
}
注：同时传学生视频id过去。
b.)学生端收到消息，把私有白板图片数组传过去------------------student.html
//传私有白板图片数组给老师端
if(event.data.studentVideoIdPri==connection.localMediaStreamId){
connection.send({
studentPri: true,
stuPriDataURLArr:dataURLSPriTShaArr
});
}
注：这个函数一个重要的点是，获取本地视频id（connection.localMediaStreamId），这个是学生自己写的。--------------RTCMultiConnection.js
c.)老师端收到消息后，展示私有白板信息------------------index.html
//获取指定学生私有白板图片数组并展示
if (event.data.studentPri){
//把收到的私有白板数组展示出来，供老师查看
stuPriUrlIdArray =event.data.stuPriDataURLArr;
if(isArray(stuPriUrlIdArray) && stuPriUrlIdArray.length){
$('#picContentStuPri').html("");
for (var i = 0; i <stuPriUrlIdArray.length; i++) {
if(isArray(stuPriUrlIdArray)){
dataURL_Pri =stuPriUrlIdArray[i];
varj = i+1;
varpageIndexPri = i + 1;
varimgContentPri = ' <span class="img_divStuPritea_base64_selectStuPri"><img id= "arr_base64_imgStuPri' + j + '"src = "'+dataURL_Pri+'" name="thumbnailStuPri"class="tea_base64StuPri "><spanclass="page_index_divStuPri">' + pageIndexPri + '</span></span>';
$(imgContentPri).appendTo($("#picWrapStuPriPic.picContentStuPri"));
$(".tea_base64StuPri").off("click");
$(".tea_base64StuPri").on("click",onImgClickPrivate);
}
}
}
return;
}
注：以前是借助学生端发消息过去，老师接收到之后再回传给学生。现在是老师端拿着指定学生的视频id，给每个学生比较，如果对的上，就返回相应的私有白板。
2017年3月8日星期三
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
