H5 调用摄像头

WebRTC（Web Real-Time Communication，网页实时通信），是一个支持网页浏览器进行实时语音对话或视频对话的API。

1、getUserMedia

要播放摄像头的影像，首先需要一个video标签：

1	`<video` `id="video"></video>`

获取摄像头影像主要是通过navigator.getUserMedia这个接口，这个接口的支持情况已经逐渐变好了：点这里

不过，使用的时候还是要加上前缀的，兼容代码：

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：无法发现指定的硬件设备。

　例如：要启用视频设备（摄像头），可这样：

navigator.getUserMedia({

video: true

});

　如果要同时启用视频设备和音频设备，可这样：

navigator.getUserMedia({

video: true,

audio: true

});

　　2、获取摄像头

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>元素来画图，代码如下：

<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、保存图片

当然，截图后，你也可以保存下来：

<a download='snap.png' id="download">下载图片</a>

var url = canvas.toDataURL('image/png');

document.getElementById('download').src = url;

　　5、完整实例

实例代码（由于安全限制问题，请将代码复制到本地运行）：

<!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>

猜你喜欢