Use pixi js to merge two camera streams on the canvas and extract the media stream.

[Azir]

I want to use pixi js to help me synthesize the webcam stream

I successfully merg two video stream into one canvas

But I cannot get mediastream using canvas.captureStream()

look this image

sample code

const canvas = document.getElementById('mycanvas')

const app = new PIXI.Application({
  view: canvas,
});

canvas.width = 1920;
canvas.height = 1080;

var texture = null;

var captureMixerStream = () => {

  // canvas mixer stream
  let mediaStream3 = canvas.captureStream();
  video2.srcObject = mediaStream3;
  video2.onloadedmetadata = () => {
    video2.play();
    // error broken screen
  };

}

var initvideo2 = () => {
  // mediaStream from getusermedia webcam stream
  video2.srcObject = mediastream;
  video2.onloadedmetadata = () => {
    video2.play();
  };
  video2.oncanplay = function () {
    let sprite = new PIXI.Sprite(texture);
    sprite.position.set(640, 360);
    sprite.width = 640;
    sprite.height = 360;
    app.stage.addChild(sprite)
    captureMixerStream();
  }
}

var initvideo1 = () => {
  // mediaStream from getusermedia webcam stream
  video1.srcObject = mediastream;
  video1.onloadedmetadata = () => {
    video1.play();
  };
  video1.oncanplay = function () {
    texture = PIXI.Texture.from(video1);
    let sprite = new PIXI.Sprite(texture);
    sprite.position.set(0, 0);
    sprite.width = 1920;
    sprite.height = 1080;
    app.stage.addChild(sprite);
    initvideo2();
  }
}

initvideo1();

 

 

Edited November 9, 2020 by Azir
Pixi.js

[ivan.popelyshev]

Seems like browser/WebGL problem. PixiJS itself doesnt have anything related to streams. Do you reproduce it in both chrome & firefox?

[Azir]

I haven't tried this sample in firefox

For some reasons, my program only needs to support chrome (chromium)