www.mg4355.com_mg娱乐游戏4355|平台官网

免外挂就能让你快速地用,WebRTC学习与DEMO资源一览

2020-02-11 14:03

Google 铺梗计划已久的 WebRTC 支持,现在终于进入实际的测试阶段了。在他们最新版的 Chrome beta 测试版浏览器中,他们总算将这个功能的 getUserMedia API 加入其中,使得这个广受人爱用的浏览器可望透过 WebRTC 免外挂(Plug-in Free)直接支持计算机中的麦克风与视讯镜头,让使用者在未来可以更轻松地就能在浏览器中启动各种像视讯聊天之类的实时影音应用,甚至也能透过影像侦测功能来制造更多有趣的效果。另外,与上述功能当时一同被介绍的 Gamepad Javascript API 也在这次的 beta 版本中携手现身,让开发者可以更轻松地将用户计算机装置中,所安装的游戏游戏杆不需使用 Native Client 技术,就能得到原生支持搖桿的游戏乐趣。除了上述的两个新加入的 API 外,Google 这次还带来了与 Cloud Print 云端打印功能的更深度说明,准备在引用来源里。再来就让我们期待更多用浏览器直接视频对聊的应用渐渐普及,并将这些功能都加入正式版中让我们有机会动手玩玩吧!

早前 Firefox 已经证明了它有能力通过 WebRTC 架构去进行浏览器内的视讯或音讯聊天,现在更将 WebRTC 设成 Firefox 22 beta 的预设项目呢,它除了容许在浏览器内进行视讯或音讯聊天之外,还可以进行点对点的档案传输。另外,它现在也支援 Windows 用户的 HiDPI 萤幕(例如 Toshiba KIRAbook)、加入通知功能的 API 和 OdinMoney JavaScript 的完善化,表现大升。而 Android 的 Firefox beta 则得到改进了的 WebGL 表现和 CSS3 Flexbox 成为预设,萤幕较小的平板亦可以真正地使用平板模式了。经由:Engadget引用来源:Firefox Beta、Google Play

总结

总体而言,网络上的设备访问向来是一大难题。很多人曾经尝试过,但是没什么人取得成功。大多数早期的思路从未在专有环境之外占据主导地位,也从未广泛采用过。

真正的问题在于,网络的安全模式与本地系统有天壤之别。例如,我可能不希望随便什么网站都有权访问我的摄像机,但是这个问题很难解决。

PhoneGap 等桥接框架有助于突破这方面的限制,但这种临时性的解决方案对于深层的根本问题而言还远远不够。要让网络应用具备与桌面计算机应用一较高下的实力,我们需要能够访问本地设备。

getUserMedia() 仅仅是对新设备类型的第一波访问。我希望在不久的将来能看到更多。

摘自:

1.1   WebRTC现状

本人最早接触WebRTC是在2011年底,
那时Google已经在Android源码中加入了webrtc源码,放在/external/webrtc/,
但是Android并没有用到它,更没有被浏览器使用。
当时试图在Android 2.3(Gingerbread)高通平台的手机上
用H.264 硬件codec替换掉WebRTC缺省使用的VP8软codec,费了不少劲勉强换掉后效果很差只得放弃。

最近得知Google最新版的Chrome for Android已经支持WebRTC,
应老板的要求搭一个手机浏览器上视频通信的demo,
为此在网上搜集各种资料,发现经过一年多的发展,
国内外研究和使用WebRTC的人明显多起来,可用的demo也很多。
在此做一个笔记,留作日后参考。

目前基于WebRTC的开发其实有两个方向,
一个是基于浏览器的WebRTC应用开发,编程语言主要是JavaScript、HTML等,
这也是WebRTC作为HTML5标准的组成部分原本的目的;

另一个是C层面的移植和开发,作为一款非常强大的开源软件,
很多领域的软件项目都可以利用到WebRTC的音视频通信和处理能力,
这些场合的应用程序可能是C语言写的,也不一定与浏览器有关。
本文是属于前一种方向。

启用

getUserMedia() API 还很新,只有 Google 和 Opera 在开发人员版本中加入了它。在 Chrome 18 和更高版本中,可通过访问 about:flags 启用该 API。

图片 1

在 Chrome 浏览器的 about:flags 页中启用 getUserMedia()

 

对于 Opera,请下载某个实验性 Android 和桌面计算机版本。

1.2 WebRTC基本概念学习

WebRTC的官方资料可以从其官网
和W3C网站

学习WebRTC基础知识比较好的网站是《Getting Started with WebRTC》,
网址是

对浏览器来说,WebRTC其实就是提供了3个API:
. MediaStream (即getUserMedia),用于获取媒体数据,例如来自摄像头和麦克风的视频流和音频流;
. RTCPeerConnection,用于peer跟peer之间呼叫和建立连接以便传输音视频数据流;
. RTCDataChannel,用于peer跟peer之间传输音视频之外的一般数据。

需要注意的是这几个API的名称在不同浏览器及同一浏览器的不同版本之间略有差异,
比如PeerConnection在FireFox上叫做mozRTCPeerConnection,
而在当前版本的Chrome上叫做webkitRTCPeerConnection,
将来WebRTC标准化完成后会把这些前缀去掉使用统一的名称。

目前网上找到的WebRTC demo都只用到了getUserMedia和RTCPeerConnection这两个API,
另一个API即RTCDataChannel似乎目前还不太成熟。

WebRTC是实现peer to peer的实时通信(可以两个或多个peer之间),
在能够通信前peer跟peer之间必须建立连接,这是RTCPeerConnection的任务,
为此需要借助一个信令服务器(signaling server)来进行,信令包括3种类型的信息:
 . Session control messages: 初始化和关闭通信,及报告错误;
 . Network configuration: 双方的IP地址和端口号(局域网内部IP地址需转换为外部的IP地址);
 . Media capabilities: 双方的浏览器支持使用何种codecs以及多高的视频分辨率。

WebRTC并未规定使用何种信令机制和消息协议,
象SIP、XMPP、XHR、WebSocket这些技术都可以用作WebRTC的信令通信。

除了信令服务器,peer跟peer建立连接还需要借助另一种服务器
(称为STUN server)实现NAT/Firewall穿越,因为很多peer是处于私有局域网中,
使用私有IP地址,必须转换为公有IP地址才能相互之间传输数据。
这其中涉及到一些专业术语包括STUN、TURN、ICE等,具体的本人还有待学习。
网上找到的WebRTC demo好象都用的是Google提供的STUN server。

peer跟peer之间一旦建立连接就可以直接传输音视频数据流,
并不需要借助第三方服务器中转。

简介

长久以来,音频/视频捕获都是网络开发中的“圣杯”。多年来,我们总是依赖于浏览器插件(Flash 或 Silverlight)实现这一点。快来看看吧!

现在轮到 HTML5 大显身手了。也许看起来不是很显眼,但是 HTML5 的崛起引发了对设备硬件访问的激增。地理位置 (GPS)、Orientation API(加速计)、WebGL(GPU) 和 Web Audio API(视频硬件)都是很好的例子。这些功能非常强大,展示了基于系统底层硬件功能之上的高级 JavaScript API。

本教程介绍了一种新 API:navigator.getUserMedia(),可让网络应用访问用户的相机和麦克风。

3.8  

这个demo是基于库SimpleWebRTC实现的,是SimpleWebRTC官方的demo,使用WebSocket作为信令手段。

在我的公司局域网环境里无法运行该demo;
在家里无线路由器环境下可成功运行,且可双向传视频,支持多个peer同时视频通信。

经修改后在本人公司局域网成功运行,
试过两个手机和一个笔记本电脑同时视频通信OK。
修改和运行步骤:


  1.    我是在Windows7 64位上安装的;
  2. 在命令行下依次运行如下命令(安装运行signaling server所需的模块):
    npm install express
    npm install yetify
    npm install getconfig
    npm install node-uuid
    npm install socket.io

  1.    该信令服务器是SimpleWebRTC缺省使用的,解开该源码后运行node server.js,
       该服务器监听8888端口,通过WebSocket与浏览器通信。
  1. 在同一台PC上运行apache server,
       将从
      (可在Chrome浏览器中打开
       “另存为”、“网页,全部”即可),修改其中的 index.html 和 simplewebrtc.js,
        将其中 url 改为'
  1. 在同一局域网中的其他设备上打开Chrome浏览器,
       地址栏输入
       也可修改上述index.html中的“var room”一行,设定为固定的room名称,
       就不需要每次在每个设备上手工输入room名称了。

安全

将来,浏览器在调用 getUserMedia() 时可能会弹出信息栏,让用户选择授予还是拒绝对其相机/麦克风的访问权限。很遗憾,该规范在安全方面非常薄弱。目前,没有任何浏览器实施了权限栏。

3.3   人脸检测识别

利用WebRTC的getUserMedia从摄像头获取图像进行人脸识别的demo,例如这两个:


前面这个在PC和手机上的Chrome上都可运行,后面那个不行

getUserMedia() 的历史

如果您还不知道,getUserMedia() 的历史可谓一段有趣的故事。

过去几年中出现过好几种“Media Capture API”的变体。很多人意识到,需要能够在网络上访问本地设备,但这要所有人合力开发出一种新的规范。局面一片混乱,以至于 W3C 最终决定成立一个工作组。他们只有一个目的:理清混乱的局面!设备 API 政策 (DAP) 工作组负责对过剩的提议进行统一和标准化。

我会试着总结一下 2011 所发生的事情...

二. WebRTC封装库

WebRTC的目的是为了简化基于浏览器的实时数据通信的开发工作量,
但实际应用编程还是有点复杂,尤其调用RTCPeerConnection必须对如何建立连接、
交换信令的流程和细节有较深入的理解。

因此有高人为我们开发了WebRTC封装库,将WebRTC的调用细节封装起来,包装成更简单的API,
使开发应用程序更简单。
封装库的另一个目的是为了屏蔽不同浏览器之间的差异,例如上面说的API名称的差异。
当然,这些库都是开源的,可以根据自己的需要重新修改。

目前网上找到的有两种WebRTC封装库,
1) webrtc.io,网址是
   上面有详细说明和使用方法,有很多demo使用它;
2) SimpleWebRTC,网址是
   貌似比webrtc.io用起来更简单。

功能检测

功能检测是简单地检查是否存在 navigator.getUserMedia

function hasGetUserMedia() {
  // Note: Opera builds are unprefixed.
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
  // Good to go!
} else {
  alert('getUserMedia() is not supported in your browser');
}

  

三、 WebRTC demo试用

网上可以找到一堆WebRTC demo,在code.google.com上也能找到不少WebRTC应用项目的源码。
有些demo是直接调用WebRTC API开发的,但大多数是调用上述两种WebRTC封装库开发的。
由于WebRTC API的名称在不同浏览器及同一浏览器的不同版本之间存在差异,
所以不是所有demo都能运行在所有浏览器上。

为了找到一个可在公司局域网环境中跑在手机上的WebRTC demo,本人试用了不少demo,
下面选几个有代表性的介绍,其中有两个经修改后已在本人公司的局域网环境中运行成功。

先说一下本人的测试环境:手机上的浏览器是Chrome for Android 26.0.1410.49,
运行在Android 4.1.2上,这个Chrome版本本身是beta版,支持WebRTC但缺省是关闭WebRTC功能的,
需要在chrome://flags中使能WebRTC并重启Chrome,
或者在启动Chrome时增加命令行选项--enable-webrtc。
本人在PC上运行WebRTC的浏览器是Chrome 26.0.1410.43,操作系统是Windows 7。

第 2 轮:设备元素

很多人认为 HTML 媒体捕获的局限性太大,因此一种新的规范应运而生,可以支持任何类型的(未来)设备。不出意料地,该设计需要新的 <device> 元素,也就是getUserMedia() 的前身。

Opera 是第一批根据 <device> 元素创建视频捕获的初始实施的浏览器之一。不久之后(准确地说是同一天),WhatWG 决定废止 <device> 标记,以支持称为navigator.getUserMedia() 的新兴 JavaScript API。一周后,Opera 推出的新版本中加入了对更新的 getUserMedia() 规范的支持。当年年底,Microsoft 也加入这一行列,发布了 IE9 实验室以支持新规范。

<device> 的效果如下:

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

  

支持

很遗憾,已发布的浏览器中没有任何一款曾经包含 <device>。我猜这是一个不太需要担心的 API。但是 <device> 确实有两大优点:一是语义方面,二是可以轻松进行扩展,而不仅仅是支持音频/视频设备。

现在深吸一口气。这玩意儿速度飞快!

3.6  

这个demo是基于库webrtc.io实现的,是webrtc.io官方的demo,使用WebSocket作为信令手段。
在我的公司局域网环境里无法运行该demo;
在家里无线路由器环境下可成功运行,但只能单向传输视频。

第 3 轮:WebRTC

<device> 元素最终还是像渡渡鸟一样销声匿迹了。

依靠 WebRTC(网络即时通信)的大力协助,最近几个月寻找合适捕获 API 的步伐加快了很多。该规范由 W3C WebRTC 工作组负责监管。Google、Opera、Mozilla 和其他一些公司目前正致力于在自己的浏览器中实施该 API。

getUserMedia() 与 WebRTC 相关,因为它是通向这组 API 的门户。它提供了访问用户本地相机/麦克风媒体流的手段。

支持

在 Chrome 浏览器 18.0.1008 和更高版本中,可在 about:flags 下启用 WebRTC。

一. WebRTC学习

使用入门

利用 navigator.getUserMedia(),我们最终实现了在没有插件的情况下访问网络摄像头和麦克风输入内容。相机访问权限现在和调用有关,而不是和安装有关。它直接内嵌在浏览器中。感到兴奋了吗?

3.7  

国内牛人做的,相当于是汉化版的
自然也是基于webrtc.io实现的,但使用的webrtc.io版本较老,
不支持新版本Chrome所使用的API名称webkitRTCPeerConnection,
所以无法在新版本Chrome上运行。
具体介绍在

获取输入设备的访问权限:

要使用网络摄像头或麦克风,我们需要请求权限。getUserMedia() 的第一个参数用于指定您要访问的媒体类型。例如,如果您要请求访问网络摄像头,第一个参数就应该是 "video"。要同时使用麦克风和相机,则传递 "video, audio"

<video autoplay></video>

<script>
  var onFailSoHard=function(e) {
    console.log('Reeeejected!', e);
  };

  // Not showing vendor prefixes.
  navigator.getUserMedia('video, audio', function(localMediaStream) {
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);

    // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
    // See crbug.com/110938.
    video.onloadedmetadata = function(e) {
      // Ready to go. Do some stuff.
    };
  }, onFailSoHard);
</script>

  

好吧,这到底是怎么一回事呢?媒体捕获是各种新 HTML5 API 进行协作的绝佳示例。参与协作的还有其他一些 HTML 元素,例如 <audio> 和 <video>。请注意,我们不是要设置 src 属性或在 <video> 元素中加入 <source> 元素。我们不会向视频馈入媒体文件的网址,而是馈入从代表网络摄像头的 LocalMediaStream 对象获得的 Blob 网址。

我还会将 <video> 设置为 autoplay,否则它会停在第一帧。添加 controls 也能达到您预期的效果。

请注意:在 Chrome 浏览器中存在一个错误,导致仅仅传递“audio”无效:crbug.com/112367。我也无法在 Opera 中正常使用 <audio>

Opera 和 Chrome 浏览器实施的是该规范的不同版本。这导致实际使用起来要比预期的更有“挑战性”。

在 Chrome 浏览器中

该代码段适用于 Chrome 18 和更高版本(在 about:flags 中启用):

navigator.webkitGetUserMedia('audio, video', function(localMediaStream) {
  var video = document.querySelector('video');
  video.src = window.webkitURL.createObjectURL(localMediaStream);
}, onFailSoHard);

  

在 Opera 中

Opera 开发人员版本不支持该规范的更新版本。该代码段适用于 Opera:

navigator.getUserMedia({audio: true, video: true}, function(localMediaStream) {
  video.src = localMediaStream;
}, onFailSoHard);

  

关键的区别之处在于:

  • getUserMedia() 是无前缀的。
  • 对象作为第一个参数而不是字符串列表进行传递。
  • 将 video.src 直接设置为 LocalMediaStream 对象,而不是 Blob 网址。据我所知,Opera 最终会更新此设置,改为要求 Blob 网址。

对于这两者

如果您希望能跨浏览器通用(但是这样很容易出问题),请尝试如下方法:

var video = document.querySelector('video');

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true, video: true}, function(stream) {
    video.src = stream;
  }, onFailSoHard);
} else if (navigator.webkitGetUserMedia) {
  navigator.webkitGetUserMedia('audio, video', function(stream) {
    video.src = window.webkitURL.createObjectURL(stream);
  }, onFailSoHard);
} else {
  video.src = 'somevideo.webm'; // fallback.
}

  

请务必查看 Mike Taylor 和 Mike Robinson 的 gUM Shield。它可以很好地将各浏览器实施之间的不一致“标准化”。

3.1  

这是官方的demo,功能很全,
这个网站 不能直接从国内上去,需要FQ才行,
它的源码原来是在
现在下不了了。
此demo没有用任何封装库。

这个demo所使用的信令机制使用了XHR和Google App Engine Channel API ,具体我不懂。
在我的公司局域网环境里无法运行该demo。

提供回退

对于无法获得 getUserMedia() 支持的用户,如果 API 不受支持且/或由于某些原因而调用失败,可以选择回退到现有的视频文件:

// Not showing vendor prefixes or code that works cross-browser:

function fallback(e) {
  video.src = 'fallbackvideo.webm';
}

function success(stream) {
  video.src = window.URL.createObjectURL(stream);
}

if (!navigator.getUserMedia) {
  fallback();
} else {
  navigator.getUserMedia({video: true}, success, fallback);
}

<canvas> API 的 ctx.drawImage(video, 0, 0) 方法可以轻松地将 <video> 帧绘制到 <canvas> 上。当然,既然我们通过 getUserMedia() 获得了视频输入,就可轻松地使用即时视频创建照相亭应用了。

<video autoplay></video>
<img src="">
<canvas style="display:none;"></canvas>

var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;

function snapshot() {
  if (localMediaStream) {
    ctx.drawImage(video, 0, 0);
    // "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
    document.querySelector('img').src = canvas.toDataURL('image/webp');
  }
}

video.addEventListener('click', snapshot, false);

// Not showing vendor prefixes or code that works cross-browser.
navigator.getUserMedia({video: true}, function(stream) {
  video.src = window.URL.createObjectURL(stream);
  localMediaStream = stream;
}, onFailSoHard);

  

3.5   Framegrabber

这是一个基于WebRTC实现屏幕共享(screensharing)的Chrome扩展,
源码在
有关介绍可参考这篇文章:
没试用过。

第 1 轮:HTML 媒体捕获

HTML 媒体捕获是 DAP 在网络媒体捕获标准化上迈出的第一步。具体方法是超载<input type="file"> 并为 accept 参数添加新值。

如果您要让用户通过网络摄像头拍摄自己的快照,就可以使用 capture=camera

<input type="file" accept="image/*;capture=camera">

  

录制视频或音频也是类似的:

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

  

挺不错吧?它可以重复使用文件输入,这点我特别喜欢。这在语义上非常有意义。这种特定“API”的不足之处在于,无法处理即时效果(例如将实时网络摄像头数据呈现到 <canvas> 并应用 WebGL 过滤器)。HTML 媒体捕获只能让您录制媒体文件或及时拍摄快照。

支持

  • Android 3.0 浏览器 - 首次实施的一个例子。请观看此视频,了解其实际使用情况。
  • Android 版 Chrome 浏览器 (0.16)

除非您使用的是以上某个移动浏览器,否则我建议您不要使用该 API。供应商纷纷转向 getUserMedia()。其他任何人都不太可能会长期实施 HTML 媒体捕获。

3.9   国内人开发的视频聊天室应用

这个demo是国内人赵书剑开发的视频聊天室,基于webrtc.io实现。
该项目源码和文档下载地址是:
 
源码在:
 

1. 从
解压缩,修改其中public\javascripts\client.js中的rtc.connect一行,
将实际的服务器地址写进去,例如改为:
  rtc.connect("ws://10.100.156.83:8001", room);

  1. 安装node.js

       我是在Windows7 64位上安装的;
    在命令行下依次运行如下命令(安装运行signaling server所需的模块):
    npm install express
    npm install yetify
    npm install getconfig
    npm install node-uuid
    npm install socket.io

3.运行node app.js,注意该demo本身已包含http server,
  不需要其他的http server,比如apache server

4.在同一局域网中的其他设备上打开Chrome浏览器,
地址栏输入
输入相同的room名称(随便起)即可开始多方视频通信。

我对照做了安装和修改,测试失败,
能看到房间有人进来和退出,但无法进行文件和视频聊天。

3.2  爱立信实验室开发的WebRTC demo

据说是第一个基于浏览器的WebRTC视频通信demo,
爱立信为此还开发了一个浏览器用于支持WebRTC,好象也是基于WebKit的,
叫做Bowser browser(当时市场上可能还没有支持WebRTC的浏览器),
该项目网址是
这个Bowser browser好象只支持Ubuntu 11.04 and 11.10
(见

该demo的网址是
在我的公司局域网环境里无法运行该demo。

3.4  

这个demo演示HTML, CSS and JavaScript的各种feature和使用方法,
包括WebRTC的3个API:
 . getUserMedia、
 . RTCPeerConnection、
 . RTCDataChannel的演示,
但遗憾的是RTCPeerConnection的演示只是本地camera的画面传回给本地,
并没有实现真正的设备之间音视频通信。
该项目的源码在