摄像头拍照 ajax 传图片,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