视频后处理

本文主要介绍在 Web 中如何使用后处理技术支持美颜、虚拟背景、翻转和水印等功能。

注意

开启此功能会增加 CPU 占用

引入

<script src="https://brtc.baijiayun.com/brtc-js-sdk/2.26.0/BRTCRenderProcess.js"></script>

前提条件

    const support = BRTCRenderProcess.isSupport();
    if (support) {
        // 开启功能
    }

实现步骤

    const renderProcess = new BRTCRenderProcess();

    const beautyRender = new BRTCRenderProcess.Renders.BeautyRender(renderProcess);
    const virtualRender = new BRTCRenderProcess.Renders.VirtualBGRender(renderProcess);

    await Promise.all([
      beautyRender.ready(),
      virtualRender.ready()
    ]);
    renderProcess.addRender(beautyRender);
    renderProcess.addRender(virtualRender);

    renderProcess.setWaterMark({
        // 水印图片地址
        url: '',
        // 水印宽度，高宽比建议与水印图片一致（或者不设置 height）
        width: 40,
        // 水印高度
        height: 40,
        // 水印在视频的左边距（支持设置小于 1 的比例和大于 1 的像素距离）
        left: 0.1,
        // 水印在视频的上边距（支持设置小于 1 的比例和大于 1 的像素距离）
        top: 0.1,
        // 水印的透明度
        opacity: 1
    });
    virtualRender.setBackGround({
        // 虚拟背景图片地址
        url: '',
        // 虚拟背景透明度
        opacity: 1
    });

    // 是否开启美颜功能
    beautyRender.setEnabled(true);
    // 设置美颜系数
    beautyRender.setBeauty(0.5);
    // 设置红润系数
    beautyRender.setRuddy(0.5);
    // 设置高光系数
    beautyRender.setBrightness(0.5);

    // 是否开启虚拟背景功能
    virtualRender.setEnabled(true);

    // 设置是否开启水印
    renderProcess.enableWaterMark(true);

    // 是否打开垂直翻转
    renderProcess.enableVerticalFlip(false);

    // 是否打开水平翻转
    renderProcess.enableHorizontalFlip(false);

    // 创建一路本地流
    const localstream = BRTC.createStream({
        audio: true,
        video: true
    });

    // 设置视频采集分辨率帧率
    localstream.setVideoEncoderConfiguration({
        width: 640,
        height: 480,
        frameRate: 15
    });

    localstream.init().then(() => {
        const track = localstream.getVideoTrack();
        const setting = track.getSettings();
        renderProcess.resize(setting.width, setting.height);
        renderProcess.pipe(track, setting.frameRate);

        const publishStream = BRTC.createStream({
            audioSource: localstream.getAudioTrack(),
            videoSource: renderProcess.getOutputTrack()
        });

        // 设置推流码率
        publishStream.setVideoEncoderConfiguration({
            bitrate: 500
        });

        // 推流
        client.publish(publishStream);
    });

    // 切换设备时需要处理新 track

    // localstream.switchDevice('video', 'deviceId').then(() => {
    //     renderProcess.pipe(localstream.getVideoTrack(), frameRate);
    // });