前端做音视频通信必然会用到webRtc，刚好也是做了几个webRtc项目，总结一波常用的方法；
罗列当前电脑所有可用设备
// filterType: 1; // 1_检索麦克风; 2_检索摄像头; 3_检索扬声器; 匹配不上就筛选麦克风;
getEnumerateDevices(filterType: number) {
let filterString = filterType === 1 ? 'audioinput' : filterType === 2 ? 'videoinput' : filterType === 3 ? 'audiooutput' : 'audioinput';
return navigator.mediaDevices.enumerateDevices().then(function(devices) {
return devices.filter(function(device) {
/*
'audioinput': 表示麦克风;
'videoinput': 表示摄像头,没有安装摄像头时({label: 'screen-capture-recorder'},这也就是为啥没摄像头就会传会桌面画面);
'audiooutput': 扬声器/听筒;
*/
return device.kind === filterString;
});
});
};
/* 使用 */
// @params: res 是一个数组[{deviceId: '', groupId: '', kind: '', label: '',}]
getEnumerateDevices().then((res) => {
}).catch(() => {
})
指定输入设备
var constraints = {
audio: {
deviceId: deviceId },
video: {
deviceId: deviceId },
};
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
/* 获取媒体流 */
}).catch(function(error) {
console.log(error);
});
创建空的媒体流MediaStream
// 1.新建一个MediaStream
var mediaStream = new MediaStream();
// 2.通过canvas创建空的video视频流
let myCanvas = document.createElement('canvas');
let ctx = myCanvas.getContext('2d');
let streamCanvas = myCanvas.captureStream();
// 3.把空的视频流添加的MediaStream轨道中;
mediaStream.addTrack(streamCanvas.getVideoTracks()[0]);
// 1.通过AudioContext创建空的audio音频流
let audioCtx = new AudioContext();
let dest = audioCtx.createMediaStreamDestination();
let aStream = dest.stream;
// 2.把空的音频流添加到MediaStream轨道中;
mediaStream.addTrack(aStream.getAudioTracks()[0]);
mediaConstraints概念
mediaConstraints是用于在WebRTC应用程序中指定媒体流类型的对象。它包含一组可选的属性，用于控制本地媒体流的约束，例如视频和音频的分辨率、比特率、帧率等。mediaConstraints可以被传递给getUserMedia()方法来获取媒体流。
以下是mediaConstraints的一些属性：
- audio：指定是否包含音频流，值为true或false。
- video：指定是否包含视频流，值为true或false。
- width：指定视频流的宽度，以像素为单位。
- height：指定视频流的高度，以像素为单位。
- frameRate：指定视频流的帧率，以帧/秒为单位。
- facingMode：指定使用前置或后置摄像头，值可以是"user"（前置摄像头）或"environment"（后置摄像头）。
var constraints = {
audio: true,
video: {
width: 1280,
height: 720,
frameRate: 30,
facingMode: "user"
}
};
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
/* 使用媒体流 */
}).catch(function(error) {
console.log(error);
});
/* 指定宽高
注意，这里使用 `ideal` 参数来指示所需的宽度和高度，而不是 `exact` 参数。这是因为如果您在使用 `exact` 参数时指定了一个不受支持的分辨率，将无法获得媒体流
*/
var constraints = {
video: {
width: {
ideal: 1280 }, height: {
ideal: 720 } }
}
RTCConfiguration概念
pcConfig是一个包含WebRTC PeerConnection配置信息的JavaScript对象。PeerConnection对象是WebRTC中的核心组件，用于建立和维护点对点的音视频通信。pcConfig对象包含以下属性：
- iceServers：指定用于NAT穿越的ICE服务器列表。每个ICE服务器都是一个包含urls和credential属性的JavaScript对象。urls属性是一个字符串或字符串数组，指定ICE服务器的URL。credential属性是可选的，用于指定ICE服务器的验证凭据。
- iceTransportPolicy：指定ICE传输策略。可选值包括"all"（使用所有可用的传输类型）、“relay”（仅使用中转传输类型）和"none"（不使用任何传输类型）。
- bundlePolicy：指定应如何使用单个ICE通道传输多个媒体流。可选值包括"balanced"（默认值，使用单个ICE通道传输多个媒体流）、“max-compat”（使用多个ICE通道传输多个媒体流）和"max-bundle"（使用单个ICE通道传输多个媒体流，但只使用其中一个媒体流的ICE传输）。
- rtcpMuxPolicy：指定是否应在单个SRTP通道上复用RTCP和RTP。可选值包括"require"（强制要求复用）和"negotiate"（协商复用，如果对等端不支持复用则使用不同的通道）。
- sdpSemantics：指定SDP语义版本。可选值包括"plan-b"（默认值，使用传统的SDP语法）和"unified-plan"（使用新的SDP语法，支持多个媒体流）。
var pcConfig = {
iceServers: [
{
urls: "stun:stun.l.google.com:19302" },
{
urls: "turn:example.com", username: "user1", credential: "pass1" }
],
iceTransportPolicy: "all",
bundlePolicy: "balanced",
rtcpMuxPolicy: "require",
sdpSemantics: "unified-plan"
};
/*
上面的示例为PeerConnection对象配置了两个ICE服务器：一个是Google的STUN服务器，另一个是使用用户名和密码
进行身份验证的TURN服务器。它还指定了使用所有可用的传输类型，使用平衡的ICE通道策略，强制要求RTCP和RTP复
用，并使用新的SDP语法。
*/
