Search Results for: getUserMedia – Page 5

通信革命—从击鼓吹号到WebRTC

作者:Rillmar Ortiz,webrtc.ventures(原文链接) 翻译:刘通 原标题:[The Evolution of Communications] From Drums & Horns to WebRTC on Mobile Devices! 我们必须得承认,如今在排队或者地铁上不玩手机基本上是不可能的事情。如果我们不能与亲人朋友或者周围其他人进行交流通信的话就会感觉浑身不自在。短信,email,电话是很不错,但是我们更希望能够进行面对面,实时的视频通信。本篇文章将将要介绍WebRTC在移动设备上的演进过程。 我们是如何从击鼓吹号一步一步的变成在移动设备上进行实时音视频通信的呢? 从一开始,人来就已经发展出多种沟通的方式,并且不断的演变成规模更大效果更好的方式。          # 公元前3000年左右,开始有文明使用鼓和号角进行远距离的交流。          # 16世纪,海军开始使用旗语进行沟通

在Chrome中进行屏幕捕捉2

作者:Phil Nash(原文链接) 翻译:刘通 原标题:Screen capture in Google Chrome 前文连接:在Chrome中进行屏幕捕捉1 搭建屏幕捕捉功能 在这篇博文的剩余篇幅中,我们要来看看如何用我们新写的扩展程序进行屏幕捕捉。 我们在项目文件夹中创建一个新的路径叫做chrome,在chrome里面建一个新的HTML页,叫做index.html。添加以下标记: 这是一个基本的HTML页面,其中包含一个<video>元素来展示我们的结果,两个按钮来控制屏幕捕捉的开启和关闭,以及一个<script>块我们稍后用来写其余的代码。 我们以收集将要使用的DOM元素着手来进行代码的编写。我们还为稍后要进行扩展的请求设置了一个对象。记住我们可以提供我们想要选择的来源。在这个应用中,我们将要可以选择分享整个屏幕,分享app窗口,还是分享chrome浏览器的一个标签页。你还需要之前在chrome中加载你的扩展程序时的ID。把这些加到<script>块中: 现在,开始捕捉桌面。当我们想要通过点击按钮获取屏幕内容的时候,我们会给扩展程序发送一个

来自于专业人士的WebRTC贴士

作者:Jeremy Noring(原文链接) 翻译:刘通 原标题:WebRTC pro-tips 根据我过去几年的工作和学习经验,我列出了创建WebRTC产品的时候一些小技巧(下文中排练无先后顺序)。 常规提示 # 使用adapter.js—这会让你避免很多的痛苦。否则,你就必须要处理非常非常多的因为浏览器差别而产生的错误,这不值得你浪费时间。 # 如果你使用了插件,那么你需要给navigator.mediaDevices.getUserMedia,navigator.mediaDevices.enumerateDevices,RTCPeerConnection,MediaStream以及MediaStreamTrack写兼容性保障代码。长远来说,这么做会减少以后的工作量。 # 不要兼容旧版本的Chrome和Firefox。对于Firefox来说,通常来说我只支持对心的LTS版本(现在是52)。对于Chrome来说,我会允许最近4个版本使用。这些浏览器的旧版本会给你带来各种各样的麻烦。 SFU/MCU 如果你的通话是为了很多人一同参与准备的,那么你一定需要SFU或者MCU。

WebRTC Externals—跨浏览器的WebRTC debug扩展程序

作者:Philipp Hancke(原文链接) 翻译:刘通 原标题:WebRTC Externals – the cross-browser WebRTC debug extension 我是Chrome中webrtc-internals工具的忠实粉丝。这是针对WebRTC最重要的debug工具之一,在它2012年被加入Chrome中去的时候我的工作就变容易了很多。我最近还与Tsahi Levent-Levi一并写了一系列的博文,介绍了如何使用webrtc-internals来进行debug。 Firefox也有一个相似的工具,about:webrtc网页,展示了每个网页的本地和远端SDP以及一个非常有用的ICE候选项网格。但是与Chrome不同,它不会显示API的准确顺序或者从getStats API获得的图表。Edge和Safari还没有类似的debug工具。 分别使用这些不同功能的debug工具来支持WebRTC服务是比较麻烦的事情,要是有一个统一的WebRTC debug工具那该有多好。所以我决定做一个。我最后从我们WebRTC Notifier中提取了一些老代码并

WebRTC教程—屏幕共享

作者:deepstreamHub(原文链接) 翻译:刘通 原标题:WebRTC 05: Screen Sharing 前一篇:WebRTC教程—音频与视频   在本篇讲解屏幕共享教程中我们并不会直接谈论到WebRTC。为什么?因为从你电脑屏幕发出的视频跟我们在上一篇“音频与视频”教程中所讲到的一样,也是媒体流,可以用完全一样的方法将其附在PeerConnection上。区别在于:这个媒体流相对于“音频与视频”教程中的媒体流要难获取的多。 (点击图片跳转到原文查看例子) 从你的屏幕内容中获取MediaStream 概括地说,从你的浏览器窗口或者桌面中提取媒体流需要三个步骤: 唤起屏幕捕捉对话框: 弹出的窗口如下图所示: 一旦用户确认了之后,通过sourceID唤起的onResponse需要被传给navigator.getUserMedia()作为视频约束定义的一部分 我们需要做的就是将我们的数据流要么附在WebRTC PeerConnection上,要么在一个视频单元中播放。 困难的部分 但是:这项功能目前只在Chro

WebRTC教程—音频与视频

作者:deepstreamHub(原文链接) 翻译:刘通 原标题:WebRTC 03: Audio & Video 上一篇:WebRTC教程—多到多连接 一旦你知道了如何在两个对等端之间建立WebRTC连接之后,在连接中加入音频和视频流就会变得出乎意料的简单。 (点击图片跳转到原文查看例子) 首先我们需要使用浏览器的navigator.getUserMedia来获取用户麦克风和摄像头的权限。在我们可以使用一个流的时候,我们储存一份作为参照,使用URL.createObjectURL( stream )将其加到视频元素上,然后建立我们的P2P连接。 当建立连接的时候,我们将流作为一个参数加到里面: 只要数据流变得可用,就会在另一个客户端处触发一个‘stream’事件。在接收到这个事件之后我们要再次将它加到一个HTML5视频标签上。 这基本就是需要建立简单音视频聊天的全部过程了。请点击此处查看完整代码,或者在多个标签页中打开此网页然后用下面的demo与自己聊天。 真的只需要这些吗? 如果你经常使用视频会议软件,你就会深刻意识到这点:软件工作的不是

麦克风约束

作者:Jan-Ivar Bruaroey(原文链接) 翻译:刘通   又有两个新的麦克风约束得到了标准化,现在可以在adapter.js或者Firefox Nightly上使用: 如果你是音乐家或者医生的话会觉得很有用,因为WebRTC中的音频最初就是为了传递语音来设计的,而不是为了听一段吉他即兴演奏或者远程监听心跳而设计的。 基本上Firefox和Chrome一开始就通过浏览器引擎前缀实现了这个功能,但是并没有得到足够的重视。也许听听别人的一件会有帮助。 下面也展示了媒体捕捉细则中的其他部分。注意,这个demo只能在Firefox浏览器上运行,因为它使用了applyConstraints,而Chrome浏览器还不支持它。 提示:在点击“Result”键之前请戴上耳机。运行结果和HTML代码请点击此处跳转原文查看。 var track, gUM = c => navigator.mediaDevices.getUserMedia(c);   (async () => {   spectrum(audio.srcObjec

WebKit详细分析苹果的WebRTC

作者:Youenn Fablet,Jon Lee(原文链接) 翻译:刘通 原标题:A Closer Look Into WebRTC 我们最近宣布了High Sierra系统和iOS 11系统中的Safari 11支持WebRTC。今天,我们想要更详细地讲讲我们的实现,以及提供一些如何将WebRTC加入你的网站的建议。 使用WebRTC和媒体捕捉的网站能够获得并广播非常隐私的个人信息。用户必须非常的信任这个网站,认为网站会合规合理地使用他们的影像。WebKit要求网站必须达到指定的规定,以确保其用户隐私的安全。另外,Safari会在使用摄像头、麦克风等捕捉设备的时候提示用户,用户可以控制网站对这些捕捉设备权限。对于开发者来说,在他们的app中,RTCPeerConnection和RTCDataChannel在任何网页视图中都可以使用,但是Safari暂时还限制摄像头和麦克风的权限。 开发菜单 Safari技术预览版34版展示了各种flag可以让测试WebRTC网站的工作变得更简单,或者可以通过Develop > WebRTC子页面中将Safari整合到你的连续集成系统: 我们会在

Safari版WebRTC详细分析(二)

作者:Chad Hart(原文链接) 翻译:刘通 原文标题:Reeling in Safari on WebRTC – A Closer Look at What’s Supported 相关文章:Safari版WebRTC详细分析(一)   RTCPeerConnection 音频编解码器          在音频方面,Safari看起来非常像Chrome,支持Opus,ISAC,G722,iLBC和G.711,并且都具备舒适噪声和DTMF选择。有趣的是,Chrome不提供对iLBC的支持。   视频编解码器          更有争议的是视频编解码器,Safari并不支持VP8或者VP9,只支持H.264。IETF规范规定WebRTC浏览器必须支持VP8和H.264,所以Safari其实上并不符合这项规范。       &

Safari版WebRTC详细分析(一)

作者:Chad Hart(原文链接) 翻译:刘通 原文标题:Reeling in Safari on WebRTC – A Closer Look at What’s Supported            在WebRTC开发人员们漫长的等待之后,苹果终于在这个月早些时候加入到了WebRTC阵营。苹果在月初声明基于Google支持的webrtc.org引擎的WebKit即将登录High Sierra—新版本OSX的名称—以及iOS.11系统。还有一个更好的消息,WebRTC现在已经作为免费Safari Technology Preview的一部分供大家使用了。          这件事情作为WebRTC发展路程上的里程碑,已经有非常多的文章对其进行过报道。我们想要对其进行更深度的探讨,以发现Safari版本的WebRTC究竟包含什么,以及不支持什么。我从运行test.w