javascript - How to increase the bitrate of webrtc? - Stack Overflow

admin管理员组

文章数量:1193331

I'm using webrtc to send a 1080p video stream from one tab to another tab on the same computer(windows10, chrome 76). And the receiver's video quality is not as good as sender's. The bitrate is only about 2400kbps(300kb/s), no difference between 1080p and 720p. Video resolution also become lower when the camera moving.
How can I improve the quality of webrtc video stream?

I have tried to modify sdp to increase bitrate. .html

set x-google-max-bitrate

peer.createAnswer().then(sdp => {
  var arr = sdp.sdp.split('\r\n');
  arr.forEach((str, i) => {
    if (/^a=fmtp:\d*/.test(str)) {
      arr[i] = str + ';x-google-max-bitrate=28000;x-google-min-bitrate=0;x-google-start-bitrate=20000';
    }
  });
  sdp = new RTCSessionDescription({
    type: 'answer',
    sdp: arr.join('\r\n'),
  })
  peer.setLocalDescription(sdp);
  socket.emit('message_send', { type: 'answer', sdp: sdp.sdp });
});

output receive rate (kb/s)

var prevReport = null;
var t = setInterval(function() {
  if (!peer) {
    prevReport = null;
    return;
  }
  peer.getStats(null).then(reporter => {
    reporter.forEach(report => {
      if (report.type === 'inbound-rtp' && report.mediaType === 'video') {
        if (!prevReport) {
          prevReport = report;
        } else {
          console.log((report.bytesReceived - prevReport.bytesReceived) / (report.timestamp - prevReport.timestamp));
        }
      }
    });
  });
}, 1000);

I hope that the bitrate of 1080p could be obviously greater than of 720p.
Is there a way to let webrtc transport lossless or low-loss video stream?

---

The 300kb/s limit only exists when a chrome tab sends video to another chrome tab. When a chrome tab sends video to a firefox tab, the x-google-max-bitrate works.

I'm using webrtc to send a 1080p video stream from one tab to another tab on the same computer(windows10, chrome 76). And the receiver's video quality is not as good as sender's. The bitrate is only about 2400kbps(300kb/s), no difference between 1080p and 720p. Video resolution also become lower when the camera moving.
How can I improve the quality of webrtc video stream?

I have tried to modify sdp to increase bitrate. http://www.rtcbits.com/2016/11/controlling-bandwidth-usage-in-webrtc.html

set x-google-max-bitrate

peer.createAnswer().then(sdp => {
  var arr = sdp.sdp.split('\r\n');
  arr.forEach((str, i) => {
    if (/^a=fmtp:\d*/.test(str)) {
      arr[i] = str + ';x-google-max-bitrate=28000;x-google-min-bitrate=0;x-google-start-bitrate=20000';
    }
  });
  sdp = new RTCSessionDescription({
    type: 'answer',
    sdp: arr.join('\r\n'),
  })
  peer.setLocalDescription(sdp);
  socket.emit('message_send', { type: 'answer', sdp: sdp.sdp });
});

output receive rate (kb/s)

var prevReport = null;
var t = setInterval(function() {
  if (!peer) {
    prevReport = null;
    return;
  }
  peer.getStats(null).then(reporter => {
    reporter.forEach(report => {
      if (report.type === 'inbound-rtp' && report.mediaType === 'video') {
        if (!prevReport) {
          prevReport = report;
        } else {
          console.log((report.bytesReceived - prevReport.bytesReceived) / (report.timestamp - prevReport.timestamp));
        }
      }
    });
  });
}, 1000);

I hope that the bitrate of 1080p could be obviously greater than of 720p.
Is there a way to let webrtc transport lossless or low-loss video stream?

---

The 300kb/s limit only exists when a chrome tab sends video to another chrome tab. When a chrome tab sends video to a firefox tab, the x-google-max-bitrate works.

• javascript
• webrtc

Share Improve this question Follow edited Aug 27, 2019 at 11:28 cyh asked Aug 26, 2019 at 7:57 cyhcyh 21111 gold badge22 silver badges66 bronze badges 2

• also got a link for future reference rtcbits.com/2016/11/controlling-bandwidth-usage-in-webrtc.html – pgcan Commented Oct 10, 2019 at 11:05
• this will allow you control bitrate during a call stackoverflow.com/a/74600584/12771945 – mamena tech Commented Nov 28, 2022 at 12:38

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 12

I tried to set b=AS:10000 and it works.

peer.createAnswer().then(sdp => {
  var arr = sdp.sdp.split('\r\n');
  arr.forEach((str, i) => {
    if (/^a=fmtp:\d*/.test(str)) {
      arr[i] = str + ';x-google-max-bitrate=10000;x-google-min-bitrate=0;x-google-start-bitrate=6000';
    } else if (/^a=mid:(1|video)/.test(str)) {
      arr[i] += '\r\nb=AS:10000';
    }
  });
  sdp = new RTCSessionDescription({
    type: 'answer',
    sdp: arr.join('\r\n'),
  })
  peer.setLocalDescription(sdp);
  socket.emit('message_send', { type: 'answer', sdp: sdp.sdp });
});

Correct way for adjusting audio and video bandwidth limitation is shown in the official sample https://webrtc.github.io/samples/src/content/peerconnection/bandwidth

Here is simplified example for setting video bandwidth limitation 1 Mbps with maxBitrate property of RTCRtpEncodingParameters:

const pc1 = new RTCPeerConnection(servers);

...

const sender = pc1.getSenders()[0];
const parameters = sender.getParameters();
parameters.encodings[0].maxBitrate = 1 * 1000 * 100;
sender.setParameters(parameters);

For adjusting audio bandwidth limitation corresponding sender should be updated, e.g.

const sender = pc1.getSenders()[1];

For anyone having trouble setting maxBitrate with getSenders(). Specifically if your setParameters() seems to go through successfully (returned promise gets resolved without an error), but the video bitrate doesn't change.

The problem is that every answer on this topic (even the official example) seems to assume that the video track will be the [0] in the array of getSenders(). After hours of pulling my hair, I found out that the order of tracks is not defined by the specification (that is even noted in the documentation), so your video track could be anywhere in the array.

To solve this you just need to iterate through the return of getSenders() and look for the track.kind you want to change:

const maxBitrateInBitsPerSecond = 75000
const senders = peerConnection.getSenders()

senders.forEach((sender) => {
    if (sender.track.kind === 'video'){
        // Change bitrate for video track here
        const parameters = sender.getParameters()
        if (!parameters.encodings) {
            parameters.encodings = [{}]
        }
        parameters.encodings[0].maxBitrate = maxBitrateInBitsPerSecond
        sender.setParameters(parameters).then(() => {
            console.log('Bitrate changed successfuly');
        }).catch(e => console.error(e))
    }
    if (sender.track.kind === 'audio'){
        // Change bitrate for audio track here
    }
})

本文标签： javascriptHow to increase the bitrate of webrtcStack Overflow