首页 > 电脑主机 >

使用WebRTC的视频会议

电脑杂谈　发布时间：2020-04-17 04:06:33　来源：网络整理

网站重构与web标准设计视频教程_web视频会议_web前端开发的视频

该项目正在实现一个简单的视频会议应用程序. 您可以在两个人之间进行视频会议，并打开相同的html页面. 这是通过WebRTc和Web套接字完成的.

视频会议很困难，并且需要许多类似的宽带编（语音和视频）. 回声消除. 自动增益控制.

但是，WebRTC现在变得更容易了，因为您可以在没有插件的浏览器中进行视频会议！

首先让我们知道它是什么吗？

WebRTC是一个免费的开放项目，可以通过简单的Javascript API来实现具有实时通信（RTC）功能的Web浏览器.

WebRTC的任务是通过简单的Javascript API和HTML5开发丰富的浏览器. 高质量. RTC应用程序.

WebRTC仍在进行这项工作，WebRTC受到Google Chrome chanary / Firefox aurora / Opera Lab的支持.

我们需要做五件事来进行视频会议:

1. 在html页面中设置视频元素:


<video></video>

2. 访问本地设备（相机，麦克风）:


navigator.getUserMedia();

3. 从本地或远程对等方显示/ v:

web前端开发的视频_web视频会议_网站重构与web标准设计视频教程


createObjectURL

4. 连接到远程节点


PeerConnection

在您的html页面中访问本地设备并将其显示在html页面中，我们将首先使用以下代码:


// Replace the source of the video element with the stream from the camera
try 
{ 
navigator.webkitGetUserMedia({audio: true, video: true}, successCallback, errorCallback);
} 
catch (e) 
{
navigator.webkitGetUserMedia("video,audio", successCallback, errorCallback);
}
function successCallback(stream) {
 sourcevid.src = window.webkitURL.createObjectURL(stream);
 sourcevid.style.webkitTransform = "rotateY(180deg)";
 localStream = stream;
}
function errorCallback(error) {
 logg('An error occurred: [CODE ' + error.code + ']');
}

浏览器的浏览器实现

webkit（Chrome）:

webkitGetUserMedia（）

window.webkitURL.createObjectURL（）

歌剧

getUserMedia（）

直接设置video.src

Firefox:

mozGetUserMedia（）

web前端开发的视频_网站重构与web标准设计视频教程_web视频会议

window.URL.createObjectURL（）

示例:

尚未实施.

我们需要建立对等连接:

我们可以通过Web套接字建立连接，也可以使用appengine上的频道管理服务器（例如开源apprtc应用程序）. 我决定将Web套接字服务器用作双向通信通道.

WebRTC使用PeerConnection来通信数据流. 但是，我们需要一种在节点之间发送控制消息的机制，称为信令. 您可以选择任何喜欢的消息传递协议，例如SIP.

启动会话WebRTC客户端需要本地和远程配置信息，因此配置信息由SessionDiscreption发送，这满足了客户端的要求. 呼叫者发送的SessionDescription称为要约，被呼叫者的响应就是响应. 这种架构称为JSEPweb视频会议，一种JavaScript会话建立协议.

通过WebRTC服务启用聊天消息

由于我知道这不是有用的功能，因此只能在WebRTC上使用文本聊天. 我所做的就是修改信号程序. 当对方要发送短信时，我让他在短信中发送收费信息，一旦他收到了回执，就会将其添加到聊天iframe中.

在其中，我们需要在创建对等连接后添加一个远程流:


var remotevid = document.getElementById('remotevid');
try {
 logg("Creating peer connection");
 var servers = [];
 servers.push({'url':'stun:' + stunServer});
 var pc_config = {'iceServers':servers};
 peerConn = new webkitRTCPeerConnection(pc_config);
 peerConn.onicecandidate = onIceCandidate;
 }
 catch (e) {
 logg("Failed to create PeerConnection, exception:" + e.message);
 }
 peerConn.onaddstream = onRemoteStreamAdded;
 peerConn.onremovestream = onRemoteStreamRemoved;
function onRemoteStreamAdded(event) {
 logg("Added remote stream");
 remotevid.src = window.webkitURL.createObjectURL(event.stream);
}

这个项目很有趣，因为我学到了一些新东西，甚至对实现和尝试从相机流中获取图片感兴趣.

因此，要从相机流中拍照，请创建一个canvas元素:


<canvas id="canvas"></canvas>

web前端开发的视频_web视频会议_网站重构与web标准设计视频教程

我们需要一个按钮来拍照和img标签来设置捕获的图片:


<button id="btn">Take photo</button>
<img src="" id="photo" alt="photo" style="margin-left:90px;">

当然，您必须拥有我们上面学到的视频元素. 然后:


startbutton = document.querySelector('#btn');
startbutton.addEventListener('click', function(ev){
 takepicture();
 ev.preventDefault();
 }, false);
 function takepicture() {
 canvas.width = width;
 canvas.height = height;
 canvas.getContext('2d').drawImage(video, 0, 0, width, height);
 var data = canvas.toDataURL('image/png');
 photo.setAttribute('src', data);
 }