navigator.mediaDevices.getDisplayMedia({ audio: true, video: true }).then(stream => {});
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(stream => {});
How to put these two streams into one?
Merging capture stream with webcam stream example using the video-stream-merger.js lib
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/video-stream-merger@4.0.1/dist/video-stream-merger.js"></script>
<title>Merge screen with webcam</title>
</head>
<body>
<video id="video"></video>
</body>
<script>
async function startCapture() {
let webcamStream = null;
const constraints = { audio: true, video: { width: 720, height: 480 } };
try {
webcamStream = await navigator.mediaDevices.getUserMedia(constraints);
} catch (err) {
/* handle the error */
console.error("Error: " + err);
}
let captureStream = null;
try {
const displayMediaOptions = null; //set it if you need
captureStream = await navigator.mediaDevices.getDisplayMedia(
displayMediaOptions
);
} catch (err) {
/* handle the error */
console.error("Error: " + err);
}
const merger = new VideoStreamMerger();
// Add the screen capture. Position it to fill the whole stream (the default)
merger.addStream(captureStream, {
x: 0, // position of the topleft corner
y: 0,
width: merger.width,
height: merger.height,
mute: true, // we don't want sound from the screen (if there is any)
});
// Add the webcam stream. Position it on the bottom left and resize it to 100x100.
merger.addStream(webcamStream, {
x: 0,
y: merger.height - 100,
width: 100,
height: 100,
mute: false,
});
// Start the merging. Calling this makes the result available to us
merger.start();
// We now have a merged MediaStream!
//merger.result
const video = document.querySelector("video");
video.srcObject = merger.result;
video.onloadedmetadata = function (e) {
video.play();
};
}
startCapture();
</script>
</html>