how to overlay two media streams into on video elment

user_18357996 0
Viewed 20

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;
        }
      },

mediastream javascript
0 Answers
Related