webrtc学习———记录一

　　最近导师让研究一下webrtc，希望将来用到我们的ICT2系统中。

但是从来没有过做web的基础，无论前端还是后端，html、js全都从头学起。html还好说，没有太过复杂的东西。

js就有点难度了，大致翻了一下js权威指南的书，了解了一下基本的语法，也算足够应付。但是对其中浏览器内置的各种对象，完全不了解。

只能慢慢熟悉，一步一步来。

第一部分 获取webcamera

这个比较简单，主要使用了getUserMedia()这个函数。下面是从网上获取的资料：

1、navigator.getUserMedia()

提示用户需要权限去使用像摄像头或麦克风之类的媒体设备.如果用户提供了这个权限，successCallback函数会被调用，且接收一个LocalMediaStream 对象作为参数.

navigator.getUserMedia ( constraints, successCallback, errorCallback );

示例

下面使用浏览器前缀来调用getUserMedia().

 navigator.getMedia = ( navigator.getUserMedia ||
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia ||
                        navigator.msGetUserMedia);

 navigator.getMedia (

    // constraints
    {
       video: true,
       audio: true
    },

    // successCallback
    function(localMediaStream) {
       var video = document.querySelector('video');
       video.src = window.URL.createObjectURL(localMediaStream);
       video.onloadedmetadata = function(e) {
          // Do something with the video here.
       };
    },

    // errorCallback
    function(err) {
     console.log("The following error occured: " + err);
    }

 );

参数

参数	是否必须	描述
constraints	必须	successCallback中传入的 LocalMediaStream对象所支持的媒体类型。
successCallback	必须	当应用中传递LocalMediaStream对象时触发的函数。
errorCallback	可选	当调用媒体设备失败时触发的函数.

constraints

constraints参数是一个 MediaStreamConstraints 对象，包含两个值为布尔值的成员: video 及 audio. 这个参数描述了被 LocalMediaStream对象所支持的媒体类型，使用时，需要在constraints参数里指定某个类型或者两个类型.如果某特定类型不被浏览器所支持， getUserMedia 会调用errorCallback函数，并传入错误类型NOT_SUPPORTED_ERROR. 如果浏览器不能得到特定类型的音频或者视频流, getUserMedia 会调用 errorCallback 函数，并传入错误类型MANDATORY_UNSATISFIED_ERR.

若某种媒体类型未被指定，他的值默认为false。下面的例子描述了如何去设置constraints函数接收audio与video:

{ video: true, audio: true }

 

successCallback

getUserMedia 函数会调用successCallback 并传入LocalMediaStream 对象，这个对象包含媒体流。你可以将这个对象分配给适合的元素，之后处理，就像下面例子所做的一样。

 function(localMediaStream) {
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);
    video.onloadedmetadata = function(e) {
       // Do something with the video here.
    };
 },

errorCallback

getUserMedia 函数调用errorCallback 时会包含一个 code 参数，如下所示：

Error	Description
PERMISSION_DENIED	用户拒绝了浏览器请求媒体的权限
NOT_SUPPORTED_ERROR	constraint中指定的媒体类型不被支持
MANDATORY_UNSATISFIED_ERROR	指定的媒体类型未接收到媒体流

参考https://developer.mozilla.org/zh-CN/docs/WebRTC/navigator.getUserMedia

2、 获取html标签

html中添加<video id = “videoid” autoplay></video>。在js中需要获取标签使用：

var video = document.getElementById(“videoid”)

或者

var video = document.querySelector(“video”).

3、 设置video的src

如第一部分中所示，使用

video.src = window.URL.createObjectURL(localMediaStream);

window.URL.createObjectURL()

概述

创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.

语法

objectURL
= window.URL.createObjectURL(blob);

• blob参数是一个File对象或者Blob对象.

• objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.

示例

查看使用对象URL显示图片.

附注

在每次调用createObjectURL()方 法的时候,都会创建一个新的对象URL,即使参数中的这个对象已经有了自己的对象URL.在你不需要这些对象URL的时候,你应该通过调用 window.URL.revokeObjectURL()方法来释放它们所占用的内容.虽然即使你不主动释放它们,浏览 器也会在当前文档被卸载的时候替你释放,不过,考虑到更好的性能和更少的内存占用,你应该在安全的时候主动施放它们.

参考：

https://developer.mozilla.org/zh-CN/docs/Web/API/URL.createObjectURL

测试使用的代码：
main.js

 var video = document.getElementById("video");
 var constraints= {
         audio: true,
         video: true
 };
 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
 if(navigator.getUserMedia){
         if(navigator.webkitURL){
                 navigator.getUserMedia(constraints,
                         function(stream){
                                 video.src = window.webkitURL.createObjectURL(stream);
                         },
                         function(error){        alert(error);}
                 );
                 alert("webkitURL not existed!");
         }
         else{
                 navigator.getUserMedia(constraints,
                         function(stream){
                                 video.src = window.webkitURL.createObjectURL(stream);
                         },
                         function(error){        alert(error);}
                 );
                 alert("webkitURL is existed!");
         }
 }
 else{
         alert("navigator.getUserMedia Error!!!");
 }

getUserMedia.html

 <!DOCTYPE html>
 <html>
 <head>
         <meta lang = "en">
         <meta charset = "gb2312"/>
         <title>webRTC test1 ---[use webcam]</title>
 </head>
 <body>
         <video autoplay id = "video"></video>
         <script src = "main.js">
         </script>
 </body>
 </html>