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语法。
*/

你可能感兴趣的:(WebRtc,webrtc,前端,javascript)