WebRTC实现了基于网页的视频会议，标准是WHATWG 协议，目的是通过浏览器提供简单的javascript就可以达到实时通讯（Real-Time Communications (RTC)）能力。是一个无插件实时通信。我们来看看如何使用。

如何获取音频、视频？

navigator.getUserMedia()，它允许网络应用程序访问用户的摄像头和麦克风。该规范是由W3C WebRTC工作组监督。Chrome，Opera，Firefox等浏览器都有实现。

navigator.getUserMedia()是WebRTC的一部分。它提供了访问用户的本地摄像头或者麦克风流的可能。

为了屏蔽浏览器写法的差异可以使用由google维护的一个类库adapter。

注 navigator.getUserMedia()和 Ajax一样不能使用file协议。

先给出源码吧源码

首先来完成简单HTML页面，我们就叫它getUserMedia.html。例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <title>Hello World Web RTC</title>
</head>
<body>
<script type="text/javascript" src="js/adapter.js"></script>
<script type="text/javascript">
    navigator.getUserMedia({video: true},function(stream){
        //创建一个承载流的标签
        var video = document.createElement("video");
        attachMediaStream(video, stream);
        // 添加入节点
        document.body.appendChild(video);
        // 流默认是暂停的  让其自动播放
        video.autoplay = true;
    },function(error) {
        console.log("Video capture error: ", error.code);
    });
</script>
</body>
</html>

运行上面的代码就会询问是否使用摄像头，点允许就可以看见自己的头像了。

关于设置参数问题

见代码注释：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
	audio: true,// 目前只有true和false，true使用音频、false不使用
	video: { // 可以为true和false，true使用视频、false不使用
		mandatory: { // 主要定义采集数据的样式，比如视频分辨率、fps、纵横比等等
			minWidth: 1280, // 定义最小采集画质宽度
			minHeight: 720, // 定义最小采集画质高度
			minAspectRatio: 1.33,// 最小纵横（高宽）比例
			minFrameRate: 20, // 最小fps
			maxWidth: 1280, // 定义最大采集画质宽度
			maxHeight: 1280, // 定义最大采集画质高度
			maxAspectRatio: 1.33,// 最大纵横（高宽）比例
			maxFrameRate: 20, // 最大fps
		},
		optional: [ // 提供mandatory的可选设置
		{
			minWidth: 2560
		}
		]
	}
}

关于摄像头选择问题

可以使用MediaStreamTrack来切换音视频。例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
    <title>Hello World Web RTC</title>
</head>
<body>
<select id="changeMedia"></select>
<button id="test">切换音视频采集源</button>
<script type="text/javascript" src="js/adapter.js"></script>
<script type="text/javascript">
    var sources, changeMedia, testBtn, constraints;
    window.onload = function(){
        changeMedia = document.getElementById('changeMedia');
        // 获取摄像头信息
        MediaStreamTrack.getSources(function (media_sources) {
            sources = [];
            for (var i = 0; i < media_sources.length; i++) {
                sources.push(media_sources[i]);
            }
            getAllUserMedias(sources);
            sources = media_sources;
          
        });
        testBtn = document.getElementById('test');
        testBtn.addEventListener("click",function(){
            getUserMedia(sources);
        });
    }
    // 生成html节点
    function getAllUserMedias(sources){
        for (var i = 0; i < sources.length; i++) {
            var option = document.createElement("option");
            option.innerHTML = sources[i].kind + "-" + sources[i].id + "-" + sources[i].label + "-" + sources[i].facing;
            option.value = i;
           changeMedia.appendChild(option);
        };
        
    }
    // 使用摄像头
    function getUserMedia(sources){
        var id = changeMedia.value;
        
        constraints = {};
        if (sources[id].kind == 'audio') {
            constraints.audio = {
                optional: [{
                    sourceId: sources[id].id
                }]
            };
        }
        if (sources[id].kind == 'video') {
            constraints.video = {
                optional: [{
                    sourceId: sources[id].id
                }]
            };
        }
       
       navigator.getUserMedia(constraints,function(stream){
        //创建一个承载流的标签
            var video = document.createElement("video");
            attachMediaStream(video, stream);
            // 添加入节点
            document.body.appendChild(video);
            // 流默认是暂停的  让其自动播放
            video.autoplay = true;
        },function(error) {
            console.log("Video capture error: ", error.code);
        });
        
    }
</script>
</body>
</html>

音频使用问题

Web Audio API是Javascript中主要用于在网页应用中处理音频请求的一个高级应用接口，这个API目的是用于让最新技术与传统的游戏音频引擎的综合处理相兼容，也即尽力提供一些桌面音频处理程序的要求。

几行简单的代码创建一个AudioContext就可以支持声音输出和音频波形的合成，那么于是就像下面这一段那样，一个AudioContext对象就创建好了。

1
2
3
4
5
6
7
8
9
10
var context;
window.addEventListener('load', init, false);
function init() {
try {
context = new webkitAudioContext();
}
catch(e) {
alert('您当前的浏览器不支持Web Audio API ');
}
}

参考文档