navigator.mediaDevices.getDisplayMedia({ audio: true, video: true }).then(stream => {}); navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(stream => {});¿Cómo poner estas dos corrientes en una?
Ejemplo de fusión de flujo de captura con flujo de cámara web usando la librería video-stream-merger.js
<!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>