javascript - WebRTC - 是否可以让浏览器代理视频从源到接收器?

标签 javascript html webrtc

例如:

  • 浏览器 A 正在广播视频
  • 浏览器 B 是中间人
  • 浏览器 C 正在接收视频

浏览器 B 充当 A 和 C 之间的中介,是否可以做这样的事情?

其次,B 是否可以既观看 A 播放的视频,又将其转发给 C?

最佳答案

当然,这很好用。 (对于 Chrome,请使用 https fiddle):

function Hop() {
  this.pc1 = new RTCPeerConnection();
  this.pc2 = new RTCPeerConnection();

  var add = (pc, can) => can && pc.addIceCandidate(can).catch(log);
  this.pc1.onicecandidate = e => add(this.pc2, e.candidate);
  this.pc2.onicecandidate = e => add(this.pc1, e.candidate);
  this.pc2.oniceconnectionstatechange = e => log(this.pc2.iceConnectionState);
};
Hop.prototype.send = function(stream) {
  this.pc1.addStream(stream);
  return Promise.all([
    new Promise(resolve => this.pc2.onaddstream = resolve),
    this.pc1.createOffer()
      .then(offer => this.pc1.setLocalDescription(offer))
      .then(() => this.pc2.setRemoteDescription(this.pc1.localDescription))
      .then(() => this.pc2.createAnswer())
      .then(answer => this.pc2.setLocalDescription(answer))
      .then(() => this.pc1.setRemoteDescription(this.pc2.localDescription))
  ])
  .then(results => results[0].stream);
};

var AtoB = new Hop(), BtoC = new Hop();

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => AtoB.send(v1.srcObject = stream))
  .then(stream => BtoC.send(v2.srcObject = stream))
  .then(stream => v3.srcObject = stream)
  .catch(e => log(e));

var log = msg => div.innerHTML += msg + "<br>";
<video id="v1" height="120" width="160" autoplay muted></video>
<video id="v2" height="120" width="160" autoplay></video>
<video id="v3" height="120" width="160" autoplay></video><br>
<div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

您可以根据需要创建任意数量的跃点。

关于javascript - WebRTC - 是否可以让浏览器代理视频从源到接收器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37018168/

相关文章:

javascript - 使用iframe嵌入有哪些陷阱

ios - 在 webRTC iOS 中设置视频大小

webrtc - 如何在 webrtc 中获取远程视频宽度和高度

javascript - 使用 JQuery 通过 Ajax 请求时未下载文件

javascript - 在 JavaScript 上将图像背景设置为形状

javascript - Node simple-ssh 退出时没有错误

html - CSS 布局困难,站点在 chrome 中表现良好,但在 Firefox 中表现不佳

html - CSS 转换文本

javascript - 如何将类添加到动态创建的 DOM 元素或类中

javascript - WebRTC 方法 reattachMediaStream 的用途是什么?