用html5和javascript调用摄像头实现拍照功能

在机缘巧合之下，了解到用HTML5和javascript调用摄像头来实现拍照功能，今天就把大致原理写下来。

页面布局很简单，就是一个input标签，两个HTML5元素video、canvas和一个button按钮。

video元素带有开启视频功能的函数，canvas元素带有捕捉图像功能的函数。

先来看一下开启视屏功能的函数（getMedia()）,代码如下：

constraints 参数是一个包含了video和audio两个成员的MediaStreamConstraints对象，用于说明请

求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型

或者无法满足相对应的参数要求，那么返回的Promise对象就会处于rejected［失败］状

态，NotFoundError作为rejected［失败］回调的参数。

有关于constraints对象的具体细节请点击下方链接：

有关于constraints对象的具体细节介绍

以下是拍照功能的函数具体实现：

    var video =document.getElementById("window");

    var ty =document.getElementById("canvas");

Javascript使用id来获取video和canvas元素。

    var  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()方法的介绍，要想了解更多，请点击下方链接。

更多内容介绍drawImage（）方法

以上就是用HTML5和JavaScript调用摄像头实现拍照功能的大致介绍了，喜欢就给个赞吧。