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.新建一个MediaStreamvar mediaStream =newMediaStream();// 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 =newAudioContext();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语法。
*/