webRtc常用的方法

前端做音视频通信必然会用到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语法。
*/

秒客网