Search Results for: getUserMedia

getUserMedia()音频约束

作者:addpipe.com(原文链接) 翻译:刘通 原标题:Supported Audio Constraints in getUserMedia() 相关文章:getUserMedia()视频约束 getUserMedia()音频约束 媒体捕捉和流规范管理着所有浏览器应该实现的跨浏览器音频选项,并且在最新的候选推荐标准中,定义了不少的音频约束。 下面是完整的清单,还附有说明和我对数字声音工作原理的解释: # sampleRate:指定一个所需的采样率,不确定它应该被用作编码设置还是作为硬件要求,越高越好(比如CD的采样率就是44000 samples/s或44kHz)。 # sampleSize:每个采样点大小的位数,越高越好(CD的采样大小为16 bits/sample) # volume:从0(静音)到1(最大音量)取值,被用作每个样本值的乘数 # echoCancellation:是否使用回声消除来尝试去除通过麦克风回传到扬声器的音频 # autoGainControl:是否要修改麦克风的输入音量 # noiseSuppression:是否尝试去除音频信号中的背景噪声 # l

getUserMedia()视频约束

作者:addpipe.com(原文链接) 翻译:刘通 原标题:getUserMedia() Video Constraints WebRTC在持续不断地发展,它其中最广为人知的一个函数就是getUserMedia()。有了它,你就可以访问设备的摄像头和麦克风,并且可以请求视频流,音频流或者两者同时请求。 在本篇文章中,我们会聚焦于通过getUserMedia()请求视频流时可用的视频约束。 MediaStreamConstraints getUserMedia()函数仅接收一个参数,MediaStreamConstraints对象用于指定要请求的轨道类型(音频,视频或二者)以及(可选)每个轨道的任何要求。 下面是一个基本的示例,展示了这个对象是如何发送给更新的、基于promise的getUserMedia(): 约束项可以具有下面这两个属性中的一个或两个:          # video—表示是否需要视频轨道        

getUserMedia()出现的常见错误

作者:Pipe(原文链接) 翻译:刘通 原标题:Common getUserMedia() Errors 在你的getUserMedia()开始运行的那一瞬间,就会遇到各种各样的错误:          1. 用户没有摄像头,只有一个麦克风          2. 用户(不小心地)拒绝了浏览器的使用摄像头请求          3. 用户在你的getUserMedia()代码已经初始化之后才将摄像头/麦克风插到电脑上          4. 媒体设备已经被其他的应用所占用了          5. 只针对Firefox:设备已经被Firefox浏览器的其他标签页所占用了 为了解决这些状况,在管

使用getUserMedia在安卓设备上录屏

作者:Paul Kinlan(原文链接) 翻译:刘通            我一直坚信在几乎所有的科技报告中展示直播demo是一件非常好的事情。它给人一种真切的感觉,也不是很难实现。在实现过程中,肯能会遇到很多的困难,比如说Demo出错了,网络连接突然断掉,代码中的错误显现出来,服务配额问题等等。          为了解决实时Demo中潜在的这些问题,我经常会对Demo实现进行屏幕录制,展示如何使用它。它实际上就是想要进行现场展示的demo,只不过是事先录好放在了幻灯片里而已。这会让我将精力更好地集中在输出上,而不是放在编写代码或者担心demo会出错上。当然这个办法不适用于所有人,但是对我来说是十分不错的。          为了完成屏幕录制,我已经创建了一些工具来帮助屏幕录制,有设备框架的屏幕录制,以及一个整洁的网页应用可以将一个设备框

关于getUserMedia提示窗的讨论

Philipp Hancke         又来死磕数据了。。。这次我们来探讨一下从调用getUserMedia到成功回调之间的时间。为什么这点这么重要值得单独拿出来讨论呢?绝大多数情况中这是用户与WebRTC所进行的第一次交互行为。而且就像我之前的同时Lynn Fisher在一篇超精彩的博客中所写到的那样,“为用户做好这次交互的准备是十分重要的,并且对了解每个浏览器的quirks模式(怪异模式)也同样重要”。         当一个网页调用getUserMedia的时候,这时浏览器就会特别地弹出提示窗口询问用户是否授权网页使用摄像头和麦克风。在Chrome和Firefox上,浏览器可以记住这项授权并且一直保留已授权的状态。         我们先暂时忽略失败的情况。因为Firefox和Chrome在这点上有着迥然的UI,所以我们需要在仔细观察前把数据分一下类: 同样也可以在Firefox中用这个查询方法。进一步向分开Chrome和Opera

撸一个多人视频聊天 — 前端 WebRTC 实战(一)

  前言 【 从头到脚 】会作为一个系列文章来发布,它包括但不限于 WebRTC 多人视频,预计会有: WebRTC 实战(一):也就是本期,主要是基础讲解以及一对一的本地对等连接,网络对等连接。 WebRTC 实战(二):主要讲解数据传输以及多端本地对等连接、网络对等连接。 WebRTC 实战(三):实现一个一对一的视频聊天项目,包括但不限于截图、录制等。 WebRTC + Canvas 实现一个共享画板项目。 作者开源作品 Vchat — 一个社交聊天系统(vue + node + mongodb) 6 的系列文章 因为文章输出确实要耗费很大的精力,所以上面计划不一定是这个发布顺序,中间也会穿插发布其它方向的文章,如 Vue、JavaScript 或者其他学习的主题。在文章里,会把我自己遇到过的一些坑点重点提示大家注意,尽量让大家在学习过程中少走弯路。当然,我的也并不是标准答案,只是我个人的思路。如果大家有更好的方法,可以互相交流,也希望大家都能有所收获。 在这里也希望大家可以 关注 一波,你们的关注支持,也能激励我输出更好的文章。 本文示例 源码库 webrtc-str

Chrome 70使用getDisplayMedia()进行屏幕捕捉

在Eede之后,Chrome是第二个通过navigator.getDisplayMedia()添加符合标准的屏幕捕捉的浏览器。 Chrome70的简介在八月宣布,并在十月的discuss-webrtc Google group中确认下来。 这个特点目前设置在一个标示下,你需要更新到Chrome70,然后进入chrome://flags/开启网络试验平台。 之后仿照本文范例你就可以在Chrome扩展中记录你的屏幕。 在以前,在Chrome中的屏幕捕捉就是有可能的,但是你需要一个分离的扩展,它需要在Chrome网络商店中下载。在二月份,我们开发出一个扩展,使用了Pipe recorder. Chrome70让我们一睹未来。 为了获取Chrome70中屏幕的媒体流,只需以下几行代码:   navigator.getDisplayMedia({ video: true }) .then(stream => { console.log(“Awesome”); }, error => { console.log(“Unable to acquire screen captur

使用WebRTC创建一个网络摄像头通信App

  WebRTC是一个协议,允许人们使用JavaScript在两点之间创建实时通讯。 我们可以用这个结构使两个或更多浏览器之间实现直接交流,而不需要中心服务器。 服务器只需要在连接的时候被使用,因此每个客户端知道如何连接彼此。 我们可以使用这个特性创建什么类型的App呢?例如,直接网络摄像头连接。点对点通话,文件共享,还有更多。 本教程我会介绍一个当你第一次使用的时候,会发出惊呼的App:一个网络摄像头通信App. 我们不会使用原始WebRTC API,然而,我们需要注意很多细节。这就是library的作用,它们做出了很好的抽象,人们可以集中精力创建App而不是将精力花费的底层API上。 其中一个library是PeerJS,它使得实时通信变得非常简单。简单来说就是WebRTC,它的抽象使得结果获取更快,之后你可以学习内部是如何运作的。 建议:当你建立一个App时候使用Bit分享到一个可重复利用的集合中,并且在你所有的项目中同步它们!不妨试一下,可以加快你的工作速度。 后端 首先我们需要创建后端。尽管我们会实现直接点对点通信,起初的握手和合作需要中心服务器。 一旦握手完成,点

Zoom的Web客户端如何避免使用WebRTC?

Zoom的Web客户端可以在用户不下载它们App的情况下加入会议。Chris Koehncke很高兴能看到它是如何工作的。这确实有效,不必花时间下载App.并且视频质量可以接受,对此我们愉快的讨论了半小时。 打开 chrome://webrtc-internals只看到了getUserMedia被用来获取摄像头和麦克风,但是没有看到RTCPeerConnection的使用。这激起了我的兴趣,它们是如何不用WebRTC进行通话的? 为什么Zoom不使用WebRTC? Zoom与WebRTC的关系很难说清楚,就像网站上的陈述一样: Jitsi的伙伴对此进行了比较。Tsahi Levent-Levi对此也进行了有用的评论。 让我们快速看看在某些有趣的情况下的‘特性’—–在Chrome浏览器中运行。 Zoom Web客户端 Chromes网络开发工具很快展现出两点: WebSockets被用来传输数据 存在wasm文件 Wasm文件名快速产生了GitHub目录,在目录里,与其它JavaScript元素并存。这些文件和产品中所用的文件几乎相同。 WebSocket上的媒体

Safari中的WebRTC教程

自Apple向Safari中加入WebRTC支持以来已经有一年多时间了,我之前关于具体实现的文章没有反映其中的一些更新。更重要的是,考虑到其中的不同和限制,对Safari来说,关于如何更好地开发WebRTC app还存在许多问题。 在Cluecon上我与Chad Phillips交流,最终谈到了他在Safari上使WebRTC工作的艰难经历。对此他有许多不错的建议。 Chad经常发布一些开源代码并且也是FreeSWTICH产品的贡献者。自从2015年,他就从事WebRTC的开发工作。最近他安装了Moxiemeet,一个用来进行在线试验的视频会议平台,他是此平台的CTO,并且在本文中发表了很多想法。 2017年6月,Apple成为了最后一个发布WebRTC支持的主要供应商,为平台之间相互使用铺平了道路。 但是,一年之后,对于开发者来说,关于如何集成他们的WebRTC app和Safari/iOS的指导教程依然很少。除了一些由WebKit团队发布的文章,还有StackOverflow上的一些问题,我没有看到太多对此方面的支持。本文尝试填充它们之间的间隙。 我花了几个月时间来努力的使一个复杂