WebRTC音视频开发读书笔记(一)

一、基本概念

WebRTC(Web Real-Time Communication,网页即时通信)于2011年6月1日开源,并被纳入万维网联盟的W3C推荐标准,它通过简单API为浏览器和移动应用提供实时通信RTC功能。

1、特点

跨平台:可以在Web,Android、IOS、Windows、MacOS、Linux环境运行。

实时传输:速度快、延迟低。

免插件:无需插件、打开浏览器即可使用。

免费:集成了强大的音视频引擎和先进的Codec,但仍是免费。

强大打洞能力:支持代理、NAT和防火墙穿透技术。

2、应用领域

音视频会议、在线教育、照相机、音乐播放器、共享远程桌面、录制、即时通信工具、P2P网络加速、文件传输工具、游戏、实时人脸识别。

3、整体架构:

(1)Web应用

音视频实时通信应用,如视频会议、远程教育、远程协作、实时人脸识别、行程机械手操作等。

(2)WebAPI

WebAPI是面向第三方开发者的WebRTC标准API ,常用API如下所示:

MediaStream:媒体数据流、如音频流、视频流等。

RTCPeerConnection: 提供了应用层的调用接口

RTCDataChannel:: 传输非音视频数据,如文字、图片等

(3)C++ API

低层API使用C++ 语言编写、使用浏览器厂商容易实现WebRTC标准API,抽象地对数字信号过程进行处理。

(4)Session Managerment

一个抽象的会话层、提供会话建立和管理功能,该层协议留给应用开发者自定义实现。对于Web应用,建议使用WebSocket技术来管理信令Session。信令主要用来转发会话双方的媒体信息和网络信息。

(5)Transport

此为WevRTC的传输层,涉及音视频的数据发送、接收、网络打洞等内容,可以通过STUN和ICE组件来建立不同类型间的呼叫连接。

(6)VoiceEngine

音频引擎是包含一系列音频多媒体处理的框架,包括从音频采集到网络传输等整个解决方案。

(7)VideoEngine

视频处理引擎,包含一系列视频处理的整体框架,从摄像头采集视频到视频信息网络传输再到视频显示等整个解决方案。

二、WebRTC通话原理

WebRTC通话典型场景就是音视频通话,下面简化流程,提出主要的步骤。通话原理基本流程如下所示:

1、通信原理基本流程图

媒体协商:Peer-A与Peer-B通过信令服务器进行媒体协商,双方交换的媒体数据由SDP(Session 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穿透。其它概念如下:

ICE(Interactive 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.srcObject=stream

调用失败后,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 constraints=window.constraints={//禁用音频audio: false,//启用视频video: true
};/*** 摄像头使用示例*/
class Camera extends Component {//打开摄像头openCamera=async(e)=>{//根据约束条件获取媒体try {const stream=await navigator.mediaDevices.getUserMedia(constraints);console.log('handleSuccess');this.handleSuccess(stream);} catch(e){this.handleError(e);}}handleSuccess=(stream)=>{const video=this.refs['myVideo'];const  videoTracks=stream.getVideoTracks();console.log('通过设置限制条件获取到流 ' + constraints);console.log(`使用视频设备 : +${videoTracks[0].label}`);//使得浏览器能访问到streamwindow.stream=stream;//将stream绑定到video标签video.srcObject=stream;  }handleError=(error)=>{if(error.name==='ConstraintNotSatisfiedError'){message.error('约束条件不满足');const v=constraints.video;//宽高尺寸错误message.error(`要求视频的分辨率 ${v.width.exact}x${v.height.exact} 但是设备无法满足`);} else if(error.name==='PermissionDeniedError'){message.error('没有摄像头和麦克风使用权限,请点击允许按钮');}message.error(`getUserMedia错误: ${error.name}`, error);}render() {return (<div className='container'><h1><span>摄像头示例</span></h1><video  className='video'  ref='myVideo'  playslnline="true" autoPlay></video><Button type='primary' onClick={this.openCamera}>打开摄像头</Button></div>)}
}export default Camera

3、其它设备

(1)麦克风

      使用API: getUserMedia()

     约束条件:

          

const constraints=window.constraints={//启用音频audio : true,//禁用视频video: false
}

  页面渲染对象:<audio ref='audio' controls autoPlay></audio>

    (2)屏幕

             访问API:   getDisplayMedia()

             约束条件: {video: true}

            页面渲染对象: <video  ref='video'  autoPlay  playsInline></video>

   

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

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

相关文章

C# VisionPro 海康相机SDK源代码

运行界面如下所时&#xff1a; 实时图像效果如下&#xff1a; Winform窗体代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Fo…

LabVIEW光纤管道泄漏检测系统

光纤管道泄漏定位系统利用干涉型光纤传感器和数据采集卡进行信号获取与处理&#xff0c;实现了高灵敏度的泄漏点定位。通过软件对泄漏信号进行实时降噪处理和数据库管理&#xff0c;提高了系统的自动化和智能化水平。 项目背景&#xff1a; 长输管道在石油、天然气等行业中发挥…

XSS和DOM破坏案例

XSS案例 环境地址&#xff1a;XSS Game - Learning XSS Made Simple! | Created by PwnFunction 1.Ma Spaghet! 源码&#xff1a; <!-- Challenge --> <h2 id"spaghet"></h2> <script>spaghet.innerHTML (new URL(location).searchParam…

Python爬虫——某网站的视频数据

一、选题背景 1.背景 随着大数据时代的来临&#xff0c;网络爬虫在互联网中的地位将越来越重要。互联网中的数据是海量的&#xff0c;如何自动高效地获取互联网中我们感兴趣的信息并为我们所用是一个重要的问题&#xff0c;而爬虫技术就是为了解决这些问题而生的。对于身为数据…

【业务场景实战】你知道布隆过滤器怎么用吗?

布隆过滤器想必大家都听过&#xff0c;背过Redis面试题的兄弟应该都知道&#xff0c;布隆过滤器是解决缓存穿透问题的一种方法。但可能很少用过 布隆过滤器主要是为了解决海量数据的存在性问题。对于海量数据中判定某个数据是否存在且容忍轻微误差这一场景&#xff08;比如缓存…

03 网络编程 TCP传输控制协议

目录 1、TCP基本特征 2、TCP通信流程基本原理 &#xff08;1&#xff09;基本原理 &#xff08;2&#xff09;TCP通信代码实现 &#xff08;3&#xff09;核心API解析 1&#xff09;地址绑定--bind 2)设置监听-listen 3)等待连接请求-accept-产生一个已连接套接字 4&a…

Transformer2

1.编解码 外国人来到中国&#xff0c;是如何知晓“梨”的中文&#xff1f; 相同的词&#xff0c;上下文应该都是相关的&#xff0c;又因为是计算机&#xff0c;所以需要将语义关系码进行数字化&#xff0c;这些数字需要体现出语义关系。 1.编解码的两个标准 编解码的两个标准包…

复习之 java 锁

裁员在家&#xff0c;没有面试机会&#xff0c;整理整理面试知识点吧&#xff01; 不得不知道的java 锁 Java 中&#xff0c;提供了两种方式来实现同步互斥访问&#xff08;也就是锁&#xff09;&#xff1a;synchronized 和 Lock 多线程编程中&#xff0c;有可能会出现多个线…

基于YOLOv8的缺陷检测任务模型训练

文章目录 一、引言二、环境说明三、缺陷检测任务模型训练详解3.1 PCB数据集3.1.1 数据集简介3.1.2 数据集下载3.1.3 构建yolo格式的数据集 3.2 基于ultralytics训练YOLOv83.2.1 安装依赖包3.2.2 ultralytics的训练规范说明3.2.3 创建训练配置文件3.2.4 下载预训练模型3.2.5 训练…

招聘|头部云厂商招 PG 核心骨干 DBA【上海】

我们的招聘专区又回来了&#xff01;&#x1f3c3; Bytebase 作为先进的数据库 DevOps 团队协同工具 &#x1f527;&#xff0c;用户群里汇聚了 &#x1f497; 业界优秀的 DBA&#xff0c;SRE&#xff0c;运维的同学们 &#x1f31f;。 上周用户群里有小伙伴发招聘信息 &…

webrtc学习笔记1

WebRTC开发环境 配置vscode 安装插件 Prettier Code Formatter 使用 Prettier 来统一代码风格&#xff0c;当保存 HTML/CSS/JavaScript 文件时&#xff0c;它会自动调整代码格式。 Live Server&#xff1a;在本地开发环境中&#xff0c;实时重新加载(reload)页面。 第一个简…

QT:Telnet客户端与服务器的创建

客户端 telnetClient类 #ifndef TELNETCLIENT_H #define TELNETCLIENT_H#include <QObject> #include <QTcpSocket>class TelnetClient : public QObject {Q_OBJECTpublic:explicit TelnetClient(QObject *parent nullptr);~TelnetClient();// 连接到指定的主机…

启发式算法之模拟退火算法

文章目录 1. 模拟退火算法概述1.1 算法起源与发展1.2 算法基本原理 2. 算法实现步骤2.1 初始化过程2.2 迭代与降温策略 3. 模拟退火算法的优化策略3.1 冷却进度表的设计3.2 参数调整与策略 4. 模拟退火算法的应用领域4.1 组合优化问题4.1.1 旅行商问题&#xff08;TSP&#xff…

YOLO好像也没那么难?

“学YOLO的念头是想整个游戏外挂&#xff01;” 目录 基本原理 模型推理 IOU交并比 NMS非极大值抑制 模型训练 损失函数LOSS 代码实现 YOLO学习渠道 基本原理 模型推理 学习一个新的神经网络结构&#xff0c;作者认为整明白输入和输出是怎么回事就OK了&#xff0c;至于…

HTML静态网页成品作业(HTML+CSS)——安徽宣笔设计制作(5个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有6个页面。 二、作品演示 三、代…

回调函数,字符函数,字符串函数

前言&#xff1a;上一趴我们学习了指针。那么今天我们来学习新的知识&#xff0c;回调函数&#xff0c;字符函数&#xff0c;字符串函数。 1 回调函数 什么是回调函数呢&#xff1f;回调函数就是通过函数指针调用的函数。 如果你把函数的指针&#xff08;地址&#xff09;作…

【Docker系列】Docker 容器时区设置指南

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

尚硅谷MYSQL(5-6章)

排序和分页 排序 如果没有使用排序操作的话 查询出来的数据是按添加的顺序排序的 ORDER BY是来进行排序的 后面可以添加ASC升序 DESC降序 如果后面没有显示指明排序的方式的话 则默认按照升序排序 where中不能使用列的别名 我们在使用sql语句的时候 她的执行顺序不是从第一…

FastCopy文件快速复制v5.7.15

软件介绍 FastCopy文件快速复制工具。Windows平台上最快的文件复制、删除软件&#xff01;功能强劲&#xff0c;性能优越&#xff01;它是源于日本的高效文件复制加速软件&#xff0c;支持拖拽操作&#xff0c;三种不同HDD模式&#xff1b;支持通配符&#xff0c;任务管理/命令…

微信小程序保存图片到相册

申请权限 代码如下 wx.downloadFile({url: image, //仅为示例&#xff0c;并非真实的资源success(res) {// 只要服务器有响应数据&#xff0c;就会把响应内容写入文件并进入 success 回调&#xff0c;业务需要自行判断是否下载到了想要的内容if (res.statusCode 200) {consol…