WebRTC开发基础（WebRTC入门系列1：getUserMedia）

时间：2021-09-13 18:01:36

什么是WebRTC

WebRTC由IETF（Internet Engineering Task Force——互联网工程任务组）和W3C（World Wide Web Consortium——万维网联盟）联合负责其标准化工作。IETF定制WebRTC的互联网基础协议标准，该标准也被称为RTCWeb（Real-Time Communication in Web-browsers）。W3C则负责定制WebRTC的客户端JavaScript API接口的标准。目前参与该技术标准定制的公司主要有思科、微软、谷歌、苹果、爱立信、Intel等。

WebRTC（Web Real-Time Communication——网页实时通信）是一个基于浏览器的实时多媒体通信技术。该项技术旨在使Web浏览器具备实时通信能力；同时，通过将这些能力封装并以JavaScript API的方式开放给Web应用开发人员，使得Web应用开发人员能够通过HTML标签和JavaScript API快速地开发出基于Web浏览器的实时音视频应用，而无需依赖任何第三方插件。谷歌2011年6月3日宣布向开发人员开放WebRTC架构的源代码。

WebRTC的影响和前景

　　WebRTC技术的快速普及将对现有的很多领域产生巨大的影响。 首先，受到影响的是现有的VoIP业务领域。目前我们正在经历一个硬件多样化的时代，比如可穿戴设备的兴起。这将促进适应新型设备的操作系统的涌现和加大现有操作系统的分化。因此，操作系统的异构性和繁杂性使得VoIP应用的开发、更新与维护的复杂性和成本剧增。随着WebRTC集成到浏览器中，基于Web的实时通信应用可以通过HTML标签和JavaScript API实现快速的开发，并避免了由于操作系统的异构性带来的重复开发和由于版本升级带来的维护费用以及不便。这将导致现有的应用开发人员从现有的基于浏览器插件或者原生VoIP应用模式转向使用WebRTC进行Web应用开发，进而使得现有的VoIP应用的普通用户向基于浏览器的Web应用的迁移。目前，涉及VoIP业务的客服以及在线教育领域很关注WebRTC技术在自身领域的应用。

　　其次，现有的IM应用通过其拥有的大量用户，并通过构建在这些IM应用上的衍生应用形成生态圈。这些IM应用及其所形成的生态圈正在试图取代浏览器成为互联网入口。这种现象在移动智能终端表现的更加突出。然而，如上文所述，WebRTC技术的部署和使用将呈现爆炸式的增长，这将导致IM应用向IM Web应用的转变和用户向IM Web应用的迁移。因此，构建在现有IM应用的生态圈将被打破。现有的IM应用及其生态圈必将做出相应的布局调整以适应新的技术环境。

　　同时，WebRTC的普及将给企业带来监管和安全问题。目前，有些公司在公司内部*了IM应用（比如QQ，Skype）的端口，以防止员工在工作过程中由于对音视频工具的不慎使用所造成的安全问题。基于WebRTC的新型IM Web应用，与正常的Web页面无异，所以很难检测该种IM Web应用。这给企业的监管和安全造成了巨大的隐患。

　　其次，智能电视的展现形式和业务模式将受到巨大的影响。目前，智能电视主要包括智能操作系统以及显示设备。在智能电视上的主要业务也主要是对多媒体源的直播和点播。随着WebRTC的普及和涌现大量的IM Web应用，智能电视将很可能原生的包含摄像头设备。同时，视频会议业务也将像现在的对多媒体源的直播和点播业务一样，成为智能电视的主要业务。

　　其次，所上文所述，由于WebRTC所支持的音视频格式的局限，以及WebRTC在多人视频会话中采用的可选网状结构的限制（目前是6人）。新型的服务供应商将产生。这些供应商主要提供1）不同视频编解码的转换；2）在多人会话中，视频流的整合与广播。目前，服务供应商及其产品有：Dialogic推出的PowerMedia XMS 2.1和英特尔推出的Collaboration Service for WebRTC。

　　最后，集成了WebRTC的Web浏览器将进一步改变传统的应用、Web浏览器和操作系统的格局。Web浏览器将成为介于操作系统与Web应用的一个平台。为Web操作系统的普及进一步铺平道路。包含了WebRTC的浏览器将进一步巩固其互联网入口的地位——近些年，超级应用（例如微信）通过其拥有的大量用户和在其上的开发的衍生应用试图成为互联网入口。Web浏览器及其Web应用将成为一种生态圈。高性能浏览器的研发将成为下一个竞争热点。而浏览器的安全问题将更加凸显。

开发基础知识

本文大部分翻译自：

http://www.html5rocks.com/en/tutorials/webrtc/basics/

http://w3c.github.io/mediacapture-main/getusermedia.html

通常WebRTC程序需要实现以下需求：

  • 获得流音频，视频或其他数据。
  • 获取网络信息，如IP地址和端口，与其他WebRTC客户端（称为节点）连接通讯、交换数据，穿越NAT和防火墙。
  • 协调信令通信以报告错误、发起或关闭会话。
  • 客户端之间交换媒体和客户的信息，如分辨率和编解码器。
  • 通信流音频，视频或数据。

MediaStream API代表同步流媒体。例如，从摄像头和麦克风输入的流有同步的视频和音频曲目。（不要混淆mediastream轨道与<track>的元素，这是完全不同的东西。）

一个最简单的例子：

https://webrtc.github.io/samples/src/content/getusermedia/gum.

1、输入、输出

每个MediaStream具有一个输入，这可能由navigator.getUserMedia()生成；并仅具有一个输出，传递到video element或RTCPeerConnection；

2、getUserMedia参数

getUserMedia()方法需要三个参数：

  1. 约束对象Constrain，通常是配置项；
  2. 一个成功的回调，通过一个MediaStream；
  3. 一个失败的回调，失败的回调是通过一个错误对象；

3、标签label、MediaStreamTracks数组

每个MediaStream都有一个标签label，如'xk7eulhsuhkbnjlwkw4yygnjj8onsgwhbvlq”

MediaStreamTracks数组是由getAudioTracks()和getVideoTracks()方法返回。

对于https://webrtc.github.io/samples/src/content/getusermedia/gum的例子
stream.getAudioTracks（）返回一个空数组（因为没有音频）。
假设获得一个网络摄像头连接，stream.getVideoTracks（）将返回MediaStreamTrack数组，表示流来自摄像头
每个MediaStreamTrack只有一种类型（“视频”或“音频”），和一个标签label（类似于“FaceTime HD Camera（内置）”）代表音频或视频的一个或多个通道。
在这种情况下（没有音频），gum的例子只有一个视频轨迹和没有音频。
更多的场景：得到前置摄像头，后置摄像头，麦克风流，以及“屏幕分享screenshared ' 应用。

4、Blob URL

Chrome or Opera中：URL.createObjectURL（）方法把一个MediaStream转换到Blob URL，可以设置为video element的src。

Blob URLs原理请阅读：http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers-bloburis
在Firefox中：视频的src可以从流本身来设置。

版本M25以上，以Chrome为基础的浏览器（Chrome和Opera），允许从getUserMedia音频数据传递给音频或视频元素（但请注意，默认情况下是静音的）。

getUserMedia 允许 as an input node for the Web Audio API:

// success callback when requesting audio input stream

function gotStream(stream) {

    window.AudioContext = window.AudioContext || window.webkitAudioContext;

    var audioContext = new AudioContext();

    // Create an AudioNode from the stream.

    var mediaStreamSource = audioContext.createMediaStreamSource( stream );

    // Connect it to the destination to hear yourself (or any other node for processing!)

    mediaStreamSource.connect( audioContext.destination );

}

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;

navigator.getUserMedia( {audio:true}, gotStream );

Chrome浏览器添加音频捕获和/或videoCapture权限允许权限请求，可以只授予一次，此后，用户不被要求授予照相机或麦克风访问权限。同样的，在使用HTTPS网页：也只有授予一次（在Chrome至少一次）。显示在浏览器中的信息栏的始终允许“Always Allow”按钮。

此外，Chrome将在2015年底弃用getUserMedia（）的HTTP访问。在Chrome M44你已经可以看到一个警告信息。

未来MediaStream可做为任何流的数据源，而不仅仅是照相机或麦克风。例如传感器或其它输入。

一些好玩的例子：

  • Webcam Toy is a photobooth app that uses WebGL to add weird and wonderful effects to photos which can be shared or saved locally.
  • FaceKat is a 'face tracking' game built with headtrackr.js.
  • ASCII Camera uses the Canvas API to generate ASCII images.

5、Constraints 

用于设置视频分辨率getUserMedia（）和RTCPeerConnection addStream()调用。
其目的是为执行其他约束，诸如宽高比，面向模式（正面或背面相机），帧率，高度和宽度......

例子：

 getUserMedia({

      video: {

        mandatory: { minAspectRatio: 1.333, maxAspectRatio: 1.334 },

        optional [

          { minFrameRate: 60 },

          { maxWidth: 640 },

          { maxHeigth: 480 }

        ]

      }

   }, successCallback, errorCallback);


Dictionary MediaTrackConstraints Members





advanced of type sequence<MediaTrackConstraintSet>




See Constraints and ConstraintSet for the definition of this element.


dictionary MediaTrackConstraintSet {






             ConstrainLong      width;

             ConstrainLong      height;

             ConstrainDouble    aspectRatio;

             ConstrainDouble    frameRate;

             ConstrainDOMString facingMode;

             ConstrainDouble    volume;

             ConstrainLong      sampleRate;

             ConstrainLong      sampleSize;

             ConstrainBoolean   echoCancellation;

             ConstrainDouble    latency;

             ConstrainLong      channelCount;

             ConstrainDOMString deviceId;

             ConstrainDOMString groupId;

};




更多Media Capture and Streams 相关细节：


http://www.w3.org/TR/mediacapture-streams/


入门必读资源：


http://www.html5rocks.com/en/tutorials/webrtc/basics/


接口定义：http://w3c.github.io/mediacapture-main/getusermedia.html


javascript并发开发，必须了解Blob URLs原理：http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers-bloburis


其他Demo资源：


http://webaudiodemos.appspot.com/


https://webrtc.github.io/samples/


以下内容待续


  • rtcpeerconnection


  • rtcdatachannel


一个ASP.NET MVC 在线录音录像（音视频录制并上传）Demo ：


http://download.csdn.net/detail/starcrm/9394037




参考链接




相关文章