getUserMedia | WebRTC中文网-最权威的RTC实时通信平台

媒体捕捉API给微软Edge浏览器带来了屏幕捕捉功能

作者：Angelina Gambo，Bernard Aboba（原文链接）翻译：刘通原标题：Bringing Screen Capture to Microsoft Edge with the Media Capture API 从EdgeHTML 17开始，Microsoft Edge浏览器是第一款通过Screen Capture API支持屏幕捕获的浏览器。今天，Web开发人员可以通过升级到Windows 10的2018年4月更新版本或使用我们的免费虚拟机开始构建此功能。 Screen Capture使用了由W3C Web实时通信工作组指定的新getDisplayMedia API。该功能可让网页捕捉用户设备的输出流，通常用于进行无插件的网络虚拟会议或者演示。使用Media Capure媒体捕捉，Micro Edge可以捕获所有Windows应用程序—包括Win32和通用Windows平台应用程序（UWP应用程序）。在这篇文章中，我们将介绍如何在Microsoft Edge浏览器中实施Screen Capture屏幕捕捉，以及我们未来版本的发展蓝图，以及针对想

YouTube是如何使用WebRTC的

作者：Philipp Hancke（原文链接）翻译：刘通原标题：YouTube Does WebRTC – Here’s How 我周二登录了一次YouTube，注意到右上角有一个新的摄像头图标，并写着“Go Live（New）”，所以我点了一下它试试看会发生什么。事实证明，你现在可以直接从浏览器进行直播。这听起来真的很像WebRC，所以我加载了chrome://webrtc-internals来查看，并确定它就是WebRTC。我们总是对大规模部署很好奇，所以我立即请WebRTC逆向工程大师Philipp “Fippo” Hancke进行更深入的调查。本文剩下的部分就是他对此的分析。— 编辑：chad hart 自2014年Hangouts分析以来，Chrome的webrtc-internals页面都为我们提供了很好的服务，我们将在此次再次使用它。由于YouTube在注册之后有24小时的冷却时间，所以我们最终分析的数据是由Tsahi Levent-Levi友善提供的，可以从此处下载。你

你该什么时候显示传入的WebRTC视频

作者：Philipp Hancke（原文链接）翻译：刘通原标题：When should you display incoming WebRTC video 自2011年的第一个版本以来，WebRTC规范已经发生了很大的变化。Jan-Ivar对多年来WebRTC的演变情况进行了精彩的总结，详见这篇文章。 Web开发人员的核心问题之一是何时显示传入的视频流。在第一版本中，规范有一个addstream事件，这是在设置远程描述时出发的。Addstream事件有一个流对象，你可以将视频元素的srcObject属性设置为该流对象，如下所示（使用更现代但相似的轨道事件）： 1const pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection(); 2 3pc2.ontrack = e => { 4 console.log('got track', e.track, e.streams); 5 remoteVideo.srcObject = e.streams[0]; 6}; 7 8pc2.onic

WebRTC adapter.js是什么以及我们为什么需要它？（二）

作者：Tsahi Levent-Levi，Philipp Hancke（原文链接）翻译：刘通原标题：What is WebRTC adapter.js and Why do we Need it? 前文链接：WebRTC adapter.js是什么以及我们为什么需要它？（一）现在的adapter.js 如果你只想做一个简单随意的项目的话，你可以选择在代码里加入https://webrtc.github.io/adapter/adapter-latest.js。这是最新的发布版本。但是需要注意的是，你的应用程序会自动提取所有更改，因此我们不建议将它用于较大的应用程序。 adapter.js下载的主要来源是NPM。大多数JavaScript项目中，你可以按照如下方式安装webrtc-adapter： npm install webrtc-adapter 注意：因为adapter.js会操纵核心WebRTC JavaScript API升级，所以这有点冒险。因此我们建议在升级该版本的时候保留package.json文件中所指定的确切版本，并且在更新之

WebRTC adapter.js是什么以及我们为什么需要它？（一）

作者：Tsahi Levent-Levi，Philipp Hancke（原文链接）翻译：刘通原标题：What is WebRTC adapter.js and Why do we Need it? adapter.js是结合你代码和不同浏览器的WebRTC实现的粘合剂。本篇文章是和Philipp Hancke一同撰写的。在过去两年中，他一直在助理adapter.js的发展，所以邀请他来完成本文章的一大部分内容是非常合适的。你可以在这里看到他的其他文章作品。这是在我最开始研究WebRTC的时候做的一个图：这里的主要概念是展示WebRTC与传统VoIP的不同之处。在传统VoIP中，你有多个供应商实施该规范，希望实现能够相互协作。如果你知道一个VoIP的实现，它也不代表你也能了解另一个VoIP的能力。 WebRTC有所不同，它有很多概念都没有规定，但也规定了HTML5；我的意思是让每个开发人员都可以使用一个API将交互式语音和视频添加到他的应用程序中。 getUserMedia，PeerConnection和数据通道都是WebRTC中指定的API。而这也创造了一个生

利用WebRTC和TensorFlow通过网络实现计算机视觉3

作者：Chad Hart（原文链接）翻译：刘通原标题：Computer Vision on the Web with WebRTC and TensorFlow 前文连接：利用WebRTC和TensorFlow通过网络实现计算机视觉1；利用WebRTC和TensorFlow通过网络实现计算机视觉2 第3部分——浏览器端开始之前，请先在项目的根目录位置创建一个static目录。我们将从这里提供HTML和JavaScript。现在，我们首先使用WebRTC的getUserMedia抓取一个本地摄像头Feed。从这里，我们需要将该Feed的快照发送到刚刚创建的对象检测Web API，获取结果，然后使用画布实时地在视频上显示这些结果。 HTML 我们先创建local.html文件：此网页的作用如下：使用WebRTC adapter.js代码填充(polyfill) 设置一些样式，以便将各个元素一个个叠加起来将视频放在底部，这样我们就能使用画布在它上面绘图为我们的getUserMedia流创建一个视

利用WebRTC和TensorFlow通过网络实现计算机视觉1

作者：Chad Hart（原文链接）翻译：刘通原标题：Computer Vision on the Web with WebRTC and TensorFlow TensorFlow是现在最受欢迎的机器学习框架。TensorFlow的一大优点就是很多库都在积极的维护和更新。我最喜欢的一个就是TensorFlow Object Detection API（对象检测API）。TensorFlow Object Detection API可以在图像中识别并且显示出多个物体。它预先训练了将近1000个物体类别，并且提供各种预先训练的模型，让你在速度和准确性之间做出选择。本篇教程非常好，但是所有事情都依靠于使用你需要自己加入文件夹的图像。我真的很想把这点加入到实时的WebRTC流中以实现在网页端的实时机器视觉。我找不到关于这些的任何例子或者教程，所以我就打算自己来写一篇。对于从事RTC的人来说，这是一篇如何使用TensorFlow来处理WebRTC数据流的快速教程。对于从事TensorFlow的人来说，这是一个如何将WebRTC加入你项目的简单介绍。WebRTC开发人员需要习

WebRTC是如何工作的3

作者：Tsahi Levent-Levi（原文链接）翻译：刘通原标题：How WebRTC Works 前文链接：WebRTC是如何工作的1; WebRTC是如何工作的2 WebRTC API视角 WebRTC主要有三个主要的API大类： 1. getUserMedia 2. PeerConnection 3. Data Channel getUserMedia getUserMedia负责让用户能够访问摄像头，麦克风和屏幕。它对那些在本地上工作，而不需要实时通话的人来说也有价值。一下是独立的getUserMedia的一些应用： # 拍摄用户的档案照片 # 采集音频样本，并且把它们发给语音转文字引擎 # 录制音频和视频，而不会由于丢包导致质量下降我相信你还能想到一些其他的应用 PeerConnection PeerConnection是WebRTC的心脏，也是最难实现最难理解的部分。从某种程度上来说，它可以做任何事情。 # 它处理所有的SDP消息交换过程（不通过网络本身发送，而是生成他们并处理输入的消息） # 它实现ICE以连接媒体通道，如

现在能听见我了吗？WebRTC中的音频

作者：Hector Zelaya, webrtc.ventures（原文链接）翻译：刘通原标题：Can You Hear Me Now? … A WebRTC Audio Demo 对WebRTC是如何处理音频的感兴趣？本文包括一个简单的WebRTC音频demo，会给你展示如何获取音频设备，如何实时的检测数据流中产生的变化。引文设想一个场景：你等了好久的重要视频通话终于要进行了，花了几分钟检查一下头发是不是凌乱，牙缝上没有菜叶，自己打扮的光鲜亮丽。现在你打开了浏览器，粘贴会议链接。你看到另一端的人已经上线了，所以你非常兴奋的点了“加入”按钮，清清嗓子打个招呼。你看见对方的嘴巴在动可是你却听不见任何声音，能看出来他说的是“你能听见我说话吗？”但还是没有声音。两个人都在疯狂的对着麦克风说“你现在能听见我了吗”，而且弄明白哪出问题了浪费了宝贵的时间。对方很有可能还不会用这个会议应用，不知道是麦克风静音了还是根本就没有音频数据。和上述场景差不多的情况发生时，很有可能是因为多种原因造成的，需要进行一些

在Firefox中进行屏幕捕捉

作者：Phil Nash（原文链接）翻译：刘通原标题：Screen Capture in Firefox 相关文章：在Chrome中进行屏幕捕捉1 在Chrome中进行屏幕捕捉2 屏幕共享是你可以加进视频聊天里的一项非常有用的功能。我们之前谈论过如何在Chrome中进行屏幕捕捉。当然只在Chrome中运行还不够好，这次让我们来看看怎么在Firefox浏览器上做到同样的事情。你需要： # Firefox浏览器 # 一个文字编译器 # 一个本地Web服务器—我喜欢使用servedir # ngrok或者类似的隧道服务，或者为主机设置的TLS证书（稍后我们会解释为什么）屏幕捕捉我们并不能在Chrome上直接对我们的应用实施屏幕捕捉，所以我们用到了扩展程序。另一方面，Firefox已经从33版本开始就支持屏幕捕捉，使用的是mediaDevices API中的mediaSource约束。但是，在Firefox 52版本之前，你的网站需要被加入到Firefox屏幕捕捉的白名单中才可以。你通过在Firefox中打开about:config可以看到白名单

Search Results for: getUserMedia – Page 4