CODEWITHSUNDEEP
javascripthtmlwebrtcmediastreamweb-mediarecorder
Reece Ward
Reece Ward

Reputation: 223

Combining and position two media streams

I am trying to produce something similar to
https://recordscreen.io/
It positions the users camera over the screen recording

I've got both streams separately right now.
I've tried position one over another but I want it in a single video element to record
I've tried to create a combined media stream with the tracks from both other streams but I can't position them at all

/**
 * Edge has a slightly incorrect implementation of getDisplayMedia
 * Typescript currently uses this so typing is incorrect
 */
const screenMediaStream = await (navigator.getDisplayMedia ? 
    navigator.getDisplayMedia(constraints) :
    (navigator.mediaDevices as any).getDisplayMedia(constraints)    
) as MediaStream;

const cameraMediaStream = await navigator.mediaDevices.getUserMedia({
    audio: true, 
    video: { width: 150, height: 150 }
});

const combinedMediaStream = new MediaStream([...cameraMediaStream.getTracks(), ...screenMediaStream.getTracks()]);

screenVideoElement.srcObject = combinedMediaStream;

This only shows the webcam. I want to be able to position the webcam over the top of the screen recording.

Upvotes: 6

Views: 1744

Answers (1)

user6250
user6250

Reputation: 1

Basically you have to render both streams in the canvas with appropriate position and dimensions for screen capturing stream it would full window with and height. For the user camera stream capturing it would be bottom left with 150X150 size. And now you have to start writing these streams into the canvas. And with the captureStream() method, we can access the combined video streams and start using it.

Upvotes: 0

Related Questions