H5实现调用本地摄像头并拍照将照片传向后台

H5实现调用本地摄像头并拍照将照片传向后台

目的：为了实现在确认个人信息后要实现拍照传向后台
代码：

var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints,success, error)
    } else if (navigator.mozGetUserMedia)                {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
    } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
    }
}

function success(stream) {
    //兼容webkit核心浏览器
    // var CompatibleURL = window.URL || window.webkitURL;
    //video.src = CompatibleURL.createObjectURL(stream);
    //将视频流设置为video元素的源
    video.srcObject = stream;
    video.play();
}

function error(error) {
    console.log('访问用户媒体设备失败${error.name}, ${error.message}');
}

if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
    getUserMedia({video : {width:200, height:200}}, success, error);
} else {
    alert('不支持访问用户媒体');
}
//图片上传到服务器
//获取Canvas的编码。
function uploadImage(){
    canvas.width = 300;
    canvas.height = 300;
    context.drawImage(video, 0, 0, 300, 300);
    var imgData = canvas.toDataURL();
    //上传到后台。
    var uploadAjax = $.ajax({
        type: "post",
        //后端需要调用的地址
        url:"test",
        data: JSON.stringify({"imgData": imgData}),
		contentType:"json/application",
		//设置超时
        timeout:10000,
        async: true,
        success: function (htmlVal) {
        	//成功后回调
		},
        error: function(data) {
        },
        //调用执行后调用的函数
        complete: function (XMLHttpRequest, textStatus) {
            if(textStatus == 'timeout'){
                uploadAjax.abort(); //取消请求
                //超时提示：请求超时，请重试
                alert("请求超时，请重试")
                //请求超时返回首页
                closeCard();
            }
        }
    });
}

用法：在需要拍照的时候调用uploadImage（）方法
例：

拍照

详解：调用摄像头拍照用到了video标签、canvas、getUserMedia、ajax
video调用本地摄像头
canvas作为画布保存照片

// 获取HTML页面中的< canvas>元素
var canvas = document.getElementById("canvas");
/*
通过< canvas>元素,创建画布对象
使用getContext(type)函数,创建画布对象
*/
var context = canvas.getContext("2d");
// 利用画布对象,进行绘制图形
context.drawImage(video, 0, 0, 300, 300);
var imgData = canvas.toDataURL();

getUserMedia ( constraints, successCallback, errorCallback );
访问用户媒体设备的兼容方法
详解见：navigator.getUserMedia 这个方法已经被废弃，但是一些浏览器还可以兼容，新的api见navigator.mediaDevices.getUserMedia