Skip to content

Enable Multiple Processors #68

Open
@dionatawijaya

Description

@dionatawijaya

What is the feature that you would like to see? Please describe.
Using multiple processors for my video

Is your feature request related to a problem? Please describe.
I'm trying to add virtual background and also mirror the video but I can't do it together.

Describe alternatives you've considered
I try to flip my background by using CSS img.style.transform = 'scaleX(-1)' but it's not possible since the processor doesn't apply the CSS styling.

Additional context
Here's my code for now, with this code, I can only have the background and not mirror.

    videoTrack = await createLocalVideoTrack({
      width: 360,
      height: 640,
      frameRate: 24
    });
    const bg = new VirtualBackgroundProcessor({
      assetsPath: '/tsFlow/',
      backgroundImage: img,
      maskBlurRadius: 5,
      pipeline: Pipeline.WebGL2
    });

    await bg.loadModel();

    const videoProcessor = {
      processFrame: (inputFrame: any, outputFrame: any) => {
        const ctx = outputFrame.getContext('2d');
        ctx.save();
        ctx.scale(-1, 1);
        ctx.drawImage(inputFrame, 0, 0, -inputFrame.width, inputFrame.height);
        ctx.restore();
      }
    };

    try {
      videoTrack.addProcessor(bg, {
        inputFrameBufferType: 'video',
        outputFrameBufferContextType: 'webgl2'
      });

      videoTrack.addProcessor(videoProcessor);
    } catch {}
    videoTrack.attach();

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions