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 ...
随机推荐
- 两个相同的对象会有不同的的 hash code 吗?
不能,根据 hash code 的规定,这是不可能的.
- Saltstack自动化扩容
一. etcd服务的安装和使用 1.安装etcd应用: wget https://github.com/coreos/etcd/releases/download/v2.2.5/etcd-v2.2.5 ...
- 断言工具类之"判断条件不为空"
1 Assert.notNull(query, AssertConstants.NOT_NULL_MSG);
- 007.iSCSI服务器CHAP双向认证配置
一 iSCSI和CHAP介绍 1.1 iSCSI 磁盘 iSCSI后端存储支持多种设备类型,主要有: 文件 单一分区(partition) 磁盘 数组 RAID LVM 本手册建议以裸磁盘vdb作为示 ...
- DevEco Device Tool 3.0 Release 新版本发布,支持多人共享开发
DevEco Device Tool 是面向智能设备开发者提供的一站式集成开发环境,支持 HarmonyOS Connect 的组件按需定制,支持代码编辑.编译.烧录和调试.性能监测等功能,支持 C/ ...
- ARM指令集详解--汇编
1. 汇编 1.1. 通用寄存器 通用寄存器 37个寄存器,31个通用寄存器,6个状态寄存器,R13堆栈指针sp,R14返回指针,R15为PC指针, cpsr_c代表的是这32位中的 ...
- translate3d 对 z-index 居然有影响
在 Mobile 端需要注意. 安卓 默认浏览器 当中如果 div1 div2 如果 div1 有 translate3d 而 div2 没有 那么 div2 的 z-index 会无效. 解决办法: ...
- JavaScript 的Date构造函数太迷惑了。。。
1 new Date(2021,0,1,0,0,0,0) ===> Fri Jan 01 2021 00:00:00 GMT+0800 (中国标准时间) 2 new Date(2021,1,1, ...
- 解决HDFS无法启动namenode,报错Premature EOF from inputStream;Failed to load FSImage file, see error(s) above for more info
一.情况描述 启动hadoop后发现无法打开hdfs web界面,50070打不开,于是jps发现少了一个namenode: 查看日志信息,发现如下报错: 2022-01-03 23:54:10,99 ...
- javaweb之删除功能
对数据库的删除,主要是通过表中的一个数据查询来进行逐个删除,否则会清空整张表. 一.dao层 在dao层加入删除方法 public boolean delete(Course n) { boolean ...