关键词：头像与视频合成, 在视频上添加控制语音按钮
一、加载控制语音视频代码
1.1 测试平台
1）本地服务器运行平台
老师端：https://localhost:9101/demos/index.html?roomid=888&t=600
学生一：
https://localhost:9101/demos/student.html?studentId=1001&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1479740395ZMJkiF.jpg&t=600#888
学生二：
https://localhost:9101/demos/student.html?studentId=1002&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480494624FDjMGetutor.png&t=600#888
学生三：
https://localhost:9101/demos/student.html?studentId=1003&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480475198N2F0kntutor.png&t=600#888
2）备用服务器运行平台
老师端：https://123.57.206.36:9101/demos/index.html?roomid=888&t=600
学生一：
https://123.57.206.36:9101/demos/student.html?studentId=1001&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1479740395ZMJkiF.jpg&t=600#888
学生二：
https://123.57.206.36:9101/demos/student.html?studentId=1002&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480494624FDjMGetutor.png&t=600#888
学生三：
https://123.57.206.36:9101/demos/student.html?studentId=1003&userAvatar=http://123.57.206.36:8003/uploadfiles/2016/11/1480475198N2F0kntutor.png&t=600#888
1.2在视频上添加控制语音按钮
1）添加禁音按钮成功
a.)在追加的div中加个禁音按钮--------getMediaElement.js
//点击视频，获取id，并追加个小div进去----拉私有白板+控制音视频按钮
mediaBox.οnclick= function(){
studentVideoId =mediaElementContainer.id;
$("#"+studentVideoId).append("<divid='PriWB_controlVideoAudioDiv'
class='PriWB_controlVideoAudioDiv'>
<button class='getPriWB-btn'οnclick='getPriWB(" + studentVideoId + ")'>私有白板</button>
<button class='ControlVideoAudio-btn'οnclick='controlSomeoneVideoAudio("+ studentVideoId + ")'>禁音</button>
</div>");}
b.)控制函数controlSomeoneVideoAudio(studentVideoId)-----index.html
//控制某个学生的音视频
function controlSomeoneVideoAudio(studentVideoId) {
studentVideoIdPri=studentVideoId[1].id;
connection.send({
action:"silent",
uid:studentVideoIdPri
});
$("#PriWB_controlVideoAudioDiv").remove();
}
注：把指定学生的视频id发到学生端（studentVideoIdPri）
c.)禁音指定学生------------student.html
if(event.data.action =="silent"){
//单个禁音
if(event.data.uid !="all" &&
event.data.uid==connection.localMediaStreamId ){
connection.removeStream(connection.localMediaStreamId);
return;
}
//全员禁音
connection.removeStream(connection.localMediaStreamId);
return;
}
注：学生端拿着发过来的视频id和自己的本地id进行比较，如果匹配，就关掉自己的语音。
2）添加禁音按钮成功
和上面差不多，三步走如下：
a.) getMediaElement.js添加按钮如下：
//点击视频，获取id，并追加个小div进去----拉私有白板+控制音视频按钮
mediaBox.οnclick= function(){
studentVideoId =mediaElementContainer.id;
$("#"+studentVideoId).append("<divid='PriWB_controlVideoAudioDiv'
class='PriWB_controlVideoAudioDiv'>
<button class='getPriWB-btn'οnclick='getPriWB(" + studentVideoId + ")'>私有白板</button>
<buttonclass='closeSomeoneVideoAudio-btn' οnclick='closeSomeoneVideoAudio("
+ studentVideoId + ")'>关声音</button>
<button class='openSomeoneVideoAudio-btn'οnclick='openSomeoneVideoAudio("
+ studentVideoId + ")'>开声音</button></div>");
}
b.) openSomeoneVideoAudio(studentVideoId)函数-------index.html
//打开某个学生的音视频----------------------------------------------3.3
functionopenSomeoneVideoAudio(studentVideoId) {
studentVideoIdPri=studentVideoId[1].id;
connection.send({
action:"unsilent",
uid:studentVideoIdPri
});
$("#PriWB_controlVideoAudioDiv").remove();
}
c.)学生端接收----student.html
if(event.data.uid == connection.localMediaStreamId ){//单个通话
connection.renegotiate(connection.sessionid);
return;
}
3）把全员通话和全员禁音放到视频显示的上面
成功了。
2017年3月9日星期四
