Search Results for: HTML5 – Page 3

探索面部识别与WebRTC

作者:Andy,Simpleweb(原文链接) 翻译:刘通 原标题:Exploring Facial Recognition with WebRTC   近几年来,面部识别技术一直在智能手机创新的周围徘徊。随着苹果公司在iPhone X上推出Face ID,人们开始更多的关注面部识别技术。 我们团队向来喜欢实验和探索未来技术的潜力。所以我们与Cristiano一同利用WebRTC做一些关于面部识别的研究和探索。 在这篇文章中,我们会分享Cristiano的一些成果,他学到的东西,以及他对这种技术挑战和局限性的看法。 什么是WebRTC? WebRTC是一个开源的网络框架,支持浏览器中的实时通信。它包括Web上高质量通信的基础构建模块,如用于语音和视频聊天应用程序的网络,音频和视频组件。 用Cristiano的话来说就是“一种可以通过浏览器调用麦克风,音频和摄像头的方法”。 Cristiano使用WebRTC,Canvas,微软Cognitive Services以及他们的Emotion API来创建了一个原型工具,该工具可以通过网络摄像头在浏览器中通过

开发WebRTC应用时需要避免的5个错误

作者:Tsahi Levent-Levi(原文链接) 翻译:刘通 原标题:5 Mistakes to Avoid When Developing WebRTC Applications 为什么我们从事WebRTC的时候会失败呢? 我不确定聪明人会在WebRTC技术方面比在其他技术中遭遇更多的失败,但确实感觉是这样的。 马克吐温说过,“世界上根本不存在什么新想法。我们只是简单地把许多就想法放进一个精神层面的万花筒里。我们转动万花筒,就会产生出很多新的好奇的组合。我们不断地转动就不会无限期地创造新组合。但是它们的本质就像是经历过各个时代的老旧彩色玻璃一样。” 人们对WebRTC所犯下的许多新手错误都源于此。WebRTC就是这样的新想法。简单的说,很多就想法都融入了一个新奇而好奇的组合中。所以我们了解它。并且我们假设我们知道该如何解决它。 创业者?Skype已经14岁了。所以今天要想做出Skype这样的应用程序应该并不难。 VoIP开发者?我们知道SIP。WebRTC只是没有信令的SIP。所以我们只是把SIP强加在WebRTC之上就应该能解决了。 网页开发者?WebR

实际中的WebRTC:STUN,TURN以及信令(四)

作者:Sam Dutton(原文链接) 翻译:刘通 原标题:WebRTC in the real world: STUN, TURN and signaling 前文链接:实际中的WebRTC:STUN,TURN以及信令(一),实际中的WebRTC:STUN,TURN以及信令(二),实际中的WebRTC:STUN,TURN以及信令(三)   使用RTCDataChannel进行信令服务 启动WebRTC会话需要信令服务。 但是,一旦两个对等端建立了连接,RTCDataChannel理论上就可以作为信令通道。这可能会减少信令的延迟—因为消息是直接传递的—并有助于降低信令服务器的带宽和处理成本。 信令中的陷阱 # 在setLocalDescription()被调用之前,RTCPeerConnection并不会开始收集候选:这是在JSEP IETF草案中规定的。 # 利用Trickle ICE(见上文):候选到达后立即调用addIceCandidate()。 现成的信令服务器 如果你不想自己做WebRTC信令服务器,则可以使用上面例子中使用Socket.io

实际中的WebRTC:STUN,TURN以及信令(三)

作者:Sam Dutton(原文链接) 翻译:刘通 原标题:WebRTC in the real world: STUN, TURN and signaling 前文链接:实际中的WebRTC:STUN,TURN以及信令-1,实际中的WebRTC:STUN,TURN以及信令-2   缩放信令 尽管信令服务消耗客户端带宽和CPU相对较少,但是一个很受欢迎的应用程序的信令服务器可能需要处理来自不同位置的大量消息,而且并发性较高。有大量流量的WebRTC应用程序需要能够处理相当大负载的信号服务器。 在这里我们不会对其进行详细讨论,但是对于大容量、高性能的消息传递有很多选择,包括: ·eXtensible Messaging and Presence Protocol(XMPP),最初是叫Jabber:一个为即时消息发展而开发的可用于信令的协议。服务器实现包括ejabberd和Openfire。Strophe.js等JavaScript等客户端使用BOSH模拟双向流,但由于各种原因,BOSH可能不如WebSocket高效,同样的原因可能导致无法很好地扩展缩放。(跳离正题

实际中的WebRTC:STUN,TURN以及信令(二)

作者:Sam Dutton(原文链接) 翻译:刘通 原标题:WebRTC in the real world: STUN, TURN and signaling 前文连接:实际中的WebRTC:STUN,TURN以及信令-1   WebRTC信令代码 下面的W3C代码示例总结了一个完整的信令过程。该代码假定存在一些信令机制,SignalingChannel。我们会在下文中更详细地讨论信令。 要查看实际提供/应答和候选项的交流过程,请参阅simpl.info/pc上的“单页”视频聊天示例的控制台日志。如果你想知道更多,请从Chrome的chrome://webrtc-internals页面或者Opera中的opera://webrtc-internals页面下载WebRTC信令和统计数据的完整转储。 对等端发现 这是“我改如何找到我要交谈的人”的一种高端说法。 对于电话来说,我们有电话号码和目录。对于在线视频聊天和消息发送,我们需要身份和状态管理系统,以及用户启动会话的方式。WebRTC应用程序需要一种方式让客户互相通知他们想要开

实际中的WebRTC:STUN,TURN以及信令(一)

作者:Sam Dutton(原文链接) 翻译:刘通 原标题:WebRTC in the real world: STUN, TURN and signaling   WebRTC支持端到端通信,但是WebRTC还是需要服务器:          # 对于客户端来说,用于交换元数据来协调通信:这被称为信令          # 处理网络地址转换器(Network Address Translator,NAT)和防火墙 在本文中,我们将向您展示如何构建一个信令服务,以及如何使用STUN和TURN服务器来处理现实世界中的连接难题。我们还解释了WebRTC应用程序如何处理多方通话并与VoIP和PSTN(也就是电话)等服务进行交互。 什么是信令 信令是协调通信的过程。为了使WebRTC应用程序能够建立一个“通话”,其客户需要交换以下信息:      &nb

我们为什么用WebRTC做视频点播

作者:flashphoner(原文链接) 翻译:刘通 原标题:Why we made VOD on WebRTC VOD,视频点播服务,也就是在YouTube和其他视频流服务播放视频的方式。WebRTC可以提供的低延迟的实时视频。你可能会问这两者之间有什么相似之处。我们将在本篇文章中进行说明。 支持和bug修复 一如以往从支持开始。我们接到一家外包公司程序员的支持要求,他们正在开发一款远程医疗的移动应用。客户想要的一项功能是在iOS应用中可以把进行的WebRTC视频聊天录制下来,以后在应用上回放观看。录制功能是可以正常工作的,但是在回放的时候出现了绿屏的情况。绿屏占据了四分之三的屏幕范围,这肯定是无法接受的。所以我们开始着手解决这个问题。 在移动视频播放应用中,我们使用的是标准对象:MPMoviePlayer或者AVPlayerViewController。当URL的形式像http://host/sample.mp4时,上述两者都可以播放mp4视频。这两个对象在正常情况下可以播放MP4视频,但是当播放iOS应用录制的视频时,屏幕上就出现了绿色的大块并且把一切都搞砸了。 WebRTC动态

WebRTC—一个替代Flash的全新视频聊天解决方案

作者:Fernando Vasquez(原文链接) 翻译:刘通 原标题:Goodbye Flash, Hello WebRTC: A New Solution for Video Chat 最近Adode宣布他们最终将在2020年底停止对flash的全部支持(点击查看相关文章),这也代表互联网的一个时代的终结。 这对于互联网来说,意味着那些还在使用Flash作为媒体解决方案的网站不得不换用新的技术来提供他们的媒体服务,而且他们必须要快。幸运的是,互联网为此准备了多年,出现了比如HTML5,JavaScript Libraries,WebRTC这种技术。下图查念了互联网中近年来使用Falsh的网页占比走向: 下降局势已经确定,而且Adobe在声明中所说这个下降形势不会有任何的好转。据w3techs的数据,在2017年,只有6.7%的网页还在使用flash技术来传送交互信息或者媒体。 虚拟连接及视频会议和网络通信的需求已经存在多年。之前Flash还是解决方法之一,而且还是一个非常受欢迎的方法。现在,到了2017年—还是有很多传统软件存在,但它是一个并不安全的技术。而且与此同时,

WebRTC教程—文件传输

作者:deepstreamHub(原文链接) 翻译:刘通 原标题:WebRTC 06: File Transfer 上一篇:WebRTC教程—屏幕共享 WebRTC使得在两个浏览器间使用data-channels和二进制数据传输任意文件成为可能。 (点击图片跳转到原文查看例子) 二进制数据在浏览器中是如何工作的 目前的这代浏览器允许你发送字节数组—有八个0或1组成的集合,可以代表0到255之间的任何数字。为了完成这些,我们提供了一系列的概念—Uint8Array来储存它们,FileReader来创建它们,Blob来组合它们。像Websocket和WebRTC这样的传输工具允许传输原始字节流。 为什么很重要 在两个浏览器之间传输文件意味着直接使用二进制数据。不需要有sendFile()或者onFileReceived API—而是取决于开发者来从file input中,或者通过拖拽获取文件。如果你有更高的权限来搭建chrome应用的话,你也可以通过file system API获得,使用FileReader读取,成块地传输,在另一端重组,最

WebRTC教程—音频与视频

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