在机缘巧合之下，了解到用HTML5和javascript调用摄像头来实现拍照功能，今天就把大致原理写下来。页面布局很简单，就是一个input标签，两个HTML5元素video、canvas和一个button按钮。video元素带有开启视频功能的函数，canvas元素带有捕捉图像功能的函数。

源代码如下：

<!doctype html>
<html lang="en">
<head>
<title>GET VIDEO</title>
<meta charset="utf-8">
</head>
<body>
<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button id="snap" onclick="takePhoto()">拍照</button>
<script>
function getMedia() {
let constraints = {
video: {width: 500, height: 500},
audio: true
};
//获得video摄像头区域
let video = document.getElementById("video");
//这里介绍新的方法，返回一个 Promise对象
// 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
// then()是Promise对象里的方法
// then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
// 避免数据没有获取到
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
video.srcObject = MediaStream;
video.play();
});
}

function takePhoto() {
//获得Canvas对象
let video = document.getElementById("video");
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 500, 500);
}
</script>
</body>
</html>

介绍一下代码中涉及到的两个函数：

getMedia()函数：

constraints 参数是一个包含了video和audio两个成员的MediaStreamConstraints对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求，那么返回的Promise对象就会处于rejected［失败］状态，NotFoundError作为rejected［失败］回调的参数。

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

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

更多内容介绍drawImage（）方法
---------------------
原文链接：https://blog.csdn.net/lishundi/article/details/80604747

H5+js调用相机的更多相关文章

  1. h5页面调用相机功能

    //accept:表示要打开的文件类型 capture:表示可以捕获到系统默认的设备 <input type="file" accept="image/*" ...

  2. Android与JS混编（js调用android相机）

       参考android相机调用,http://blog.csdn.net/yanzi1225627/article/details/33028041/,谢谢 相机怎么调用就不做赘述了,下面是js调用 ...

  3. 【方法】移动端H5如何调用相册和相机上传图片、音频、视频

    在移动端上传图片方法很简单,使用HTML5中的input:file供文件上传. <一>常用属性值: 1.accept:规定文件上传来提交的文件类型,此属性只能和type:file配合使用 ...

  4. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  5. C#/.net 通过js调用系统相机进行拍照，图片无损压缩后进行二维码识别

    这两天撸了一个需求,通过 JS  调用手机后置相机,进行拍照扫码.前台实现调用手机相机,然后截取图片并上传到后台的功能.后台接收传过来的图片后,通过调用开源二维码识别库 ZXing 进行二维码数据解析 ...

  6. 一、H5(移动端)前端使用input type=file 上传图片，调用相机和相册

    一.H5(移动端)前端使用input type=file 上传图片,调用相机和相册

  7. iOS原生APP与H5+JS交互////////////////////zzzz

    原生代码中直接加载页面 1.    具体案例 加载本地/网络HTML5作为功能介绍页 2.    代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webView ...

  8. [iOS Hybrid实践：UIWebView中Html中用JS调用OC方法，OC执行JS代码]

    原理: 1.JS调用OC 每次webview执行跳转时都会被iOS给拦截,执行下面函数获得系统允许. 因此可以根据跳转信息转给系统,执行相应功能,比如打开相册等. // 网页中的每一个请求都会被触发 ...

  9. js调用ios的方法

    摘要 在做h5应用的时,有时有些功能js并不能实现的特别完美.比如下载进度条或上传文件进度等.如果能调用ios或者android的方法,实现进度,以及文件上传或者下载列表更好一些.如果使用第三方的js ...

随机推荐

  1. Appium-desktop元素定位

    一.打开 appium-desktop ,点击 start session 二.打开后,点击屏幕右上角的搜索按钮 三.然后会打开配置页面,在本地服务配置信息同上面写的代码链接配置.填入正确的信息后,点 ...

  2. Netbackup常用命令--bprestore

    bprestore bprestore – 从 NetBackup 服务器还原文件 大纲 bprestore [-A | -B | -rb] [-K] [-l | -H | -y] [-r] [-T] ...

  3. PAT甲级1019水题飘过

    题目分析: 将n转成对应大小的b进制数之后判断是否为回文串,是则Yes,否则No #include<iostream> using namespace std; ]; //存放从0开始b进 ...

  4. mysql查询语句中使用星号真的慢的要死？

    前言 之所以写这篇文章,是源于以前看过的关于sql语句优化的帖子,里面明确提到了在sql语句中不要使用 * 来做查询,就像下面的规则中说的 2.尽量避免使用select *,返回无用的字段会降低查询效 ...

  5. Python调用百度接口（情感倾向分析）和讯飞接口（语音识别、关键词提取）处理音频文件

    本示例的过程是: 1. 音频转文本 2. 利用文本获取情感倾向分析结果 3. 利用文本获取关键词提取 首先是讯飞的语音识别模块.在这里可以找到非实时语音转写的相关文档以及 Python 示例.我略作了 ...

  6. 4484: [Jsoi2015]最小表示（拓扑序+bitset维护连通性）

    4484: [Jsoi2015]最小表示 题目链接 题解: bitset的题感觉都好巧妙啊QAQ. 因为题目中给出的是一个DAG,如果\(u->v\)这条边可以删去,等价于还存在一个更长的路径可 ...

  7. JMeter的执行顺序

    JMeter执行顺序如下:1.配置元件2.前置处理器3.定时器4.采样器5.后置处理器(除非服务器响应为空)6.断言(除非服务器响应为空)7.监听器(除非服务器响应为空) 只有当作用域内存在采样器时, ...

  8. MySQL定义char和varchar类型，utf8编码，则最大值为多少？

    有道面试题:若一张表中只有一个字段VARCHAR(N)类型,utf8编码,则N最大值为多少?先明白计算的一些规则限制 4.0版本以下,varchar(20),指的是20字节,如果存放UTF8汉字时,只 ...

  9. nginx部署vue项目

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构 ...

  10. vue 实战总结

    相对angular 和react ,本人比较喜欢vue,现在的工作项目也在用vue,前两个有朋友在问我在使用vue中有没有遇到一些很难解决的问题,一下我也只能说出一两个,所以索性就抽时间总结一下我在项 ...