rainzhaojy / blogs

200 stars 28 forks source link

定制WebRTC #8

Open rainzhaojy opened 7 years ago

rainzhaojy commented 7 years ago

有如下几种方式定制WebRTC应用:

AppRTC提供了一些定制参数: https://apprtc.appspot.com/params.html

1. Video resolution and framerate

getUserMedia(constraints)接口参数可以限定video resolution, frame rate等:

video: {
  width: {ideal: 320},
  height: {ideal: 240},
  frameRate: {min: 1, max: 15}
}

2. audio or video deviceId

如果有多个microphone或多个摄像头时可以使用下面的constraints来限定deviceId:

audio: {
  deviceId: <the microphone id>
}

deviceId可以通过navigator.mediaDevices. enumerateDevices()获得.

3. 前置或后置摄像头

这一功能对于mobile比较有用(但是考虑到mobile browser对于WebRTC的支持,这一功能用处也不大)

video: {
  facingMode: 'environment' // 后置摄像头, 'user'表示前置摄像头
}

4. 提高Audio质量 (chrome only)

音视频应用里, audio quality非常重要, 用户要求no drops, no echo, clear audio, low delay, 相对而言video quality不是那么重要, google chrome提供了下面一些参数来提高audio quality:

audio: {
  googEchoCancellation: true,
  googAutoGainControl: true,
  googNoiseSuppression: true,
  googHighpassFilter: true,
  googNoiseSuppression2: true,
  googEchoCancellation2: true,
  googAutoGainControl2: true
}

5. 指定STUN/TURN server

通过new RTCPeerConnection(pcConfiguration)的参数pcConfiguration可以指定ice servers:

var pcConfig = {
    iceServers: [
        {urls: "stun:stun.example.com:19302"},
        {
            urls: "turn:turn.example.com?transport=tcp", 
            credential: "webrtcdemo", 
            username: "user@example.com"
        }
    ]
}
var pc = new RTCPeerConnection(pcConfig);

6. Limit bandwidth

信令协商的本质就是交换SDP,因此可以直接修改SDP来实现某些功能的定制,包括在browser端直接使用JS修改SDP,或者Server端通过answer SDP控制browser行为

7. Enforce H264 codec

chrome/firefox支持VP8, VP9, H264, 通过直接修改SDP可以强制使用H264, SDP里的m line里的第一个payload type为default payload, 因此得到offer SDP后可以修改offer SDP的m=video line, 将H264对应的payload放在第一个, 在你的代码里可以直接调用下面的方法, 譬如d.sdp = setDefaultCodecByName(d.sdp, 'H264');. 同理也可以限定audio codec.

例子参考https://jsfiddle.net/rainzhao/s5tadxgq/

8. Server side RTCP

通过RTCP控制browser行为,譬如REMB