本文介绍了一种基于WebRTC的音视频交互系统搭建过程，包括加载控制语音视频代码、头像与视频合成等功能的实现细节，并探讨了PHP中array_splice及array_sum函数的应用。
关键词：加载控制语音视频代码, 头像与视频合成,array_splice,array_sum
一、加载控制语音视频代码
1.1 本地服务器运行平台
老师端：https://localhost:9101/demos/index.html?roomid=888&t=600
学生一：
学生二：
学生三：
1.2 备用服务器运行平台
老师端：https://123.57.206.36:9101/demos/index.html?roomid=888&t=600
学生一：
学生二：
学生三：
1.3 现在视频出来了，但全员禁音还不好使
在老师端和学生端都加了如下代码：
<!-- 视频显示 -->
<div id="videos-container" ></div>
注：上传到服务器，两台电脑试试如何。
在服务器上也不行，还提示如下：
1.4 看下那个接口如下：
http://www.rtcmulticonnection.org/docs/
原因找到了，同事改了文件RTCMultiConnection.js
S.localMediaStreamId = e.streamid;
同时，也修改了getMediaElement.js文件，如下：
var buttons = config.buttons ||['mute-audio', 'mute-video', 'full-screen', 'volume-slider', 'stop'];改为了：
var buttons = config.buttons || ['record-video','mute-audio', 'mute-video','full-screen', 'volume-slider', 'stop'];
1.5 单击头像出两个按钮
1）描述
生成两个按钮，一个是拉学生的私有白板，一个是控制该学生的语音。
2）代码实现如下：
a.)先来一个div，用于追加一个小div，小div里面有两个按钮。
<!-- 2.4.1 选择调出私有白板图片或控制某个学生的视频语音 -->
<divid='selectPriWBorVideo'> </div>
b.)点击头像时，在上面div中追加一个小div，如下：
b1.)单击头像
$("#studentIdSet").append("<img onclick='selPriWB_ConAudioVideo(" + studentId +")'src="+userAvatar+" width='60px';height='60px'>");
b2.)追加div
function selPriWB_ConAudioVideo(studentId) {
$("#selectPriWBorVideo").append("<div id='"+studentId +"'><button id='getPriWB-Btn' onclick='getPriWB("+ studentId + ")' style= 'width:60px; height:30px;'>私有白板</button><buttonid='controlVideoAudio-Btn' onclick='controlVideoAudio("+ studentId + ")' style= 'width:60px; height:30px;'>禁音</button></div>");
}
c.)上述b2.）中用到两个函数getPriWB(studentId)和controlVideoAudio(studentId)
它们都用到studentId，前者拿着studentId，去找私有白板，后者拿着studentId去禁语音。分别如下：
//拉学生白板
function getPriWB(askStudentId) {
connection.send({
askStudentId:askStudentId
});
$("#selectPriWBorVideo").empty();
}
//控制某个学生的音视频
functioncontrolVideoAudio(studentId) {
console.log('22222222222studentId-->',studentId);
$("#selectPriWBorVideo").empty();
}
注：不管是拉完白板还是禁完语音，都要清空div，下次再点击头像时再出来即可。接下来做控制某个人的语音和视频。
1.6 合成头像与视频显示
1)知识扩充-------点击div获取id
$(function(){
$(document).click(function(e) {
//$(e.target).addClass('bg'); // 设置背景色
alert($(e.target).attr('id')); // 获取id
})
})
注：这个函数可以获取当前，任何区域的元素id
2）现在没找到思路，用上述函数单击出问题
接下来的思路是找到它在哪里追加的。
二、php
2.1 PHP array_splice() 函数
1)定义和用法
array_splice() 函数从数组中移除选定的元素，并用新元素取代它。函数也将返回被移除元素的数组。
提示：如果函数没有移除任何元素（length=0），则替代数组将从 start 参数的位置插入（参见实例 2）。
注释：不保留替代数组中的键名。
2)语法
array_splice(array,start,length,array)
3)例子如下
a.)例子一如下：
与本页前面部分的实例相同，但是输出返回的数组：
注：从正数第一个开始，移除两个元素并返回。
b.）例子二如下：
带有设置为 0 的 length 参数：
注：如果函数没有移除任何元素（length=0），则替代数组将从 start 参数的位置插入。
c.)例子三如下：
注：移除的元素输出，原数组发生变化。如果插入元素和移除元素数目不一致，不报错，插入少一点或多一点即可。
2.2 PHP array_sum() 函数
1)定义和用法
array_sum() 函数返回数组中所有值的和。
2)语法
array_sum(array)
3)例子如下：
返回数组中所有值的和(52.2+13.7+0.9)：
注：求数组各元素的和。
2017年3月7日星期二
扫一扫
587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
