背景说明

最近同事在项目中遇到了一个问题，在Html5中如何实现如图所示的功能：

H5调起摄像头并获取图片

使用input标签

代码如下：

<input type="file" accept="image/*;capture=camera">

录制视频或音频也是类似的：

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

但是这种方法不能够添加取景框，调起来的是系统拍照界面，所以无法将取景框蒙在拍照界面。

使用WebRTC

html代码如下：

<div  style="width: 100%; position: fixed; left: 0; bottom: 0; top: 0; right: 0;">

<img src="cover.png" style="width: 100%; height: 100%; position: fixed; left: 0; bottom: 0; top: 0; right: 0;"  />
<button id="snap" style="width: 50px; height: 50px; background: #fff; box-shadow: 0 0  5px #fff; border-radius: 50px; position: fixed; bottom: 20px; left: 50%; margin-left: -25px;" ></button>
<video ></video>
<canvas id="mycanvas"></canvas>

</div>

• img标签为取景框蒙层
• button标签是模拟拍照按钮
• video标签是用来显示摄像头的视频流
• canvas用来从视频流中抓拍一张图并上传

javascript代码如下：

调起摄像头代码

  // 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
// 设置事件监听器
window.addEventListener("DOMContentLoaded", function() {
    // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
    if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
        alert('1');
    }

    // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia 
    // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
    if (navigator.mediaDevices.getUserMedia === undefined) {
		navigator.mediaDevices.getUserMedia = function(constraints) {
            alert('2');
			// 首先，如果有getUserMedia的话，就获得它
			var getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

			// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
			if (!getUserMedia) {
			    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
			}

			// 否则，为老的navigator.getUserMedia方法包裹一个Promise
			return new Promise(function(resolve, reject) {
			    getUserMedia.call(navigator, constraints, resolve, reject);
			});
		}
    }
    
    var constraints = { audio: false, video: true }; 
    
    navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream){
        var video = document.querySelector('video');
        // 旧的浏览器可能没有srcObject
        if ("srcObject" in video) {
            video.srcObject = stream;
        } else {
            // 防止在新的浏览器里使用它，应为它已经不再支持了
            video.src = window.URL.createObjectURL(stream);
        }
        video.onloadedmetadata = function(e) {
            video.play();
        };
    })
    .catch(function(err){alert(err.name + ": " + err.message); });
}, false);

添加取景框

取景框是使用一张图片，蒙在了video上边

<img src="cover.png" style="width: 100%; height: 100%; position: fixed; left: 0; bottom: 0; top: 0; right: 0;"  />

抓拍图片并使用WebUploader上传

代码如下：

var snap = document.querySelector('#snap');
    if(snap !== null){
        snap.onclick=function(){
            var canvas = document.querySelector('#mycanvas');
            var ctx = canvas.getContext('2d');
            var video = document.querySelector('video');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video,0,0);
            canvas.toBlob(function(blob){
                var runtimeForRuid = new WebUploader.Runtime.Runtime();
                console.log(runtimeForRuid.uid);
                blob.name = runtimeForRuid.uid;
                var myFile = new WebUploader.Lib.File(runtimeForRuid.uid,blob);
                var wuFile = new WebUploader.File(myFile);
                uploader.addFile(wuFile);
            });
           
            //var myFile = new File(myBlob,"snap.png");
            
        }
    }

效果

权限提示
拍摄界面
上传到服务器

踩过的坑

1. navigator.mediaDevices.getUserMedia需要注意浏览器兼容性
2. WebUploader上传构造去掉pick参数就可以不显示上传按钮
3. 运行的时候会提示权限
4. navigator.mediaDevices.getUserMedia服务器需要用https

参考

MediaDevices.getUserMedia()
Capturing Audio & Video in HTML5
Web Uploader
getUserMedia.js is a cross-browser shim for the getUserMedia() API (a part of WebRTC)