webrtchtml5-videohtml5-audioweb-audio-apimediasoup

Stream static video file through webrtc

what I am trying to accomplish is to have on my page audio and video file. And then send them through webrtc. I managed to do this with audio using web audio api like this. HTML:

  <audio id="audio">
    <source src="../assets/outfoxing.mp3" />
  </audio>

JS:

const audioElement = document.getElementById("audio");
const incomingSource = audioContext.createMediaElementSource(audioElement);

const outgoingStream = audioContext.createMediaStreamDestination();
incomingSource.connect(outgoingStream);
const outgoingTrack = outgoingStream.stream.getAudioTracks()[0];
audioElement.play();
await this.sendTransport.produce({ track: outgoingTrack });

For webrtc I am using mediasoup

Now I want to do the same with the video. But there is no such thing like web video api so I am stuck. How can I accomplish this task.

Solution

  • There are some limitations, but you could refer to this sample implementation.

    It uses the captureStream() method.