在机缘巧合之下，了解到用HTML5和javascript调用摄像头来实现拍照功能，今天就把大致原理写下来。页面布局很简单，就是一个input标签，两个HTML5元素video、canvas和一个button按钮。video元素带有开启视频功能的函数，canvas元素带有捕捉图像功能的函数。
源代码如下：
<!doctype html>
GET VIDEO
拍照
functiongetMedia(){
letconstraints = {
video: {width:500,height:500},
audio:true
};
//获得video摄像头区域
letvideo =document.getElementById("video");
//这里介绍新的方法，返回一个 Promise对象
// 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
// then()是Promise对象里的方法
// then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
// 避免数据没有获取到
letpromise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function(MediaStream){
video.srcObject = MediaStream;
video.play();
});
}
functiontakePhoto(){
//获得Canvas对象
letvideo =document.getElementById("video");
letcanvas =document.getElementById("canvas");
letctx = canvas.getContext('2d');
ctx.drawImage(video,0,0,500,500);
}
介绍一下代码中涉及到的两个函数：
getMedia()函数：
constraints 参数是一个包含了video和audio两个成员的MediaStreamConstraints对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求，那么返回的Promise对象就会处于rejected［失败］状态，NotFoundError作为rejected［失败］回调的参数。
有关于constraints对象的具体细节请点击下方链接：
getMedia()函数中的其他代码解释都在源代码中，不再赘述。
takePhoto()函数：
let video =document.getElementById("video");
let canvas =document.getElementById("canvas");
解释：Javascript使用id来获取video和canvas元素。
let ctx =ty.getContext('2d');
解释：创建context对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、
字符以及添加图像的方法。
下面对HTML5中的canvas drawImage（）方法做一介绍：
context.drawImage(img,x,y,width,height);
img：规定要使用的图像、画布或视频。
x: 在画布上放置图像的 x 坐标位置。
y: 在画布上放置图像的 y 坐标位置。
width: 要使用的图像的宽度。
height: 要使用的图像的高度。
以上就是基本的drawImage()方法的介绍，要想了解更多，请点击下方链接。
网友评论