ToB企服应用市场:ToB评测及商务社交产业平台

标题: WebRTC简介及使用 [打印本页]

---

作者: 半亩花草    时间: 2024-6-20 16:22
标题: WebRTC简介及使用

---

前言

WebRTC 只是一个媒体引擎，上面有一个 JavaScript API，以是每个人都知道怎样使用它（尽管浏览器实现仍旧各不相同），本文对 WebRTC（网页实时通信）的相关内容举行扼要介绍。

---

一、WebRTC 简介

WebRTC，名称源自网页实时通信（Web Real-Time Communication）的缩写，是一个支持网页浏览器举行实时语音通话或视频谈天的技术，是谷歌 2010 年以 6820 万美元收购 Global IP Solutions 公司而获得的一项技术。
WebRTC 提供了实时音视频的核心技术，包罗音视频的收罗、编解码、网络传输、表现等功能，并且还支持跨平台：windows，linux，mac，android。
固然 WebRTC 的目的是实现跨平台的 Web 端实时音视频通讯，但因为核心层代码的 Native、高风致和内聚性，开辟者很容易举行除 Web 平台外的移殖和应用。很长一段时间内 WebRTC 是业界能免费得到的唯一高风致实时音视频通讯技术。
1、webrtc 是什么

浏览器为音视频获取传输提供的接口
2、webrtc 可以做什么

浏览器端到端的举行音视频谈天、直播、内容传输
3、数据传输需要些什么

• IP、端口、协议
  
• 客户端、 服务端
  

4、SDP 协议

有关 SDP 相关的内容可以参考我之前的博文：RTSP协议抓包及讲解

sdp 协议：SDP 信息相称于 PC 的名片，主要是协商两个端点在传输数据的时候一些配置
数据格式：key=value
SDP 协商使用的是哀求和响应这两个模型（offer、answer），Offerer 发给 Answerer 的哀求消息称为哀求 offer， 内容包罗媒体流类型、各个媒体流使用的编码集，以及将要用于接收媒体流的 IP 和端口。Answerer 收到 offer 之后，回复给 Offerer 的消息称为响应，内容包罗要使用的媒体编码，是否接收该媒体流以及告诉 Offerer 其用于接收媒体流的 IP 和端口。
在 WebRTC 毗连流程中，在创建 PeerConnectionA 后，就会去创建一个 offerSDP，并设置为 localSDP。通过 signaling 发送 PeerB。peerB 收到 peerA 的 SDP 后，把收到的 SDP 设置为 RemoteSDP。在设置完成后，PeerB 再天生 AnswerSDP，设置为 localSDP，通过 signaling 通道发送给 PeerA，PeerA 收到后 AnswerSDP 后，设置为 RemoteSDP，以上流程完成了 SDP 的交换。
5、STUN

答应应用步伐发现本身和公网之间的中间件类型，同时也能答应应用步伐发现本身被 NAT 分配的公网 IP，从而替代位于应用层中的私网地址，达到 NAT 穿透的目的
6、TURN

通过修改应用层中的私网地址达到 NAT 穿透
也是解决内网穿透的，这里是 stun 不能工作的时候采取的办法
相称于一个中转器即 peerA->TURN-PeerB
7、ICE

交互式毗连的建立
把 STUN 和 TURN 结合在一起的一个标准叫 ICE（不是协议， 是整合了 STUN，TURN 的框架）。使用 STUN 和 TURN 为毗连提供精确的路由，然后探求一系列双方可用地址按顺序测试地址，直到找到双方都可用的组合。
二、WebRTC 团体框架

• 绿色部分是 WebRTC 核心部分（核心库）
  
  
  
  • 核心层，第一层 C++ API：提供给外面的接口，最主要的是（PeerConnedtion 对等毗连）
    
  • 核心层，第二层 Session：上下文管理层（音视频）
    
  • 核心层，第三层【最紧张的部分】
    
    
    
    • 音视频引擎 ：编解码；音频缓冲 BUFFER 防止音频网络抖动 NetEQ；覆信消除；降噪；静音检测；
      
    • 视频引擎 ：编解码；jitter buffer 防止视频网络抖动；图像处置惩罚增强；
      
    • 传输：SRTP 加密后的 RTP；多路复用；P2P（STUN+TURN+ICE)
      
    
    
  • 核心层，第四层，硬件相关层：音视频收罗；网络 IO
    
  
  
• 紫色部分是 JS 提供的 API（应用层）
  
  
  
  • 团体是应用层调用核心层
    
  
  

三、WebRTC 功能模块

WebRTC 实现了基于网页的视频集会，标准是 WHATWG 协议，目的是通过浏览器提供简朴的 javascript 就可以达到实时通讯（Real-Time Communications (RTC)）本领。
1、视频相关

①、视频收罗—video_capture

源代码在 webrtc\modules\video_capture\main 目录下， 包含接口和各个平台的源代码。
在 windows 平台上，WebRTC 采用的是 dshow 技术，来实现罗列视频的设备信息和视频数据的收罗，这意味着可以支持大多数的视频收罗设备；对那些需要单独驱动步伐的视频收罗卡（比如海康高清卡）就无能为力了。
视频收罗支持多种媒体类型，比如 I420、YUY2、RGB、UYUY 等，并可以举行帧大小和帧率控制。
②、视频编解码—video_coding

源代码在 webrtc\modules\video_coding 目录下。
WebRTC 采用 I420/VP8 编解码技术。VP8 是 google 收购 ON2 后的开源实现，并且也用在 WebM 项目中。VP8 能以更少的数据提供更高质量的视频，特别适合视频集会如许的需求。
③、视频加密—video_engine_encryption

视频加密是 WebRTC 的 video_engine 一部分，相称于视频应用层面的功能，给点对点的视频双方提供了数据上的安全保证，可以防止在 Web 上视频数据的泄漏。
视频加密在发送端和接收端举行加解密视频数据，密钥由视频双方协商，代价是会影响视频数据处置惩罚的性能；也可以不使用视频加密功能，如许在性能上会好些。
④、视频媒体文件—media_file

源代码在 webrtc\modules\media_file 目录下。
该功能是可以用本地文件作为视频源，有点类似虚拟摄像头的功能；支持的格式有 Avi，另外 WebRTC 还可以录制音视频到本地文件，比较实用的功能。
⑤、视频图像处置惩罚—video_processing

源代码在 webrtc\modules\video_processing 目录下。
视频图像处置惩罚针对每一帧的图像举行处置惩罚，包罗明暗度检测、颜色增强、降噪处置惩罚等功能，用来提升视频质量。
⑥、视频表现—video_render

源代码在 webrtc\modules\video_render 目录下。
在 windows 平台，WebRTC 采用 direct3d9 和 directdraw 的方式来表现视频，只能如许，必须如许。
⑦、网络传输与流控

对于网络视频来讲，数据的传输与控制是核心价值。WebRTC 采用的是成熟的 RTP/RTCP 技术。
2、音频相关

WebRTC 的音频部分，包含设备、编解码（iLIBC/iSAC/G722/PCM16/RED/AVT、 NetEQ）、加密、声音文件、声音处置惩罚、声音输出、音量控制、音视频同步、网络传输与流控（RTP/RTCP）等功能。
①、音频设备—audio_device

源代码在 webrtc\modules\audio_device\main 目录下， 包含接口和各个平台的源代码。
在 windows 平台上，WebRTC 采用的是 Windows Core Audio 和 Windows Wave 技术来管理音频设备，还提供了一个混音管理器。
使用音频设备，可以实现声音输出，音量控制等功能。
②、音频编解码—audio_coding

源代码在 webrtc\modules\audio_coding 目录下。
WebRTC 采用 iLIBC/iSAC/G722/PCM16/RED/AVT 编解码技术。
WebRTC 还提供 NetEQ 功能—抖动缓冲器及丢包补偿模块，能够提高音质，并把耽误减至最小。
另外一个核心功能是基于语音集会的混音处置惩罚。
③、声音加密—voice_engine_encryption

和视频一样， WebRTC 也提供声音加密功能。
④、声音文件

该功能是可以用本地文件作为音频源，支持的格式有 Pcm 和 Wav。
同样，WebRTC 也可以录制音频到本地文件。
⑤、声音处置惩罚—audio_processing

源代码在 webrtc\modules\audio_processing 目录下。
声音处置惩罚针对音频数据举行处置惩罚，包罗回声消除（AEC）、AECM（AEC Mobile）、主动增益（AGC）、降噪（NS）、静音检测（VAD）处置惩罚等功能， 用来提升声音质量。
⑥、网络传输与流控

和视频一样，WebRTC 采用的是成熟的 RTP/RTCP 技术。
四、WEBRTC 调用本地摄像头

WebRTC 是“ 网络实时通信” （ Web Real Time Communication）的缩写，它主要用来让浏览器实时获取和交换视频、音频和数据。
1、确认本地设备

列出 Windows 系统上可用的音视频设备

1. ffmpeg -list_devices true -f dshow -i dummy

复制代码

• -list_devices true：这是一个选项参数，用于告诉 FFmpeg 列出可用的设备。
  
• -f dshow：这是另一个选项参数，用于指定使用 DirectShow 框架来访问设备。
  
• -i dummy：这是输入参数，dummy 是一个虚拟设备名称，用于触发设备列表的输出。
  

可以看到笔记本电脑只有个前置摄像头，未外接 USB 摄像头
下面命令使用前置摄像头举行捕捉画面：

1. ffplay -f dshow -i video="Integrated Camera"

复制代码

2、WebRTC 所用 API

WebRTC 共分三个 API：

• MediaStream（又称 getUserMedia）
  
• RTCPeerConnection
  
• RTCDataChannel
  

getUserMedia 主要用于获取视频和音频信息，后两个 API 用于浏览器之间的数据交换。
①、getUserMedia

起首，查抄浏览器是否支持 getUserMedia 方法。

1. navigator.getUserMedia ||
2. (navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia
3. || navigator.msGetUserMedia);
4. if (navigator.getUserMedia) {
5. //do something
6. } else {
7. console.log('your browser not support getUserMedia');
8. }

复制代码

Chrome21 、Opera 18 和 Firefox 17 支 持 该 方 法 ，目 前 IE 还 不 支 持 ，上 面 代 码 中 的 msGetUserMedia 只是为了确保未来的兼容。
getUserMedia(streams, success, error); 含义如下：

• streams：表现包罗哪些多媒体设备的对象
  
• success：回调函数，获取多媒体设备成功时调用
  
• error：回调函数，获取多媒体设备失败时调用
  

用法如下：

1. navigator.getUserMedia({
2. video: true,
3. audio: true
4. }, onSuccess, onError);

复制代码

上面的代码用来获取摄像头和麦克风的实时信息。
假如网页使用了 getUserMedia，浏览器就会询问用户，是否允许提供信息。假如用户拒绝，就调用回调函数 onError。
发生错误时，回调函数的参数是一个 Error 对象，它有一个 code 参数，取值如下：

• PERMISSION_DENIED：用户拒绝提供信息。
  
• NOT_SUPPORTED_ERROR：浏览器不支持指定的媒体类型。
  
• MANDATORY_UNSATISHIED_ERROR：指定的媒体类型未收到媒体流。
  

②、展示摄像头图像

将用户的摄像头拍摄的图像展示在网页上，需要先在网页上放置一个 video 元素。图像就展示在这个元素中。

1. <video id="webcam"></video>

复制代码

然后， 用代码获取这个元素。

1. function onSuccess(stream) {
2.         var video = document.getElementById('webcam');
3. //more code
4. }

复制代码

最后，将这个元素的 src 属性绑定命据流，摄像头拍摄的图像就可以表现了。

1. function onSuccess(stream) {
2.         var video = document.getElementById('webcam');
3.         if (window.URL) {
4.                 video.src = window.URL.createObjectURL(stream);
5.         } else {
6.                 video.src = stream;
7.         }
8.         video.autoplay = true;
9.         //or video.play();
10. }

复制代码

它的主要用途是让用户使用摄像头为本身照相。
3、Html 与 js 代码

webrtcdemo.html

1. <!DOCTYPE html>
2. <html >
3. <head>
4.     <meta charset="UTF-8">
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
7.     <title>Document</title>
8. </head>
9. <body>
10.     <div>
11.         <button id="start">开始</button>
12.         <button id="stop">停止</button>
13.     </div>
14.     <div>
15.         <video autoplay controls id="id__stream"></video>
16.     </div>
17.     <script>
18.         // 只获取视频
19.         let constraints = {audio: false, video: true};
20.         let startBtn = document.getElementById('start')
21.         let stopBtn  = document.getElementById('stop')
22.         let videoShowControl = document.getElementById('id__stream')
23.         startBtn.onclick = function() {
24.             navigator.getUserMedia(constraints, function(stream) {
25.                 videoShowControl.srcObject = stream;
26.                 window.stream = stream;
27.             }, function(err) {
28.                 console.log(err)
29.             })
30.         }
31.         stopBtn.onclick = function() {
32.             videoShowControl.pause();
33.         }
34.     </script>
35. </body>
36. </html>

复制代码

4、WEBRTC 调用本地摄像头

双击 webrtcdemo.html 可以看到下图界面，点击开始

点击答应

可以看到电脑摄像头捕捉到的图像

---

我的qq：2442391036，欢迎交换！

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4