代码如下:
function initVideo(wid,hei){
width = wid;
height = hei;
video = document.getElementById('video');
//访问摄像头
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia) {
//调用用户媒体设备, 访问摄像头 'facingMode': "user"调用前置摄像头
getUserMedia({video: {width: width, height: height},audio: false}, success, error);
} else {
alert('不支持访问用户媒体');
}
}
//访问用户媒体设备的兼容方法
function getUserMedia(varraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(varraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(varraints, success, error)
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(varraints, success, error);
}else if(navigator.msGetUserMedia){
// IE浏览器
navigator.msGetUserMedia(varraints, success, error);
}else if(navigator.oGetUserMedia){
// opera浏览器
navigator.oGetUserMedia(varraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(varraints, success, error);
}
}
//成功回调
function success(stream) {
streamObj = (typeof stream.stop) === 'function' ? stream : stream.getTracks()[0];
// 兼容性监测
video.srcObject = stream;
video.play()
canvas = document.getElementById('canvas');
canvas.width = width;
canvas.height = height;
context = canvas.getContext('2d');
canvasInterval = setInterval(drawCanvasImage, 50)
}
// 绘制canvas
function drawCanvasImage(){
context.drawImage(video, 0, 0,width,height);
}
console.log(canvas.toDataURL("image/jpeg",1))//画布没有绘制,取到的base64为无效图片,全黑图
得看安卓和叮叮的浏览器内核