您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Model Center   Code  
会员   
   
 
     
   
 订阅
  捐助
WebRTC介绍及简单应用
 
作者: 天马行空
   次浏览      
 2020-3-4
 
编辑推荐:
文章简单的说明WebRTC实时通信技术介绍,STUN和TURN介绍,对等连接和提议/应答协商,NAT和防火墙穿透,希望对您有所帮助
本文来自于雷锋网,由火龙果软件Delores编辑推荐

WebRTC,即Web Real-Time Communication,web实时通信技术。简单地说就是在web浏览器里面引入实时通信,包括音视频通话等。

WebRTC实时通信技术介绍

WebRTC实现了基于网页的语音对话或视频通话,目的是无插件实现web端的实时通信的能力。

WebRTC提供了视频会议的核心技术,包括音视频的采集、编解码、网络传输、展示等功能,并且还支持跨平台,包括linux、windows、mac、android等。

1. WebRTC三角形

2. WebRTC梯形

3. WebRTC的多方会话

WebRTC支持多个浏览器参与的多方会话或会议会话,要建立这类会话有如下两种模式:

4. WebRTC新功能特性

如何使用WebRTC

WebRTC易于使用,只需极少步骤便可建立媒体会话。有些消息在浏览器和服务器之间流动,有些则直接在两个浏览器(成为对等端)之间流动。

1、建立WebRTC会话

建立WebRTC连接需要如下几个步骤:

获取本地媒体(getUserMedia(),MediaStream API)

在浏览器和对等端(其它浏览器或终端)之间建立对等连接(RTCPeerConnection API)

将媒体和数据通道关联至该连接

交换会话描述(RTCSessionDescription)

浏览器M从Web服务器请求网页

Web服务器向M返回带有WebRTC js的网页

浏览器L从Web服务器请求网页

Web服务器向L返回带有WebRTC js的网页

M决定与L通信,通过M自身的js将M的会话描述对象(offer,提议)发送至Web服务器

Web服务器将M的会话描述对象发送至L上的js

L上的js将L的会话描述对象(answer,应答)发送至Web服务器

Web服务器转发应答至M上的js

M和L开始交互,确定访问对方的最佳方式

完成后,M和L开始协商通信密钥

M和L开始交换语音、视频或数据

WebRTC三角形会话具体的调用流程:

说明:

SDP对象的传输可能是一个来回反复的过程,并且该过程采用的协议并未标准化

WebRTC梯形会话方式具体的调用流程:

说明:

此场景中,浏览器M和L直接交换媒体,只是它们运行的Web服务器不用而已。每个浏览器的会话描述对象都会映射至Jingle[XEP-0166]session-initiate消息和session-accept方法。

媒体介绍

先来看下WebRTC中的本地媒体:

1、WebRTC中的媒体

轨道(MediaStreamTrack,代表设备或录制内容可返回的单一类型的媒体,唯一关联一个“源”,WebRTC不能直接访问或控制“源”,对“源”的一切控制都通过轨道实施;一个“源”可能对应多个轨道对象)

流(MediaStream,轨道对象的集合)

轨道和流的示意如下:

2、捕获本地媒体

如下代码展示了本地媒体的简单获取,并展示:

// 注意getUserMedia()在各浏览器中的区别
// Opera --> getUserMedia
// Chrome --> webkitGetUserMedia
// Firefox --> mozGetUserMedia
navigator.getUserMedia
= navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
// 只获取video:
var constraints = {audio: false, video: true};
var video = document.querySelector("video");
function successCallback(stream) {
// Note: make the returned stream available to
console for inspection
window.stream = stream;
if (window.URL) {
// Chrome浏览器
video.srcObject = stream;
} else {
// Firefox和Opera: 可以直接把视频源设置为stream
video.src = stream;
}
// 播放
video.play();
}
function errorCallback(error){
console.log
("navigator.getUserMedia error: ", error);
}
navigator.getUserMedia
(constraints, successCallback, errorCallback);

运行效果如下:

   
次浏览       
????

HTTP????
nginx??????
SD-WAN???
5G?????
 
????

??????????
IPv6???????
??????????
???????
????

????????
????????
???????????????
??????????