1┃音视频直播系统之浏览器中通过WebRTC访问摄像头
一、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访问摄像头的更多相关文章
- 3┃音视频直播系统之浏览器中通过 WebRTC 直播视频实时录制回放下载
一.录制分类 在音视频会议.在线教育等系统中,录制是一个特别重要的功能 录制一般分为服务端录制和客户端录制 服务端录制:优点是不用担心客户因自身电脑问题造成录制失败(如磁盘空间不足),也不会因录制时抢 ...
- 4┃音视频直播系统之浏览器中通过 WebRTC 进行桌面共享
一.共享桌面原理 共享桌面在直播系统中是一个必备功能 共享者:每秒钟抓取多次屏幕,每次抓取的屏幕都与上一次抓取的屏幕做比较,取它们的差值,然后对差值进行压缩:如果是第一次抓屏或切幕的情况,即本次抓取的 ...
- 2┃音视频直播系统之浏览器中通过 WebRTC 拍照片加滤镜并保存
一.拍照原理 好多人小时候应该都学过,在几张空白的纸上画同一个物体,并让物体之间稍有一些变化,然后连续快速地翻动这几张纸,它就形成了一个小动画,音视频播放器就是利用这样的原理来播放音视频文件的 播放器 ...
- 5┃音视频直播系统之 WebRTC 中的协议UDP、TCP、RTP、RTCP详解
一.UDP/TCP 如果让你自己开发一套实时互动直播系统,在选择网络传输协议时,你会选择使用UDP协议还是TCP协议 假如使用 TCP 会怎样呢?在极端网络情况下,TCP 为了传输的可靠性,将会进行反 ...
- 10┃音视频直播系统之 WebRTC 中的数据统计和绘制统计图形
一.数据统计 在视频直播中,还有一项比较重要,那就是数据监控 比如开发人员需要知道收了多少包.发了多少包.丢了多少包,以及每路流的流量是多少,才能评估出目前用户使用的音视频产品的服务质量是好还是坏 如 ...
- 12┃音视频直播系统之 WebRTC 实现1对1直播系统实战
一.搭建 Web 服务器 前面我们已经实现过,但是没有详细说HTTPS服务 首先需要引入了 express 库,它的功能非常强大,用它来实现 Web 服务器非常方便 同时还需要引入 HTTPS 服务, ...
- 8┃音视频直播系统之 WebRTC 信令系统实现以及通讯核心并实现视频通话
一.信令系统 信令系统主要用来进行信令的交换 在通信双方彼此连接.传输媒体数据之前,它们要通过信令服务器交换一些信息,如规范协商 若 A 与 B 要进行音视频通信,那么 A 要知道 B 已经上线了,同 ...
- H264音视频直播系统 服务器端+客户端源码 可用于直播系统搭建
RTP协议实现直播系统搭建,采用H.264和AAC编码,码率极低,同时有较高的视频清晰度和音频音质,可用于视频聊天.视频会议.摄像头监控等多种应用场景. 直播系统搭建发布端,选择视频和音频设备,指定服 ...
- 6┃音视频直播系统之 WebRTC 核心驱动SDP规范协商
一.什么是SDP SDP(Session Description Protocal)其实就是当数据过来时候,告诉数据自己这里支持的解码方式.传输协议等等,这样数据才能根据正确的方式进行解码使用 SDP ...
随机推荐
- 常见算法的时间复杂度(大O计数法)
定义 对于不同的机器环境而言,确切的单位时间是不同的,但是对于算法进行多少个基本操作(即花费多少时间单位)在规模数量级上却是相同的,由此可以忽略机器环境的影响而客观的反应算法的时间效率. 对于算法 ...
- Flask-Script使用教程
Flask使用第三方脚本 一个干净的项目准备: 一个干净的Flask项目连接地址: https://pan.baidu.com/s/123TyVXOFvh5P7V8MbyMfDg 话不多说,上菜: 1 ...
- 学习openstack(四)
一.KVM虚拟化 1.KVM的安装: yum install qemu-kvm qemu-kvm-tools virt-manager libvirt virt-install /etc/init.d ...
- css实现超出部分显示省略号
/* 显示一行,省略号 */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; wo ...
- 【编译原理】自底向上分析方法——LR文法分析方法的总结
LR(0).SLR(1).LR(1).LALR(1) de 若干方面的区别 目录 推导过程 分析能力 本质区别 文法对比 可以适当利用物理意义对二义性文法进行冲突处理 推导过程 LR(0)的基础上才有 ...
- Golang | 测试与性能调优
Test 我们在日常的工作过程中,自测是不可缺少的,公司还会要求所有的公共方法必须要写单测,在别的语言中,我们如果想要写单测还需要使用到测试框架,但是Go语言中,直接支持测试,并且使用起来非常简单. ...
- PowerBI添加中国地图
可以直接在添加视觉对象中添加 或者用此方法 样子: 添加形状地图地图的"位置""图例" 然后去http://datav.aliyun.com/portal/sc ...
- Java三大结构
Java三大结构 顺序结构(基本结构) 选择结构 循环结构 1. 顺序结构 平时一般语句都默认遵循顺序结构 2. 选择结构 2.1 if单选择结构 语法 if(布尔表达式){ //布尔表达式为true ...
- Go xmas2020 学习笔记 11、io.Reader
11-Homework #2. 11-Reader. Reader interface. NewReader func. Reader Struct. Len .Size,Read func. Pra ...
- MySql创建分区
一.Mysql分区类型 1.RANGE 分区:基于属于一个给定连续区间的列值,把多行分配给分区. 2.HASH分区:基于用户定义的表达式的返回值来进行选择的分区,该表达式使用将要插入到表中的这些行的列 ...