第68篇一对多之头像与视频合成（三）在视频上添加控制语音按钮

关键词：头像与视频合成, 在视频上添加控制语音按钮

一、加载控制语音视频代码

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日星期四