Search Results for: HTML5

在HTML5视频录制方面,我们为什么选WebRTC而不选Media Recorder API

作者:Pipe(原文链接) 翻译:刘通 原标题:Why we chose WebRTC over Media Recorder API for HTML5 Video Recording            通过这篇文章,我们将要分析一下我们为什么在从浏览器录制视频的时候,选择使用WebRTC而不是Media Recorder API的原因。下面将给出技术细节。          直到2016年第四季度,Safari已经成为了第一大浏览器,这让Flash的处境更加艰难,因为Safari默认必须要点击才能播放网页上的Flash内容。在2017年内Chrome也计划实施相似的计划。因为我们的电脑视频录制用户是建在Flash中的,所以我们快速的对HTML5进行了调查。          结果显示并没有太多的选择,只有   &

这项新的HTML5音视频API在Chrome上存在隐私问题

作者:Ran Bar-Zik(原文链接) 翻译:刘通          HTML5新的API让我们可以直接通过浏览器捕捉到音视频输出。不需要安装任何微软的原生接口或者奇怪的浏览器插件。Firefox和Chrome允许任何JavaScript代码获取笔记本电脑/平板/手机的摄像头和麦克风权限。          这是件非常好的事情,这项新的技术给我们带来了像Google Hangouts这样的应用,和众多视频聊天网站。但是也存在一些安全隐患。为了解决这些隐患,浏览器开发者做了两道屏障来防止或者至少减少隐私被窃取的风险。          这是获取音频和视频设备权限的底层JavaScript代码。运行这段代码就会弹出一个询问框,问用户是否同意一般的使用请求。在Chrome中,这个使用请求弹出的形式与其他请求一样。    &n

Flash到十二月就快不行了:HTML5视频播放器万岁

原作者:Hadar Weiss(原文链接) 翻译:刘通 Adobe Flash播放器正在走渡渡鸟的老路,正在逐渐灭亡,但是Flash的灭亡过程并没有引起人们的顾虑。Flash播放器多年来都存在很大的问题,它的最终灭亡会让大多数的技术同行拍手称快。Flash播放器本身存在的漏洞比奶酪块上的洞都要多,而这些漏洞一直是大家所诟病的地方。在今夏早些时候,在一个星期内Flash播放器被迫更新了36个安全补丁!史蒂夫乔布斯,出了名的讨厌Flash,在2010年的时候就曾经对Flash进行过严苛的批评,并且拒绝在iPhone上兼容Flash。在2011年的时候,Adobe宣布结束Flash播放器的移动端服务。 Google发出最新有关Flash的声明可能就是打死Flash播放器的最后一棒。上星期,Chrome团队声明他们会在Chrome浏览器加载的时候阻拦Flash相关应用,包括Flash播放器。Chrome团队承诺,这些变化会让网页更加的简单,加载速度更快,以及更小的电池寿命消耗。对于网站领域来说,Chrome团队的决定也许是一件非常好的事情,但是在视频流的领域,这个决定引起了一些忧虑。尽管很多用

MediaStreamTrack的Insertable streams

本文中MediaStreamTrack主要指可以操作或用于生成新内容的媒体流。 背景 在Media Capture和Streams API中,MediaStreamTrack接口代表流中的单媒体轨道,通常是音频或视频轨道,但也可能存在其他轨道类型。MediaStream对象由零个或多个MediaStreamTrack对象组成,代表各类音频或视频轨道。每个MediaStreamTrack可以有一个或多个通道。通道是媒体流的最小单位。比如与给定扬声器相关的音频信号,以及立体声音频轨道中的左声道或右声道。 什么是MediaStreamTrack的insertable stream? MediaStreamTrac的insertable stream背后的核心思想是将MediaStreamTrack的内容作为(WHATWG Streams API所定义的)流集合公开。这些流经操作可以用于引入新的组件。 授予开发者对视频(或音频)流的直接访问权,允许他们直接对流进行修改。相比之下,用传统方法实现同样的视频操作任务,需要开发者使用<canvas>元素这样的中介。(关于上述过程的细节,请

用WebRTC和Node.js开发实时视频聊天应用

话不多说,我们直奔主题。这篇文章教大家如何编写一个视频聊天应用,使已连接的两用户端能共享视频和音频。操作很简单,非常适合JavaScript语言训练——更准确地说是WebRTC技术和Node.js。 什么是WebRTC? Web Real-Time Communications 网页实时通信,简称WebRTC。WebRTC是一个HTML5规范,它允许用户在浏览器之间直接进行实时通信,不需要任何第三方插件。WebRTC可用于多种情境(比如文件共享),但端对端实时音频和视频通信是其主要功能。本文将着重为大家介绍这两项。 WebRTC所做的就是允许接入设备。你可以借WebRTC来实时使用麦克风、摄像头和分享你的屏幕。 所以,WebRTC可以用最简单的方式在网页中实现音频和视频通信。 WebRTC JavaScript API WebRTC说起来很复杂,它涉及到很多技术。但建立连接、通信和传输数据的操作是通过一套JS API来实现的,还比较简单。其中主要的API包括: RTCPeerConnection:创建和导航端对端连接。 RTCSessionDescription:描述连接(或潜在连接)

如何创建视频聊天应用程序?(上)

常见的视频应用程序都会利用一项技术——WebRTC。 WebRTC是一项新技术,它允许开发人员通过日常使用的浏览器,在网络上交换数据甚至媒体。考虑到此类功能仅作为插件(如嵌入式插件)可用,不可不称其为十年来的巨大技术变革。 即使你没听说过WebRTC,以前也可能用过它。Whatapps、Facebook、甚至Google handout里都有它的身影。WebRTC,又称网络实时通话,能让你在浏览器之间建立直接连接。这项技术都7年了,我才赶上这趟末班车。我设法创建了自己的WebRTC应用程序,以更好地理解该工具。 这是我的WebRTC应用程序,点击这里即可查看。 本文我将介绍一些有关WebRTC的基础知识: 1. WebRTC如何运作? 魔术实际上不是魔术。只是在黑暗之处迅速完成的一系列复杂手法。就像鸭子一样。它们看起来像在水面上优雅地滑行。但当你深入幕后,就会发现都是些稀松平常的方法。 2. 运行WebRTC需要哪些组件? 网络应用程序有其各自不同的组件,大多都是我们看不见的,例如服务器等。但是它们就像汽车引擎,开车时看不到它(除非你驾驶的是Doge Charger R / T),但这

博人眼球:用WebGL和WebRTC建造线上影院(下)

获取媒体设备 尽管此应用出现在众多WebRTC入门教程的主题中,但它要解决的一大难题是首先获取用户的摄像头和麦克风许可。当然,大多数时候该操作都很简单——只需await navigator.mediaDevices.getUserMedia({ audio:true, video: true }),然后若用户认可你的应用程序,你会收到一个可在< video>元素中查看,或通过RTCPeerConnection发送的MediaStream。虽然该操作看起来可行,但如果你要构建一个实际的生产应用程序,则需要考虑许多其他问题。 首先,如果用户拒绝你摄像头、麦克风或同时开启两者的请求,你需要一种不减少过多功能还能正常回退的方法。就我们而言,我们礼貌地请用户允许我们使用他们的麦克风和摄像头,并让他们知道自己可以在演出中的任何时间开关麦克风和摄像头。但如果他们不信任我们,更愿意通过文字聊天的方式(同时他们还可以看到和听到其他玩家和演员)进行整个演出,那么我们也尊重他们的想法。但这使情况变得复杂了(有一部分原因是我们想借此检测用户是否允许使用摄像头,或只允许使用麦克风),我们还没能解决这

AV1 vs HEVC——WebRTC编解码器之争卷土重来?(二)

与VP8相比,VP9可以提供相同质量下更少的比特率,或更高质量下与VP8相同的比特率。 按现状来看,VP9的优势正是新一代编解码器所应该具备的,比如: 压缩效率; 复杂性更突出; 硬件加速不足(仍然是一个问题)。 VP9本应满足业界对SVC (即可扩展性)的要求。VP8支持时间分级功能,而VP9自诩为能带来时间,空间和SNR分级的编解码器。使用VP9 SVC可以提高视频的弹性,并能够比以往更好地扩展大型群组视频通话。这些从未真正成为现实。直到现在,其中的一些项目仍被正式WebRTC API排除在外。 如果你需要增强功能,在所有人加入之前,清楚掌握有谁处于通话中的话,VP9可能是你的理想选择。 AV1 AV1初来乍到。它使一个不可能实现的梦想成真——在新的开放媒体联盟中,供应商们共同努力,来开发免版税的视频编解码器。这在几年前闻所未闻,现在已经是我们的新规范了。 从只有7个创始成员开始,该联盟改变了WebRTC编解码器战争的动力来源。与其一分为二,用VP9的Google在其中一端,用HEVC的在另一端,一支由各大公司组成的团队走向了免版税的一端,由AV1视频编解码器支持。 如今,该联盟有

借助WebRTC数据通道监控私人住宅(一)

提到WebRTC大多数人会想到视频通信。而家庭监视通常与视频流相关联。这就是为什么我听到一个家庭安全项目不是将WebRTC用于视频流,而是DataChannel时很惊讶的原因。WebRTC的DataChannel可能不能实现视频通话,但是如您所见,它可以很方便地设置端到端的信息传输。 IvelinIvanov是RedHat、Mobicents和Telestax等各种项目和组织的长期开源贡献者。最近他试着通过一个新的开源项目——Ambianic解决一些家庭物联网隐私问题。这个项目包含许多有趣的东西,比如RaspberryPi的计算机视觉(这是我最喜欢的主题之一)。但是这篇文章主要是关于他谈论如何在他的项目构架中使用WebRTC和DataChannel。 如今家庭监视系统很流行,它易于安装和使用。用户通过一个手机应用程序就能查看谁在自己家门口。如果你要云备份,缴纳注册费即可。看起来很完美,但需要担心的是疏于管控的隐私泄露问题。在本文中,我将深入探讨利用WebRTC去阻止数据敏感的数据存储在用户不直接控制的设备上,以及其技术设计和实施方案。 说明 首先我要说明的是:我并不是想实现Ring的另

谁能接力Flash video 流媒体传输

在多年辉煌过后,Flash迎来了2020年——Chrome官方支持其操作的最后一年。 Flash是直播技术领域发展的基石。通过使用RTMP协议,Flash为现在的技术发展奠定了基础。在转为游戏流媒体平台Twitch之前的通用流媒体平台Justin TV是由Flash驱动的。随着视频直播需求增长,Flash被证明有一定局限性(依赖插件、专利技术、性能问题等),会阻碍实时流媒体的发展。 值得一提的是,Flash还是VOD和预录内容的默认解决方案。实际上,YouTube一度依赖Flash。尽管VOD也有Flash的替代产品,但本文将主要讨论实时流媒体(的替代品)。 由于许多基于浏览器的应用程序都依赖Flash,因此Flash即将消失是很多人最担心的问题。幸好有一个全方位的(许多方面的性能更棒)解决方案——WebRTC。 WebRTC 作为一种HTML5规范,WebRTC通过简单的API直接在浏览器和设备之间创建了端到端的实时媒体通信。WebRTC是一个开源项目,得到了行业大佬Apple、Google、Microsoft、Mozilla和Opera的支持。这种支持可确保WebRTC标准在可预见