PROSAGA码农传奇-webrtc-WebRTC使用VueJS：为什么远程视频没有播放？

<div class =“post-text”itemprop =“text”>
  
    没有使用承诺
     <code>
 async
 </code>
    /
     <code>
 await
 </code>
     要求
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises#Error_propagation" rel="nofollow noreferrer">
      手动传播错误
    </A>
     并检查他们。
  
  
    添加一个
     <code>
 catch
 </code>
     例如在这里看错误：
  
   <pre>
 <code>
 this.pc1.createOffer({offerToReceiveAudio: 1, offerToReceiveVideo: 1})
 .then(this.gotDescription)
 .catch(e => console.log(e)); // <-- here

</code>
 </pre>
  
    ......你应该看到
     <code>
 this
 </code>
     是
     <code>
 undefined
 </code>
     内
     <code>
 gotDescription()
 </code>
    。那是因为你将一个成员函数作为回调函数传递给了
     <code>
 then
 </code>
     函数，最终在没有的情况下调用它
     <code>
 this
 </code>
    。要么使用
     <code>
 this.gotDescription.bind(this)
 </code>
     或（更好）箭头功能。例如。：
  
   <pre>
 <code>
 this.pc1.createOffer({offerToReceiveAudio: 1, offerToReceiveVideo: 1})
 .then(offer => this.gotDescription(offer)) // arrow function invoking on this
 .catch(e => console.log(e));

</code>
 </pre>
  
    此外，除非你
    <a href="https://stackoverflow.com/a/37084467/918910">
      回报所有的承诺
    </A>
    ，他们不会形成一个单一的链来捕捉所有的错误。
  
  
    所有这些调用都会返回承诺，你忽略了：
  
   <pre>
 <code>
 /* const unusedPromise1 = */ this.pc1.setLocalDescription(description)
/* const unusedPromise2 = */ this.pc2.setRemoteDescription(description)
/* const unusedPromise3 = */ this.pc2.createAnswer().then(this.gotDescription2)

</code>
 </pre>
  
    幸运的是（也许是令人困惑的），
    
      RTCPeerConnection
    
     自动对在其上完成的操作进行排队，因此这可能实际上有效，前提是没有错误，可能会被吞下，具体取决于浏览器。
  
  
    相反，要捕获错误，请执行以下操作：
  
   <pre>
 <code>
 this.pc1.setLocalDescription(description)
.then(() => this.pc2.setRemoteDescription(description))
.then(() => this.pc2.createAnswer())
.then(answer => this.gotDescription2(answer))
.catch(e => console.log(e))

</code>
 </pre>
  
    或使用更好的
     <code>
 async
 </code>
    /
     <code>
 await
 </code>
     正确传播错误的语法：
  
   <pre>
 <code>
 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());
}

</code>
 </pre>
</DIV>