第68篇一对多之头像与视频合成(三)在视频上添加控制语音按钮
2017-03-09 14:59
169 查看
关键词:头像与视频合成,
在视频上添加控制语音按钮
一、加载控制语音视频代码
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.onclick= function(){
studentVideoId =mediaElementContainer.id;
$("#"+studentVideoId).append("<divid='PriWB_controlVideoAudioDiv'
class='PriWB_controlVideoAudioDiv'>
<button class='getPriWB-btn'onclick='getPriWB(" + studentVideoId + ")'>私有白板</button>
<button class='ControlVideoAudio-btn'onclick='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.onclick= function(){
studentVideoId =mediaElementContainer.id;
$("#"+studentVideoId).append("<divid='PriWB_controlVideoAudioDiv'
class='PriWB_controlVideoAudioDiv'>
<button class='getPriWB-btn'onclick='getPriWB(" + studentVideoId + ")'>私有白板</button>
<buttonclass='closeSomeoneVideoAudio-btn' onclick='closeSomeoneVideoAudio("
+ studentVideoId + ")'>关声音</button>
<button class='openSomeoneVideoAudio-btn'onclick='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日星期四
在视频上添加控制语音按钮
一、加载控制语音视频代码
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.onclick= function(){
studentVideoId =mediaElementContainer.id;
$("#"+studentVideoId).append("<divid='PriWB_controlVideoAudioDiv'
class='PriWB_controlVideoAudioDiv'>
<button class='getPriWB-btn'onclick='getPriWB(" + studentVideoId + ")'>私有白板</button>
<button class='ControlVideoAudio-btn'onclick='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.onclick= function(){
studentVideoId =mediaElementContainer.id;
$("#"+studentVideoId).append("<divid='PriWB_controlVideoAudioDiv'
class='PriWB_controlVideoAudioDiv'>
<button class='getPriWB-btn'onclick='getPriWB(" + studentVideoId + ")'>私有白板</button>
<buttonclass='closeSomeoneVideoAudio-btn' onclick='closeSomeoneVideoAudio("
+ studentVideoId + ")'>关声音</button>
<button class='openSomeoneVideoAudio-btn'onclick='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日星期四
相关文章推荐
- 使用ffmpeg采集摄像头的视频和语音,合成mpg文件
- 【自然框架】通用权限的视频演示(一):添加角色,权限到功能节点和按钮
- Android 视频终端语音控制、按键模拟
- 基于ARM的网络视频监控开发+网页按钮控制摄像头方位 ---fwqlzz love is for ever
- IOS版添加phonegap--语音识别合成插件教程
- 按钮精灵用代码动态控制时需要添加UIButton.normalsprite
- 如何在帧上添加代码来控制按钮及影片剪辑的行为
- javacpp-opencv图像处理之2:实时视频添加图片水印,实现不同大小图片叠加,图像透明度控制,文字和图片双水印
- ASP.NET MVC3 技术(三) 添加视频和 Gravatar 头像
- 树莓派添加中文语音合成功能
- 【自然框架】通用权限的视频演示(一):添加角色,权限到功能节点和按钮
- ASP.NET MVC3 技术(三) 添加视频和 Gravatar 头像
- BIEE 10g 移除仪表盘右下角控制按钮(刷新、打印、添加到工作簿)
- 嵌入式开发五:未来之星机器人语音控制及视频开发(颜色追踪)(运动追踪)
- 点击按钮添加一个ListItem后控制页面的转向问题
- YouTube视频添加消除“呜呜祖拉”噪声按钮
- Ext中一个按钮控制两个表格数据添加
- 基于ARM的网络视频监控开发+网页按钮控制摄像头方位
- 用代码控制点击按钮添加EditText