WebRTC api包括媒体捕获、音频视频的编码和解码、传输层和会话管理。
在这里插入图片描述
MediaStream接口是一个媒体内容的流,一个流包含几个轨道,比如视频和音频轨道。作用是从用户本地摄像机和麦克风访问媒体流。getUserMedia()方法是访问本机输入设备的主要方式。
第一步是访问用户设备的摄像头和麦克风。我们检测可用设备的类型,获得用户访问这些设备的权限,并管理数据流。
注意:
navigator.mediaDevices.getUserMedia = navigator.mediaDevices.getUserMedia ||
navigator.mediaDevices.webkitGetUserMedia ||
navigator.mediaDevices.mozGetUserMedia ||
navigator.mediaDevices.msGetUserMedia;
if (navigator.getUserMedia) {
// 支持
} else {
// 不支持
}
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then( ).catch( );
getUserMedia方法接受三个参数,第一个参数是一个对象,即约束条件,另外两个是成功回调函数和失败回调函数。
约束条件
约束条件里包括捕获对象,表示要获取哪些多媒体设备,你获取本地媒体流时是要求获取摄像头还是麦克风,也可以设置视频分辨率的值、宽高比、面向模式(前置还是后置摄像头)、帧速率、高度、宽度等。可以单独把约束条件提出来单独写。
navigator.mediaDevices.getUserMedia({
// 以下就是约束条件
video: true,
audio: true
})
.then(createConn )
.catch(
console.log(`getUserMedia() error: ${e.name}`);
);
// 或者
let constraints = {
video: true,
audio: true,
...
}
navigator.mediaDevices.getUserMedia(constraints,onSuccess, onError)
除了指定捕获对象之外,还可以指定一些限制条件,比如视频的宽高等等。
let constraints = {
video: {
minWidth: 1280,
minHeight: 720
}
...
}
如果网页使用了getUserMedia方法,浏览器就会询问用户,是否同意浏览器调用麦克风或摄像头。如果用户同意,就调用回调函数onSuccess;如果用户拒绝,就调用回调函数onError
成功回调函数
获取多媒体设备成功时调用。onSuccess回调函数的参数是一个数据流对象stream。stream.getAudioTracks方法和stream.getVideoTracks方法,分别返回一个数组,其成员是数据流包含的音轨和视轨(track)。
使用的声音源和摄影头的数量,决定音轨和视轨的数量。比如,如果只使用一个摄像头获取视频,且不获取音频,那么视轨的数量为1,音轨的数量为0。每个音轨和视轨,有一个kind属性,表示种类(video或者audio),和一个label属性(比如FaceTime HD Camera (Built-in))。
失败回调函数
获取多媒体失败时调用。Error对象的code属性有说明错误的类型:
下面看一个完整例子:
let constraints = {video: true};
function onSuccess(stream) {
let video = document.querySelector("video");
// video.src = window.URL.createObjectURL(stream);这种写法已被移除
video.srcObject = stream;
}
function onError(error) {
console.log("getUserMedia error: ", error);
}
navigator.getUserMedia(constraints, onSuccess, onError);
注意,如果存在回声,应该在video或者audio节点处添加muted,进行简单的回声消噪。
原文:https://segmentfault.com/a/1190000020273463
在前面的章节中,已经对WebRTC相关的重要知识点进行了介绍,包括涉及的网络协议、会话描述协议、如何进行网络穿透等,剩下的就是WebRTC的API了。WebRTC通信相关的API非常多,主要完成了如下功能:
RTCPeerConnection API是每个浏览器之间点对点连接的核心,RTCPeerConnection是WebRTC组件,用于处理对等体之间流数据的稳定和有效通信。RTCPeerConnection可以保护Web开发人员免受潜伏在其中的无数复杂性的影响。
目的 帮助自己了解webrtc 实现端对端通信,WebRTC(Web Real-Time Communication) 网页即时通信 ,是一个支持网页浏览器进行实时语音、视频对话的API。
这是 MDN 上对 WebRTC 的描述,初次接触时无法理解 WebRTC 为什么要和 WebSocket 搭配,明明说的很清楚 不借助中间媒介 ,那 WebSocket 充当的是什么角色?整个 WebRTC 通话建立的流程又是怎样的?
本文介绍如何基于WebRTC快速实现一个简单的实时音视频通话。在开始之前,您可以先了解一些实时音视频推拉流相关的基础概念:流:一组按指定编码格式封装的音视频数据内容。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!