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

时间 2019-11-16

标签 webrtc 开发基础入门系列 getusermedia 繁體版

原文原文链接

什么是WebRTCjavascript

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等。html

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

WebRTC的影响和前景java

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

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

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

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

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

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

开发基础知识

本文大部分翻译自：

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.

一、输入、输出

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

二、getUserMedia参数

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

约束对象Constrain，一般是配置项；
一个成功的回调，经过一个MediaStream；
一个失败的回调，失败的回调是经过一个错误对象；

三、标签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 ' 应用。

四、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.

五、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

参考连接