http://www.cnblogs.com/libin-1/default.html?page=17
WebRTC(Web Real-Time Communication,网页实时通信),是一个支持网页浏览器进行实时语音对话或视频对话的API。
1、getUserMedia
要播放摄像头的影像,首先需要一个video标签:
1
|
<
video
id="video"></
video
>
|
获取摄像头影像主要是通过navigator.getUserMedia
这个接口,这个接口的支持情况已经逐渐变好了:点这里
不过,使用的时候还是要加上前缀的,兼容代码:
1
2
3
|
navigator.getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia;
|
1
|
语法: navigator.getUserMedia(constraints, successCallback, errorCallback);
|
参数说明:
constraints
:Object类型,指定了请求使用媒体的类型succeCallback
:启用成功时的函数,它传入一个参数,为视频流对象,可以进一步通过window.URL.createObjectURL()
接口把视频流转换为对象URL。errorCallback
:启动失败时的函数。它传入一个参数,为错误对象(chrome)或错误信息字符串(Firefox),可能值:
PERMISSION_DENIED:用户拒绝提供信息。
NOT_SUPPORTED_ERROR:浏览器不支持硬件设备。
MANDATORY_UNSATISFIED_ERROR:无法发现指定的硬件设备。
例如:要启用视频设备(摄像头),可这样:
1
2
3
|
navigator.getUserMedia({
video: true
});
|
如果要同时启用视频设备和音频设备,可这样:
1
2
3
4
|
navigator.getUserMedia({
video: true,
audio: true
});
|
2、 获取摄像头
1
2
3
4
5
6
7
8
9
|
var URL = window.URL || window.webkitURL; // 获取到window.URL对象
navigator.getUserMedia({
video: true
}, function(stream) {
video.src = URL.createObjectURL(stream);// 将获取到的视频流对象转换为地址
video.play();
}, function(error) {
console.log(error.name || error);
});
|
3、 截图
除了实时直播外,我们还可以做实时截图效果,这时我们需要利用
<canvas>
元素来画图,代码如下:
1
2
3
4
5
6
7
8
9
10
|
<
canvas
id="canvas"></
canvas
>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = video.width;
var height = video.height;
canvas.width = width;
canvas.height = height;
ctx.drawImage(video, 0, 0, width, height);
|
4、 保存图片
当然,截图后,你也可以保存下来:
1
2
3
4
|
<
a
download='snap.png' id="download">下载图片</
a
>
var url = canvas.toDataURL('image/png');
document.getElementById('download').src = url;
|
5、 完整实例
实例代码(由于安全限制问题,请将代码复制到本地运行):
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
|
<!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset="UTF-8">
<
title
></
title
>
<
style
>
#canvas,#video {
float: left;
margin-right: 10px;
background: #fff;
}
.box {
overflow: hidden;
margin-bottom: 10px;
}
</
style
>
</
head
>
<
body
>
<
div
class="box">
<
video
id="video" width="400" height="300"></
video
>
<
canvas
id="canvas"></
canvas
>
</
div
>
<
button
id="live">直播</
button
>
<
button
id="snap">截图</
button
>
<
script
>
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = video.width;
var height = video.height;
canvas.width = width;
canvas.height = height;
function liveVideo(){
var URL = window.URL || window.webkitURL; // 获取到window.URL对象
navigator.getUserMedia({
video: true
}, function(stream){
video.src = URL.createObjectURL(stream); // 将获取到的视频流对象转换为地址
video.play(); // 播放
//点击截图
document.getElementById("snap").addEventListener('click', function() {
ctx.drawImage(video, 0, 0, width, height);
var url = canvas.toDataURL('image/png');
document.getElementById('download').href = url;
});
}, function(error){
console.log(error.name || error);
});
}
document.getElementById("live").addEventListener('click',function(){
liveVideo();
});
</
script
>
</
body
>
</
html
>
|