Как отправить статический видеофайл из одного браузера в другой браузер с помощью webRTC?

Я хочу отправить статический видеофайл из одного браузера в другой браузер и хочу воспроизвести этот файл после его получения во втором браузере с использованием webRTC. Я новичок в webRTC и понятия не имею об этом. Просто хочу создать простую демонстрацию без какого-либо сервера. Я создаю эту демонстрацию в angular 9.


javascript webrtc simplewebrtc
person Umesh Patadiya    schedule 07.04.2020    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Посмотрите демонстрацию образцов webRTC — https://webrtc.github.io/samples/src/content/datachannel/filetransfer/

Код — https://github.com/webrtc/samples/tree/gh-pages/src/content/datachannel/filetransfer

person Karthik    schedule 07.04.2020
comment
Он передается на той же вкладке браузера, а я хочу поделиться файлом из одного браузера в другой браузер, например, из Mozilla в Chrome. - person Umesh Patadiya; 11.04.2020
comment
Картик, есть ли другое решение для того же? - person Umesh Patadiya; 16.04.2020

arrow_upward
0
arrow_downward

Я хочу поделиться файлом из одного браузера в другом браузере, например, из Mozilla в Chrome.

Сначала вам нужна какая-то форма обнаружения, общая точка контакта — например, сигнальный сервер в локальной сети — между Firefox и Chrome. , или будьте готовы обеспечить рукопожатие вручную с помощью вырезания и вставки.

Демонстрировать серверы сложно, поэтому вот демо-копия вручную (open в обоих браузерах):

(Отказ от ответственности: это не будет похоже на большинство кода WebRTC. Для этого см. вместо этого ответа)

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>

Это должно работать в Интернете — по модулю симметричных NAT — при условии, что вы обмениваетесь предложением/ответом в разумные сроки.

person jib    schedule 01.06.2020