How to send a static video file from one browser to another browser using webRTC?

Question

I want to send a static video file from one browser to another browser and want to play that file after receiving it on the second browser using webRTC. I'm newbie to webRTC and don't have any idea about that. Just want to create a simple demo without any server. I'm creating this demo in angular 9.

Answer 1

Check the webRTC samples demo - https://webrtc.github.io/samples/src/content/datachannel/filetransfer/

Code - https://github.com/webrtc/samples/tree/gh-pages/src/content/datachannel/filetransfer

Answer 2

I want to share the file from one browser to another browser like Mozilla to Chrome

You need some form of discovery first, a shared point of contact—like a signaling server on the LAN—between Firefox and Chrome, or be willing to provide the handshake manually through cut'n'paste.

Servers are hard to demo, so here's a manual cut'n'paste demo (open in both browsers):

(Disclaimer: this won't look like most WebRTC code. For that see this answer instead)

const config = {iceServers: [{urls: "stun:stun.1.google.com:19302"}]};
const pc = new RTCPeerConnection(config);

pc.onsignalingstatechange = () => div.innerText = pc.signalingState;
pc.oniceconnectionstatechange = () => div.innerText = pc.iceConnectionState;

copyOffer.onclick = async () => {
  if (pc.signalingState != "stable") return;
  const streams = [new MediaStream()];
  for (const kind of ["video","audio"]) pc.addTransceiver(kind, {streams});
  await pc.setLocalDescription();
  pc.onicecandidate = e => {
    if (e.candidate) return;
    offer.focus();
    offer.value = pc.localDescription.sdp;
    offer.select();
    document.execCommand("copy");
    answer.placeholder = "Paste answer here";
  };
};

offer.onkeyup = async e => {
  if (pc.signalingState != "stable") return;
  await pc.setRemoteDescription({type: "offer", sdp: offer.value});
  await pc.setLocalDescription();
  pc.onicecandidate = e => {
    if (e.candidate) return;
    answer.focus();
    answer.value = pc.localDescription.sdp;
    answer.select();
    document.execCommand("copy");
  };
};

answer.onkeyup = async e => {
  if (pc.signalingState != "have-local-offer") return;
  await pc.setRemoteDescription({type: "answer", sdp: answer.value});
}

browse.onchange = async () => {
  try {
    video.src = URL.createObjectURL(browse.files[0]);
    if (!video.captureStream) video.captureStream = video.mozCaptureStream;
    const stream = video.captureStream();
    await video.play();
    const [vid, aud] =  pc.getTransceivers();
    await Promise.all([
      vid.sender.replaceTrack(stream.getVideoTracks()[0]),
      aud.sender.replaceTrack(stream.getAudioTracks()[0])
    ]);
  } catch (e) {
    console.log(`${e.name}: ${e.message}`);
  }
};
pc.ontrack = ({track, streams}) => {
  video.srcObject = streams[0];
  track.onunmute = () => video.play();
};

<table><td>
1. On side A: <button id="copyOffer">Copy offer</button><br>
2. On side B: <textarea id="offer" placeholder="Paste offer here"></textarea><br>
3. On side A: <textarea id="answer"></textarea><br>
4. <input type="file" id="browse" accept="video/*"/><br>
5. Step 4 can be repeated<br>
<div id="div"></div></td><td>
<video id="video" width="300" controls></video></td></table>

This should work across the internet—modulo symmetric NATs—provided you exchange the offer/answer in a reasonable amount of time.