WebRTC简介及使用

文章目录

  • 前言
  • 一、WebRTC 简介
    • 1、webrtc 是什么
    • 2、webrtc 可以做什么
    • 3、数据传输需要些什么
    • 4、SDP 协议
    • 5、STUN
    • 6、TURN
    • 7、ICE
  • 二、WebRTC 整体框架
  • 三、WebRTC 功能模块
    • 1、视频相关
      • ①、视频采集---video_capture
      • ②、视频编解码---video_coding
      • ③、视频加密---video_engine_encryption
      • ④、视频媒体文件---media_file
      • ⑤、视频图像处理---video_processing
      • ⑥、视频显示---video_render
      • ⑦、网络传输与流控
    • 2、音频相关
      • ①、音频设备---audio_device
      • ②、音频编解码---audio_coding
      • ③、声音加密---voice_engine_encryption
      • ④、声音文件
      • ⑤、声音处理---audio_processing
      • ⑥、网络传输与流控
  • 四、WEBRTC 调用本地摄像头
    • 1、确认本地设备
    • 2、WebRTC 所用 API
      • ①、getUserMedia
      • ②、展示摄像头图像
    • 3、Html 与 js 代码
    • 4、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 系统上可用的音视频设备

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

在这里插入图片描述
可以看到笔记本电脑只有个前置摄像头,未外接 USB 摄像头

下面命令使用前置摄像头进行捕捉画面:

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

在这里插入图片描述

2、WebRTC 所用 API

WebRTC 共分三个 API:

  • MediaStream(又称 getUserMedia)
  • RTCPeerConnection
  • RTCDataChannel

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

①、getUserMedia

首先,检查浏览器是否支持 getUserMedia 方法。

navigator.getUserMedia ||
(navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia
|| navigator.msGetUserMedia);
if (navigator.getUserMedia) {
//do something
} else {
console.log('your browser not support getUserMedia');
}

Chrome21 、Opera 18 和 Firefox 17 支 持 该 方 法 ,目 前 IE 还 不 支 持 ,上 面 代 码 中 的 msGetUserMedia 只是为了确保将来的兼容。

getUserMedia(streams, success, error); 含义如下:

  • streams:表示包括哪些多媒体设备的对象
  • success:回调函数,获取多媒体设备成功时调用
  • error:回调函数,获取多媒体设备失败时调用

用法如下:

navigator.getUserMedia({
video: true,
audio: true
}, onSuccess, onError);

上面的代码用来获取摄像头和麦克风的实时信息。

如果网页使用了 getUserMedia,浏览器就会询问用户,是否许可提供信息。如果用户拒绝,就调用回调函数 onError。

发生错误时,回调函数的参数是一个 Error 对象,它有一个 code 参数,取值如下:

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

②、展示摄像头图像

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

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

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

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

最后,将这个元素的 src 属性绑定数据流,摄像头拍摄的图像就可以显示了。

function onSuccess(stream) {var video = document.getElementById('webcam');if (window.URL) {video.src = window.URL.createObjectURL(stream);} else {video.src = stream;}video.autoplay = true;//or video.play();
}

它的主要用途是让用户使用摄像头为自己拍照。

3、Html 与 js 代码

webrtcdemo.html

<!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div><button id="start">开始</button><button id="stop">停止</button></div><div><video autoplay controls id="id__stream"></video></div><script>// 只获取视频let constraints = {audio: false, video: true}; let startBtn = document.getElementById('start')let stopBtn  = document.getElementById('stop')let videoShowControl = document.getElementById('id__stream')startBtn.onclick = function() {navigator.getUserMedia(constraints, function(stream) {videoShowControl.srcObject = stream;window.stream = stream;}, function(err) {console.log(err)})}stopBtn.onclick = function() {videoShowControl.pause();}</script>
</body>
</html>

4、WEBRTC 调用本地摄像头

双击 webrtcdemo.html 可以看到下图界面,点击开始
在这里插入图片描述
点击允许
在这里插入图片描述
可以看到电脑摄像头捕捉到的图像
在这里插入图片描述


总结

提示:这里对文章进行总结:

例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/143090.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

保护数字前沿:下一代防火墙如何塑造网络安全的未来

下一代防火墙通过提供先进的威胁检测、精细控制和云安全功能&#xff0c;正在重塑网络安全的未来。随着数字环境的不断发展&#xff0c;组织必须采用这些创新解决方案来保护其数字资产并维护安全的数字前沿。 在当今互联的世界中&#xff0c;网络威胁变得越来越复杂&#xff0c…

安全认证 | CISP和CISSP区别是什么?考哪个好?

随着信息安全愈发受到重视&#xff0c;信息安全领域的证书也越来越多&#xff0c;其中比较权威的如CISP和CISSP证书是不少人的选择。 那么这两者之间到底有什么区别&#xff1f;究竟考哪个会比较好呢&#xff1f; 01 CISP是什么 CISP指的是注册信息安全专业人员&#xff0c;系…

阿里云ACK(Serverless)安装APISIX网关及APISIX Ingress Controller

在k8s上安装apisix全家&#xff0c;通过helm安装很简单&#xff0c;但是会遇到一些问题。 安装 首先登录阿里云控制台&#xff0c;在ACK集群详情页&#xff0c;进入CloudShell&#xff0c;执行下面helm命令安装apisix、apisix-ectd、apisix-dashboard和apisix-ingress-contro…

第1关:构造函数与析构函数的实现

题目&#xff1a;根据.h写出.cpp 考点&#xff1a; 1.链表的默认构造&#xff0c; 拷贝构造&#xff0c;传参构造以及析构函数等。 代码&#xff1a; /********** BEGIN **********/ #include <cstdlib> #include <cstring> #include "LinkedList.h&…

ARM PMU

PMU单元概览 ARM PMU概要 PMU作为一个扩展功能&#xff0c;是一种非侵入式的调试组件。 对PMU寄存器的访问可以通过CP15协处理器指令和Memory-Mapped地址。 基于PMUv2架构&#xff0c;A7处理器在运行时可以收集关于处理器和内存的各种统计信息。对于处理器来说这些统计信息中…

【中间件】ElasticSearch:ES的基本概念与基本使用

ElasticSearch ElasticSearch基本概念 Index索引、Type类型&#xff0c;类似于数据库中的数据库和表&#xff0c;我们说&#xff0c;ES的数据存储在某个索引的某个类型中&#xff08;某个数据库的某个表中&#xff09;&#xff0c;Document文档&#xff08;JSON格式&#xff…

AI:83-基于深度学习的手势识别与实时控制

🚀 本文选自专栏:人工智能领域200例教程专栏 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的代码,详细讲解供大家学习,希望可以帮到大家。欢迎订阅支持,正在不断更新中,…

Zookeeper篇---第十二篇

系列文章目录 文章目录 系列文章目录一、说说 Zookeeper 的 CAP 问题上做的取舍?二、watch 监听为什么是一次性的?一、说说 Zookeeper 的 CAP 问题上做的取舍? 一致性 C:Zookeeper 是强一致性系统,为了保证较强的可用性,“一半以上成功即成功”的数据同 步方式可能会导致…

CSDN每日一题学习训练——Java版(分数到小数、罗马数字转整数、x 的平方根)

版本说明 当前版本号[20231114]。 版本修改说明20231114初版 目录 文章目录 版本说明目录分数到小数题目解题思路代码思路参考代码 罗马数字转整数题目解题思路代码思路参考代码 x 的平方根题目解题思路代码思路参考代码 分数到小数 题目 给定两个整数&#xff0c;分别表示…

【Linux奇遇记】我和Linux的初次相遇

&#x1f308;个人主页: Aileen_0v0 &#x1f525;系列专栏:Linux奇遇记系列专栏&#x1f4ab;"没有罗马,那就自己创造罗马~" 目录 前端和后端的介绍 1.前端 2.后端 3.前后端区别 Linux在前后端开发中的角色 如何学习Linux 去进行程序开发 Linux的常见根目…

爆款元服务!教你如何设计高使用率卡片

元服务的概念相信大家已经在 HDC 2023 上有了很详细的了解&#xff0c;更轻便的开发方式&#xff0c;让开发者跃跃欲试。目前也已经有很多开发者开发出了一些爆款元服务&#xff0c;那么如何让你的元服务拥有更高的传播范围、更高的用户使用率和更多的用户触点呢&#xff1f;设…

Git取消git add命令

三种方法来取消git add命令-git-PHP中文网 亲测有效。

MySQL 索引事务

MySQL 索引&事务 文章目录 MySQL 索引&事务1. 索引1.1 概念1.2 作用1.3 使用场景1.4 使用 2. 事务2.1 为什么使用事务2.2 事务概念2.3 事务的特性2.4 使用 1. 索引 1.1 概念 索引(index)是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针。可以对表中的…

学好Python-新手小白如何做?

新手小白如何学好Python?有哪些参考方法吗?这是一个老生常谈的话题了。今天为大家带来两位前辈的分享&#xff0c;他们给出了非常实用的方法和思路&#xff0c;希望对你有所帮助。 1、多练&#xff0c;两个字&#xff1a;多练 如果真的要说方法可以参考如下&#xff1a; ①…

排查线程阻塞问题

案例代码 package first;import java.util.concurrent.TimeUnit;public class DeadLock {private static volatile Object lock new Object();public static void main(String[] args) {new Thread(() -> {test1();}).start();new Thread(() -> {test2();}).start();}p…

Spring 推断构造方法

文章目录 内容总结实例化 内容总结 实例化 Spring 自行创建 Bean 的规则如下 默认使用无参构造方法, 只有一个有参时用有参, 有多个有参时报错多个有参, 且其中一个上有 Autowired 注解: 用有 Autowired 注解的那个, 且 Spring 自动注入参数值. 注意 Primary/Order/Ordered …

[量化投资-学习笔记015]Python+TDengine从零开始搭建量化分析平台-量化知识点汇总

之前的章节介绍了多个技术分析指标&#xff0c;以下进行一个简单的总结。 看过之前章节的同学就可以不用打开了。 技术指标 MAEMAMACDCCIATRKDJ MA 最基础的技术指标&#xff0c;对一段周期内的收盘价进行简单平均&#xff0c;是一切指标的基础。 def calc_ma(period,ma):ma_…

JAVA中Integer的拆箱与装箱

Integer 字符串与数值 的转换 String str"1000";int i1000;//int --> String//方式一 String s1i"";//int类型加上一个空字符串 返回就是字符串System.out.println(s1);//方式二String s2String.valueOf(i); //调用String的方法valueOf, 将int类型变…

centos下安装mysql8版本

1、如果服务器没有wget&#xff0c;先下载wget工具 sudo yum install wget 2、下载指定mysql版本的tar包 sudo wget https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.21-1.el7.x86_64.rpm-bundle.tar 3、解压tar包 sudo tar -xvf mysql-8.0.21-1.el7.x86_64.rpm…

《QT从基础到进阶·二十四》按钮组QButtonGroup,单选框QRadioButton和多选框QCheckBox

1、按钮组QButtonGroup 如果有多个单选按钮&#xff0c;可以统一放进一个按钮组。 图中有三个单选按钮放进了一个QGroupBox,并且设置了水平布局&#xff0c;现在要将这三个单选按钮放进一个按钮组&#xff0c;之前的想法是先把三个按钮加入按钮组&#xff0c;再把按钮组放进QG…