您好，Safari 11上的WebRTC

WebRTC终于来到Safari

今天早上，我醒了，我们所知道的网络已经发生了巨大的变化。 WebRTC的梦想是实现开放Web的无处不在的p2p实时通信。 作为今年Apple出色的WWDC盛宴的一部分，他们在Safari 11中提供了对WebRTC的支持。 是。 现在毫无疑问，在未来的几天，几周和几个月里，将会有很多关于该主题的优秀文章，但是我只想分享我编写的演示应用程序。 眼见为实。

如果您已升级到iOS 11开发人员beta或macOS开发人员beta，则只需转到此处并允许像其他任何WebRTC演示一样访问您的相机即可。 这在移动设备上尤其令人惊奇。 如果您通过移动设备访问，请单击视频以从面向用户的摄像头切换到面向环境的摄像头。

如果您以前使用过WebRTC，则不会有很多重大更改，但是我个人之前没有处理过摄像机的选择，因此，这是我为该演示编写的代码的细分。

首先创建一个 dom元素，并为其提供以下属性。

  var video = document.createElement（'video'）; 
  video.style.width = document.width +'px'; 
  video.style.height = document.height +'px'; 
  video.setAttribute（'autoplay'，''）; 
  video.setAttribute（'muted'，''）; 
  video.setAttribute（'playsinline'，''）; 

下一步，设置您的WebRTC约束，包括视频将面对的方式。 在这种情况下，我希望它面向用户。

  var FaceingMode =“用户”; 

  var约束= { 
 音频：错误， 
 视频： { 
  faceingMode：faceingMode 
  } 
  } 

然后通过传递约束并侦听成功回调来启动getUserMedia 。 如果一切顺利，请将该流作为视频dom元素上的src传递。

  navigator.mediaDevices.getUserMedia（constraints）.then（function success（stream）{ 
  video.srcObject =流； 
  }）; 

最后，将视频dom元素附加到您的身体上。

  document.body.appendChild（video）; 

只是为了好玩……这是一段代码片段，可通过单击视频在手机上从正面和背面的摄像头翻转。

  video.addEventListener（'click'，function（）{ 
 如果（faceingMode ==“ user”）{ 
  facingMode =“环境”； 
  }其他{ 
  facingMode =“用户”； 
  } 

 约束= { 
 音频：错误， 
 视频： { 
  faceingMode：faceingMode 
  } 
  } 

  navigator.mediaDevices.getUserMedia（constraints）.then（function success（stream）{ 
  video.srcObject =流； 
  }）; 
  }）; 

我想对大多数Web开发人员说我的话，我要感谢 Apple团队将此开放标准作为优先事项。 现在该轮到我们用有趣的作品打动他们了。 祝大家好运！