H5+js调用相机
在机缘巧合之下，了解到用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调用相机的更多相关文章
- h5页面调用相机功能
//accept:表示要打开的文件类型 capture:表示可以捕获到系统默认的设备 <input type="file" accept="image/*" ...
- Android与JS混编（js调用android相机）
参考android相机调用,http://blog.csdn.net/yanzi1225627/article/details/33028041/,谢谢 相机怎么调用就不做赘述了,下面是js调用 ...
- 【方法】移动端H5如何调用相册和相机上传图片、音频、视频
在移动端上传图片方法很简单,使用HTML5中的input:file供文件上传. <一>常用属性值: 1.accept:规定文件上传来提交的文件类型,此属性只能和type:file配合使用 ...
- 在Angular.js中的H5页面调用Web api时跨域问题处理
/// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...
- C#/.net 通过js调用系统相机进行拍照，图片无损压缩后进行二维码识别
这两天撸了一个需求,通过 JS 调用手机后置相机,进行拍照扫码.前台实现调用手机相机,然后截取图片并上传到后台的功能.后台接收传过来的图片后,通过调用开源二维码识别库 ZXing 进行二维码数据解析 ...
- 一、H5(移动端)前端使用input type=file 上传图片，调用相机和相册
一.H5(移动端)前端使用input type=file 上传图片,调用相机和相册
- iOS原生APP与H5+JS交互////////////////////zzzz
原生代码中直接加载页面 1. 具体案例 加载本地/网络HTML5作为功能介绍页 2. 代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webView ...
- [iOS Hybrid实践：UIWebView中Html中用JS调用OC方法，OC执行JS代码]
原理: 1.JS调用OC 每次webview执行跳转时都会被iOS给拦截,执行下面函数获得系统允许. 因此可以根据跳转信息转给系统,执行相应功能,比如打开相册等. // 网页中的每一个请求都会被触发 ...
- js调用ios的方法
摘要 在做h5应用的时,有时有些功能js并不能实现的特别完美.比如下载进度条或上传文件进度等.如果能调用ios或者android的方法,实现进度,以及文件上传或者下载列表更好一些.如果使用第三方的js ...
随机推荐
- 国内不fq安装K8S一: 安装docker
目录 1.安装docker 1.1 准备工作 1.2 安装docker 1.3 修改cgroup 国内不fq安装K8S一: 安装docker 国内不fq安装K8S二: 安装kubernet 国内不fq ...
- Linux下 svn相关操作
Linux下 svn相关操作 一.首先看看svn安装的位置: 命令: find / -name svn /var/svn :表示安装目录 /user/bin/svn :表示命令目录 可以看到的是svn ...
- H3C 802.1x认证接入过程
- Win10 Microsoft Store 微软商店 Error 0x00000193 解决方法
0x00 前言 最近使用 CFW 过程中使用 Fiddle Web Debug 设置 Store 的回环代理的过程中发现无论是否使用代理,Store 都无法访问网络的问题,在最下面的提示中出现了 0x ...
- CF528D Fuzzy Search 和 BZOJ4259 残缺的字符串
Fuzzy Search 给你文本串 S 和模式串 T,求 S 的每个位置是否能模糊匹配上 T. 这里的模糊匹配指的是把 T 放到 S 相应位置上之后,T 中每个字符所在位置附近 k 个之内的位置上的 ...
- JQuery系列（8） - JQuery插件开发
所谓“插件”,就是用户自己新增的jQuery实例对象的方法.由于该方法要被所有实例共享,所以只能定义在jQuery构造函数的原型对象(prototype)之上.对于用户来说,把一些常用的操作封装成插件 ...
- 学习Java书籍推荐和面试网站推荐
一.Java书籍推荐: 来自http://www.importnew.com/26932.html 1. 鸟哥的Linux私房菜—基础学习篇 3. Effective Java 6. Java并发编程 ...
- redux：基于函数式编程的事件处理和状态维护机制
redux = monand + pipeline + highorder componet + decouple + middleware redex = store based + event h ...
- continue语句：编程把100-300之间的能被25整除的数输出
#include<stdio.h>void main(){ int n; for(n=100;n<=300;n++) { if(n%25!=0) continue; printf(& ...
- pycharm中使用2to3
https://www.jianshu.com/p/abbb005ba002 可用