Merging addStream with addMediaElement about video-stream-merger HOT 11 CLOSED

You're drawing your arc in the top-left, you'll have to draw it in the bottom-left, something like:

  ctx.arc(height/2 + 50, merger.height - (height/2 + 50), height/2, 0, Math.PI*2, true);

from video-stream-merger.

That should be fine.

from video-stream-merger.

You're close, just save the state before clipping:

// my webcam feed acting as a background
merger.addStream(camera, { x: 0, y: 0, width: 1366, height: 768 });
// video I want to place in the corner of webcam feed in the form of a circle
merger.addMediaElement('circle', document.getElementById('video'), {
  draw: (ctx, frame, done) => {
    // video size is 1280x720, I need only a circle in the center of it
    const x = 0, y = 0, width = 1280, height = 720;
    ctx.save(); // <--
    ctx.beginPath();
    ctx.arc(x + width/2, y + height/2, width/2, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(frame, x, y, width, height);
    ctx.restore();
    done();
  }
});

from video-stream-merger.

Thank you so much, I was able to draw it in a small circle at the top left corner of webcam feed

draw: (ctx, frame, done) => {
  const x = 0, y = 0, width = 320, height = 185;
  ctx.save();
  ctx.beginPath();
  // 50 pixels from top and left borders
  ctx.arc(height/2 + 50, height/2 + 50, height/2, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.clip();
  ctx.drawImage(frame, x, y, width, height);
  ctx.restore();
  done();
}

But how to place it at the bottom left corner of the main frame?
Changing arguments to drawImage wasn't helpful, possibly I should also change arc but how?
Since I have a circular video, I would need 50 pixels + radius from left and bottom borders.

from video-stream-merger.

Thank you, Thomas! Works flawlessly now!

By the way, could you please point me how could I update addMediaElement if I will change video.src?
Say I want to display several short videos in a row using the same video tag.
Currently it shows only the first video, since it was initialized inside getUserMedia.
Is it possible to somehow send a signal to merger that addMediaElement source has been changed?

from video-stream-merger.

I think it will just automatically update if you change video.src. Let me know if that's not the case.

from video-stream-merger.

Unfortunately that's not the case, please take a look how I am recording it:

merger = new VideoStreamMerger({ width: 1366, height: 768 });
navigator
  .mediaDevices
  .getUserMedia({
    audio: true,
    video: {
      aspectRatio: { ideal: 1.7777777778 },
      width: { ideal: 1280, max: 1920 },
      height: { ideal: 720, max: 1080 },
    }
  }).then(camera => {
    merger.addStream(camera, { x: 0, y: 0, width: 1366, height: 768 });
    merger.addMediaElement('circle', document.getElementById('video'), {
      draw: (ctx, frame, done) => {
        const x = 0, y = 0, width = 426, height = 240;
        ctx.save();
        ctx.beginPath();
        ctx.arc(height/2 + 50, merger.height - (height/2 + 50), height/2, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.clip();
        ctx.drawImage(frame, x, merger.height - (height + 50), width, height);
        ctx.restore();
        done();
      }
    });
    merger.start();
    recorder = new MediaRecorder(merger.result, { mimeType: codec });
    recorder.start();
    // usual logic for saving
    recorder.ondataavailable = chunk => {}

And while recording I flip the source of video. Next videos play as expected.
I can even hear the sound of the next video when replaying the file recorded using this code.

Moreover, the circular video is shown during the whole time webcam is recorded.
But after playing the first video it seems frozen at the last frame of the first video.

from video-stream-merger.

Thomas, I was able to get the circular video updated using this outside getUserMedia:

merger.removeStream('circle');
merger.addMediaElement('circle', document.getElementById('video'), {
  draw: (ctx, frame, done) => {
    // same as inside getUserMedia()
  }
});

Not sure if this is optimal to do it each time I swap the video source?

from video-stream-merger.

Also when removing the stream I can see circle video blinking for a fraction of a second.
It plays the first video, then disappears and then appears with the new video again.

So is it safe to just call addMediaElement('circle', {}) without prior removing it?
Would it spawn additional media streams or just overwrite the existing with the same name?

from video-stream-merger.

Adding the stream repeatedly without removing it will create new streams and leak memory.

from video-stream-merger.

Got it, Thomas, thank you so much for your support!

from video-stream-merger.