I am trying to combine two streams into one video element but its not working I dont want to overlay them with css by having two video elements since I want to pass stream object to the partner
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(
(newStream) => {
// setStream(newStream);
// if (userVideo.current) {
// userVideo.current.srcObject = newStream;
// }
let canvas = document.getElementById("threeCanvas")
let stream = canvas.captureStream(240);
const canvasStream = Object.assign(stream.getVideoTracks()[0]);
let ctx = new AudioContext(),
oscillator = ctx.createOscillator();
let dst = oscillator.connect(ctx.createMediaStreamDestination());
oscillator.start();
const silience = Object.assign(dst.stream.getAudioTracks()[0], { enabled: false });
let dummyStream = new MediaStream([canvasStream, silience]);
const combinedStream = //is there a way of combning them here? like combainStream(dummyStream ,newStream) or something
if (userVideo.current) {
userVideo.current.srcObject = combinedStream;
}
},