webrtc视频流设置码率和分辨率

浏览器进行webrtc推流的时候,有时候需要保证视频清晰度,那就需要设置视频推送时的码率以及分辨率,下面是设置码率和分辨率的方法

设置码率

获取peerConnection的senders,遍历senders中获取类型为video的sender,通过setParameters设置sender的params就能操控码率:params.encodings[0].maxBitrate = 1024 * 1024 * 10; // 设置码率为10MB

js 复制代码
const video = document.createElement('video');
video.crossOrigin = 'anonymous';
video.src = '视频地址';
video.muted = true; // 静音才能实现自动播放
video.preload = 'auto';
video.loop = true;

video.onloadedmetadata = () => {
  let stream = null;
  try {
    stream = video.captureStream();
    console.log('音视频流', stream);

    // 创建webrtc
    const peerConnection = new RTCPeerConnection(null);

    stream.getTracks().forEach((track) => {
      peerConnection.addTrack(track, stream);
    });

    const senders = peerConnection.getSenders();

    // 遍历每个 sender
    senders.forEach(async (sender) => {
      // 找到视频的 sender
      if (sender && sender.track.kind === 'video') {
        const params = sender.getParameters();
        params.encodings[0].maxBitrate = 1024 * 1024 * 10; // 设置码率为10MB
        await sender.setParameters(params);
      }
    });
  } catch (error) {}
};

设置分辨率

设置分辨率只用操作视频流的宽高就能设置分辨率

我们可以通过操作源流的分辨率,或者通过canvas重新调整视频流的宽高

如:视频流只有1280*720,想要调整为1920*1080的分辨率

1.创建一个canvas,设置宽高为1920*1080

2.通过requestAnimationFrame和ctx.drawImage(video, 0, 0, 1920, 1080)将视频帧绘制到canvas上

js 复制代码
const video = document.createElement('video');
video.crossOrigin = 'anonymous';
video.src = '视频地址';
video.muted = true; // 静音才能实现自动播放
video.preload = 'auto';
video.loop = true;

...
// 绘制视频帧
ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, 1920, 1080)

3.获取canvas的流stream:video.captureStream

获取到是stream就是调整后分辨率为1920*1080的流

相关推荐
Hilaku4 小时前
重新思考CSS Reset:normalize.css vs reset.css vs remedy.css,在2025年该如何选?
前端·css·代码规范
袁煦丞4 小时前
一图看懂Docker管理 Portainer:cpoar内网穿透实验室第652个成功挑战
前端·程序员·远程工作
右子5 小时前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
入秋5 小时前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
Asort5 小时前
JavaScript设计模式(七)——桥接模式:解耦抽象与实现的优雅之道
前端·javascript·设计模式
golang学习记5 小时前
从0死磕全栈之Next.js 应用中的认证与授权:从零实现安全用户系统
前端
苏打水com5 小时前
携程前端业务:在线旅游生态下的「复杂行程交互」与「高并发预订」实践
前端·状态模式·旅游
Darenm1115 小时前
深入理解CSS BFC:块级格式化上下文
前端·css
Darenm1116 小时前
JavaScript事件流:冒泡与捕获的深度解析
开发语言·前端·javascript
@大迁世界6 小时前
第03章: Vue 3 组合式函数深度指南
前端·javascript·vue.js·前端框架·ecmascript