重庆网站建设公司的网站,seo证书考试网站,建设英文品牌网站,家乡的网站设计模板一、基本概念
WebRTC(Web Real-Time Communication#xff0c;网页即时通信)于2011年6月1日开源#xff0c;并被纳入万维网联盟的W3C推荐标准#xff0c;它通过简单API为浏览器和移动应用提供实时通信RTC功能。
1、特点
跨平台#xff1a;可以在Web#xff0c;Android、…一、基本概念
WebRTC(Web Real-Time Communication网页即时通信)于2011年6月1日开源并被纳入万维网联盟的W3C推荐标准它通过简单API为浏览器和移动应用提供实时通信RTC功能。
1、特点
跨平台可以在WebAndroid、IOS、Windows、MacOS、Linux环境运行。
实时传输速度快、延迟低。
免插件无需插件、打开浏览器即可使用。
免费集成了强大的音视频引擎和先进的Codec但仍是免费。
强大打洞能力支持代理、NAT和防火墙穿透技术。
2、应用领域
音视频会议、在线教育、照相机、音乐播放器、共享远程桌面、录制、即时通信工具、P2P网络加速、文件传输工具、游戏、实时人脸识别。
3、整体架构 1Web应用
音视频实时通信应用如视频会议、远程教育、远程协作、实时人脸识别、行程机械手操作等。
2WebAPI
WebAPI是面向第三方开发者的WebRTC标准API ,常用API如下所示
MediaStream媒体数据流、如音频流、视频流等。
RTCPeerConnection: 提供了应用层的调用接口
RTCDataChannel: 传输非音视频数据如文字、图片等
3C API
低层API使用C 语言编写、使用浏览器厂商容易实现WebRTC标准API抽象地对数字信号过程进行处理。
4Session Managerment
一个抽象的会话层、提供会话建立和管理功能该层协议留给应用开发者自定义实现。对于Web应用建议使用WebSocket技术来管理信令Session。信令主要用来转发会话双方的媒体信息和网络信息。
5Transport
此为WevRTC的传输层涉及音视频的数据发送、接收、网络打洞等内容可以通过STUN和ICE组件来建立不同类型间的呼叫连接。
6VoiceEngine
音频引擎是包含一系列音频多媒体处理的框架包括从音频采集到网络传输等整个解决方案。
7VideoEngine
视频处理引擎包含一系列视频处理的整体框架从摄像头采集视频到视频信息网络传输再到视频显示等整个解决方案。
二、WebRTC通话原理
WebRTC通话典型场景就是音视频通话下面简化流程提出主要的步骤。通话原理基本流程如下所示
1、通信原理基本流程图 媒体协商Peer-A与Peer-B通过信令服务器进行媒体协商双方交换的媒体数据由SDPSession Description Protocol描述。
网络协商Peer-A与Peer-B通过STUN服务器获取到各自的网络信息再通过信令服务器转发互相交换各种网络信息。即P2P打洞成功建立直连。
建立连接Peer-A与Peer-B通过直连或TURN中转服务器传输音视频数据。
2、媒体协商
Peer-A和Peer-B都访问中转服务器信令服务器来帮助它们交换SDP数据信息。SDP交换过程如图所示 3、网络协商
通信双方要了解对方的网络情况找到一条通信链路需要做以下二个步骤一是获取本地的外网地址映射二 是通过信令服务器交换网络信息。现实情况是我们计算机都是在局域网中并且有防火墙要进行网络地址转换Network Address Translation NAT其示意图如下所示 NAT技术会保护内网地址的安全性当采用P2P 通信时NAT会阻止外网地址的访问就必须采用NAT穿透技术。其基本思路是借助一个公网IP服务器双方都向公网IP服务器发送IP/PORT网络信息包公网IP服务器向Peer-A发送Peer-B的IP/PORT网络信息包并且向Peer-B发送Peer-A的网络信息包。双方就可以建立连接。穿透技术示意图如下 WebRTC的防火墙穿透技术就是基于上述思路实现采用ICE框架保证RTCPeerConnection能实现NAT穿透。其它概念如下
ICEInteractive Connectivity Esablishment 互动式连接建立是一种框架使各种NAT穿透技术如STUN,TURN实现统一。
STUN是指简单UDP穿透NAT此技术允许位于NAT后的客户端找出自己的公风地址绑定的因特网的端口等信息。这些信息可用于两者建立UDP通信。
TURN是指使用中继穿透NAT是STUN的一个扩展主要添加了中继功能。如两者在特定情况下无法直接通信则需用公网服务器进行数据的转发。
信令服务器公网IP服务器转发彼此的媒体信息和网络信息还可以有其它功能如房间管理、用户列表、用户进入用户退出等。
4、连接建立
大致步骤如下
1连接双方通过第三方服务器交换各自的SDP数据。
2连接双方通过STUN服务器获取各自的NAT结构子网IP和公网IP、端口等信息即Candidate (3) 连接双方通过第三方服务器交换各自的Candidate信息。两者在同一内网直接交换在不同内网通过STUN服务器识别公网的Candidatte进行通信。
4如连接双方仅通过STUN服务器无法通信就需寻求TURN服务器提供的转发服务然后转发形式的Candidate共享对方。
5连接双方向目标IP端口发送报文。
三、访问设备
1、访问设备
WebRTC可以访问设备可以分为物理设备和虚拟设备物理设备包含摄像头、麦克风等设备虚拟设备包含桌面、Canvas画布等设备。浏览器navigator.mediaDevices对象提供了两个主要的API访问这些设备如下表所示 访问设备并获取媒体数据 语法如下所示
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream){/*使用这个stream*/
})
.catch(function(err){/*处理error*/
})参数constraints即为MediaStreamContraints对象指定了请求使用媒体的类型还有每个类型所需要的参数。
参数stream即为MediaStream对象返回的媒体流作为回调函数的参数。
调用成功后可以在回调函数内把媒体流对象赋值给合适的元素然后使用它代码如下
//video为html5中的video标签
video.srcObjectstream
调用失败后catch中的回调函数会被调用MediaStreamError 对象作为唯一参数基于DOMException对象构建错误码描述如下 PermissionDeniedError: 使用媒体数据请求被用户或者系统拒绝。 NotFoundError找不到constraints中指定的媒体类型。
2、示例摄像头
此示例通过打开摄像头熟悉访问设备获取数据并且渲染至视频对象。主要有以下步骤
1定义约束条件
2根据约束条件获取媒体 3成功获取视频流后将其传递给video对象的srcObject属性。 本文示例代码都采用 React的组件 编写访问摄像头示例代码如下所示
import React,{ Component } from react
import {Button,message} from antd
import ../public/styles.css//约束条件
const constraintswindow.constraints{//禁用音频audio: false,//启用视频video: true
};/*** 摄像头使用示例*/
class Camera extends Component {//打开摄像头openCameraasync(e){//根据约束条件获取媒体try {const streamawait navigator.mediaDevices.getUserMedia(constraints);console.log(handleSuccess);this.handleSuccess(stream);} catch(e){this.handleError(e);}}handleSuccess(stream){const videothis.refs[myVideo];const videoTracksstream.getVideoTracks();console.log(通过设置限制条件获取到流 constraints);console.log(使用视频设备 : ${videoTracks[0].label});//使得浏览器能访问到streamwindow.streamstream;//将stream绑定到video标签video.srcObjectstream; }handleError(error){if(error.nameConstraintNotSatisfiedError){message.error(约束条件不满足);const vconstraints.video;//宽高尺寸错误message.error(要求视频的分辨率 ${v.width.exact}x${v.height.exact} 但是设备无法满足);} else if(error.namePermissionDeniedError){message.error(没有摄像头和麦克风使用权限请点击允许按钮);}message.error(getUserMedia错误: ${error.name}, error);}render() {return (div classNamecontainerh1span摄像头示例/span/h1video classNamevideo refmyVideo playslnlinetrue autoPlay/videoButton typeprimary onClick{this.openCamera}打开摄像头/Button/div)}
}export default Camera
3、其它设备
1麦克风 使用API getUserMedia() 约束条件 const constraintswindow.constraints{//启用音频audio : true,//禁用视频video: false
} 页面渲染对象audio refaudio controls autoPlay/audio 屏幕 访问API getDisplayMedia() 约束条件 video: true 页面渲染对象 video refvideo autoPlay playsInline/video
