Question

我正在制作一个示例应用程序，其中将有两个视频元素和一个“呼叫”按钮。第一个视频元素（#localVideo）将显示本地媒体流的输出。当我按下通话按钮时，远程视频元素将播放远程媒体流。我已经在原始JavaScript中制作了相同的应用程序，效果很好。

在VueJS中，我正在制作一个WebRTC组件来获取用户媒体并将流设置为本地视频元素。当用户按下通话按钮时，我将同时创建两个RTCPeerConnection对象，发送报价，设置本地描述，发送答案以及全部。

这是组件的模板-

<template>
  <div class="webRTC">
    <video id = "localVideo" playsinline autoplay muted></video>
    <button id = "call" v-on:click='call'> Call </button>
    <video id = "remoteVideo" playsinline autoplay controls></video>
  </div>
</template>

<script src="./webRTC.js"></script>

这是组件的脚本-

export default {
  name: 'webRTC',
  sockets: {
    connect: function () {
      console.log('Socket IO connected!')
    },

    TestConnection: function () {
      console.log('Test connection successful!')
    }
  },

  data: function () {
    return {
      localStream: null,
      remoteStream: null,
      pc1: null,
      pc2: null
    }
  },

  methods: {
    call: function () {
      this.pc1 = new RTCPeerConnection()
      this.pc1.addEventListener('icecandidate', e => this.addIceCandidate(this.pc1, e))

      this.pc2 = new RTCPeerConnection()
      this.pc2.addEventListener('icecandidate', e => this.addIceCandidate(this.pc2, e))
      this.pc2.addEventListener('track', this.gotRemoteStrem)

      this.localStream.getTracks().forEach(track => {
        console.log('Adding local stream')
        this.pc1.addTrack(track, this.localStream)
      })

      this.pc1.createOffer({ offerToReceiveAudio: 1, offerToReceiveVideo: 1 }).then(this.gotDescription)
    },

    gotRemoteStrem: function (event) {
      console.log('Got Remote stream')
      let remoteVideo = document.querySelector('#remoteVideo')
      this.remoteStream = event.streams[0]
      remoteVideo.srcObject = event.streams[0]
    },

    gotDescription: function (description) {
      console.log('Got description 1')
      this.pc1.setLocalDescription(description)
      this.pc2.setRemoteDescription(description)

      this.pc2.createAnswer().then(this.gotDescription2)
    },

    gotDescription2: function (description) {
      console.log('Got description 2')
      this.pc2.setLocalDescription(description)
      this.pc1.setRemoteDescription(description)
    },

    addIceCandidate: function (pc, event) {
      this.getOtherPC(pc).addIceCandidate(event.candidate).then(this.addIceCandicateSuccess).catch(this.addIceCandicateFailure)
    },

    addIceCandicateSuccess: function () {
      console.log('Ice candidate added successfully')
    },

    addIceCandicateFailure: function () {
      console.log('Ice candidate failure')
    },

    getOtherPC: function (pc) {
      if (pc === this.pc1) {
        return this.pc2
      }

      return this.pc1
    },

    gotDevices: function (stream) {
      let localVideo = document.querySelector('#localVideo')
      this.localStream = stream
      localVideo.srcObject = stream
    },

    handleMediaError: function (error) {
      console.error('Error:' + error.name)
    }
  },

  created: function () {
    console.log('webRTC is created!')
    let prom = navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(this.gotDevices).catch(this.handleMediaError)
  }
}

本地视频正常显示。我面临的问题是，当我按下Call按钮时，远程视频没有显示任何内容，而是在屏幕截图中看到了一个加载圆圈。也没有控制台错误。

我已调试并看到本地和远程视频的srcObject，它们似乎是相同的- 谁能告诉我我做错了什么吗？还有其他调试方法吗？

注意：

如果需要，可以从此处下载项目/源代码，然后可以下载并检查代码。我将尝试准备一个Codepen- https://drive.google.com/open?id=1e7C0ojZ0jT7EXFNtCKcWpJBpKd_mWi_s

Answer 1

使用没有async / await的承诺需要propagating errors manually并进行检查。

添加catch，例如在这里看到错误：

this.pc1.createOffer({offerToReceiveAudio: 1, offerToReceiveVideo: 1})
  .then(this.gotDescription)
  .catch(e => console.log(e)); // <-- here

...，您应该看到this内的undefined是gotDescription()。那是因为您将成员函数作为回调传递给then函数，该函数最终在没有this的情况下调用了该函数。使用this.gotDescription.bind(this)或（更细的）箭头功能。例如：

this.pc1.createOffer({offerToReceiveAudio: 1, offerToReceiveVideo: 1})
  .then(offer => this.gotDescription(offer)) // arrow function invoking on this
  .catch(e => console.log(e));

此外，除非您return all the promises，否则它们将不会形成捕获所有错误的单一链。

所有这些调用都返回承诺，您将忽略它们：

/* const unusedPromise1 = */ this.pc1.setLocalDescription(description)
/* const unusedPromise2 = */ this.pc2.setRemoteDescription(description)
/* const unusedPromise3 = */ this.pc2.createAnswer().then(this.gotDescription2)

幸运的是（可能是令人困惑的）， RTCPeerConnection 自动将对其执行的操作排队，因此，如果没有错误，可能会被吞噬，这可能会有效，具体取决于浏览器。

相反，要捕获错误，请执行以下操作：

this.pc1.setLocalDescription(description)
.then(() => this.pc2.setRemoteDescription(description))
.then(() => this.pc2.createAnswer())
.then(answer => this.gotDescription2(answer))
.catch(e => console.log(e))

或使用更好的async / await语法正确传播错误：

gotDescription: async function (description) {
  console.log('Got description 1')
  await this.pc1.setLocalDescription(description)
  await this.pc2.setRemoteDescription(description)
  await this.gotDescription2(await this.pc2.createAnswer());
}

使用VueJS的WebRTC：为什么不播放远程视频？

1 个答案: