用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调用摄像头实现拍照功能的大致介绍了，你的认真阅读是对我最大的赞赏。