一、WebRTC的由来

  • 对于前端开发小伙伴而言，如果用 JavaScript 做音视频处理

  • 在以前是不可想象的，因为首先就要考虑浏览器的性能是否跟得上音视频的采集

  • 但是 Google 作为国际顶尖科技公司，就喜欢做一些常人无法想象的事情

  • 2011 年，Google 创立了 WebRTC 项目，其愿景就是可以在浏览器之间快速地实现音视频通信。

  • 随着时间的发展，在浏览器之间进行实时音视频通信已经已经变很成熟了

二、1对1音视频通话结构

  • 从上图结构图可以看出，1对1的视频通话结构大体上可以分为四个部分

  • 两个 WebRTC 终端：这里可以看成是两个浏览器，主要负责音视频采集、编解码、NAT 穿越、音视频数据传输

  • Signal（信令）服务器：负责信令处理，如点击静音，关闭摄像头，进入房间等指令操作

  • STUN/TURN 服务器：负责获取 WebRTC 终端在公网的 IP 地址，以及 NAT 穿越失败后的数据中转

三、浏览器同时采集音视频

  • 浏览器中采集音视频设备非常简单

  • 只需要使用 getUserMedia(constraints) 方法即可

  • 传入的 constraints 是配置参数，可以单独配置是否采集音视频

  • 但是IE8以下的浏览器不兼容该视频采集方法

// 同时采集音视和视频

const mediaStreamContrains = {

 	video: true,

 	audio: true

};

var promise = navigator.mediaDevices.getUserMedia(mediaStreamContrains);

四、帧率降噪功能配置

  • frameRate：可以配置视频帧率

  • width：设置视频宽度，ideal代表理想宽度

  • height：设置视频高度，ideal代表理想高度

  • aspectRatio：代表宽高比

  • 对于音频则是开启回音消除、降噪、自动增益等操作

const mediaStreamContrains = {

 video: {

 		frameRate: {min: 20},

 		width: {min: 640, ideal: 1280},

 		height: {min: 360, ideal: 720},

		aspectRatio: 16/9

 },

 audio: {

 		echoCancellation: true, // 开启回音消除

 		noiseSuppression: true, // 降噪

 		autoGainControl: true // 自动增益

 }

};

var promise = navigator.mediaDevices.getUserMedia(mediaStreamContrains);

五、采集视频数据

  • 采集摄像头的内容并在浏览器上播放

  • 需要注意的是，一定要在https协议或者本地localhost域名下才可以调用

  • 我们通过调用 getUserMedia 方法，将视频数据加载到 video 标签中进行播放

  • 如果video标签想要播放流媒体数据，需要将数据挂在到 srcObject 属性上，该属性和普通的 src 属性互斥

  • 如果是第一次请求 Camera，浏览器会向用户弹出提示窗口，让用户决定是否可以访问摄像头

  • 如果用户允许访问，且设备可用，则调用 gotLocalMediaStream 方法

<!DOCTYPE html>

<html>

<head>

    <title>Realtime communication with WebRTC</title>

</head>

<style>

    video {

        width: 800px;

        height: 450px;

    }

</style>

<body>

    <h1>Realtime communication with WebRTC </h1>

    <video autoplay playsinline></video>

    <script>

        'use strict';

        const mediaStreamContrains = {

            video: true

        };

        const localVideo = document.querySelector('video');

        function gotLocalMediaStream(mediaStream) {

            localVideo.srcObject = mediaStream;

        }

        function handleLocalMediaStreamError(error) {

            console.log('navigator.getUserMedia error: ', error);

        }

        navigator.mediaDevices.getUserMedia(mediaStreamContrains).then(

            gotLocalMediaStream

        ).catch(

            handleLocalMediaStreamError

        );

    </script>

</body>

</html>

六、获取浏览器设备信息

  • 以手机为例，它一般会包括前置摄像头和后置摄像头麦克风、相机、耳机等。我们可以根据自己的需要，选择打开不同的设备

  • WebRTC 是否提供了的 enumerateDevices 接口，可以查询自己机子上都有哪些音视频设备

  • deviceInfo中有三个比较重要的属性

  • deviceID：设备的唯一标识

  • label：设备名称，用户已被授予访问媒体设备的权限（要想授予权限需要使用 HTTPS 请求），否则 label 字段始终为空。

  • kind：设备种类，可用于识别出是音频设备还是视频设备，是输入设备还是输出设备

// 判断浏览器是否支持这些 API

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {

    console.log("enumerateDevices() not supported.");

    return;

}

// 枚举 cameras and microphones.

navigator.mediaDevices.enumerateDevices()

    .then(function (deviceInfos) {

        // 打印出每一个设备的信息

        deviceInfos.forEach(function (deviceInfo) {

            console.log(deviceInfo.kind + ": " + deviceInfo.label +

                " id = " + deviceInfo.deviceId);

        });

    })

    .catch(function (err) {

        console.log(err.name + ": " + err.message);

    });

七、方法参数配置

  • ​ 方法 getUserMedia 的配置参数

1┃音视频直播系统之浏览器中通过WebRTC访问摄像头的更多相关文章

  1. 3┃音视频直播系统之浏览器中通过 WebRTC 直播视频实时录制回放下载

    一.录制分类 在音视频会议.在线教育等系统中,录制是一个特别重要的功能 录制一般分为服务端录制和客户端录制 服务端录制:优点是不用担心客户因自身电脑问题造成录制失败(如磁盘空间不足),也不会因录制时抢 ...

  2. 4┃音视频直播系统之浏览器中通过 WebRTC 进行桌面共享

    一.共享桌面原理 共享桌面在直播系统中是一个必备功能 共享者:每秒钟抓取多次屏幕,每次抓取的屏幕都与上一次抓取的屏幕做比较,取它们的差值,然后对差值进行压缩:如果是第一次抓屏或切幕的情况,即本次抓取的 ...

  3. 2┃音视频直播系统之浏览器中通过 WebRTC 拍照片加滤镜并保存

    一.拍照原理 好多人小时候应该都学过,在几张空白的纸上画同一个物体,并让物体之间稍有一些变化,然后连续快速地翻动这几张纸,它就形成了一个小动画,音视频播放器就是利用这样的原理来播放音视频文件的 播放器 ...

  4. 5┃音视频直播系统之 WebRTC 中的协议UDP、TCP、RTP、RTCP详解

    一.UDP/TCP 如果让你自己开发一套实时互动直播系统,在选择网络传输协议时,你会选择使用UDP协议还是TCP协议 假如使用 TCP 会怎样呢?在极端网络情况下,TCP 为了传输的可靠性,将会进行反 ...

  5. 10┃音视频直播系统之 WebRTC 中的数据统计和绘制统计图形

    一.数据统计 在视频直播中,还有一项比较重要,那就是数据监控 比如开发人员需要知道收了多少包.发了多少包.丢了多少包,以及每路流的流量是多少,才能评估出目前用户使用的音视频产品的服务质量是好还是坏 如 ...

  6. 12┃音视频直播系统之 WebRTC 实现1对1直播系统实战

    一.搭建 Web 服务器 前面我们已经实现过,但是没有详细说HTTPS服务 首先需要引入了 express 库,它的功能非常强大,用它来实现 Web 服务器非常方便 同时还需要引入 HTTPS 服务, ...

  7. 8┃音视频直播系统之 WebRTC 信令系统实现以及通讯核心并实现视频通话

    一.信令系统 信令系统主要用来进行信令的交换 在通信双方彼此连接.传输媒体数据之前,它们要通过信令服务器交换一些信息,如规范协商 若 A 与 B 要进行音视频通信,那么 A 要知道 B 已经上线了,同 ...

  8. H264音视频直播系统 服务器端+客户端源码 可用于直播系统搭建

    RTP协议实现直播系统搭建,采用H.264和AAC编码,码率极低,同时有较高的视频清晰度和音频音质,可用于视频聊天.视频会议.摄像头监控等多种应用场景. 直播系统搭建发布端,选择视频和音频设备,指定服 ...

  9. 6┃音视频直播系统之 WebRTC 核心驱动SDP规范协商

    一.什么是SDP SDP(Session Description Protocal)其实就是当数据过来时候,告诉数据自己这里支持的解码方式.传输协议等等,这样数据才能根据正确的方式进行解码使用 SDP ...

随机推荐

  1. @Qualifier 注解有什么用？

    当您创建多个相同类型的 bean 并希望仅使用属性装配其中一个 bean 时,您可 以使用@Qualifier 注解和 @Autowired 通过指定应该装配哪个确切的 bean 来消除歧义. 例如, ...

  2. C++“拷贝构造函数”和“等号重载”有什么区别？

    CTypeA(const CTypeB& b)CTypeA& operator=(const CTypeB& b)一直没弄懂这两个有什么区别.只知道,重载了=号,下面复制的时候 ...

  3. python模块 | 时间处理模块—datetime模块

    在python中,与时间处理相关的模块有 time,datetime,calendar. 时间的两个概念: UTC(世界协调时): 整个地球分为二十四时区,每个时区都有自己的本地时间.格林威治天文时间 ...

  4. Linux ftp服务器部署（最简单的ftp教程）

    之前在阿里云领了一个ECS服务器(顺便说一句,白嫖的,真香~),就想着做点什么,然后试着做个 ftp 站点,因为第一次尝试,结果走了不少弯路.最后终于完成了,研究了两天(哎~,脑壳笨没办法)就想着记录 ...

  5. 网络协议之:socket协议详解之Datagram Socket

    目录 简介 什么是Datagram Socket 使用socat来创建UDP服务 使用ss命令来监控Datagram Sockets 使用nc建立和UDP Socket的连接 总结 简介 上一篇文章我 ...

  6. SDT v0.0.1 上线

    自己的第一个开源组件,断断续续写了有一段时间,感觉可以发布 v0.0.1.SDT 是 SVG Drag Tree 的缩写,一个可以通过拖放 SVG 图标,来生成拥有树形结构的视图与相应数据的前端组件. ...

  7. 为什么局部内部类访问外边的局部变量必须为final

    6.局部内部类访问外边的局部变量时,此变量必须为final类型 马克-to-win:由于技术方面的限制,java的设计者们做出如下语法规定:局部内部类访问外边的局部变量时,此变量必须为final类型, ...

  8. DOM节点详解

    @ 目录 学习总结 1. 什么是 DOM 2. HTMLDOM 3. 元素获取 元素获取方式: 元素节点的属性操作 4. Node 对象的属性和方法 常用属性 常用方法 5. 事件处理 事件驱动编程 ...

  9. java基础-字符流

    字符流 * 字符流是可以直接读写字符的IO流 * 字符流读取字符, 就要先读取到字节数据, 然后转为字符. 如果要写出字符, 需要把字符转为字节再写出.    FileReader * FileRea ...

  10. Python实现简单用户注册信息管理系统

    运行效果: 注意:运行前请在同一目录下创建一个userdata.bin用于保存用户数据 源代码: 1 # coding:utf-8 2 ''' 3 用户注册信息管理系统 4 功能包括: 5 1.查看全 ...