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 ...
随机推荐
- Python学习日记(三十七) Mysql数据库篇 五
pymsql的使用 初识pymysql模块 先在数据库中创建一个用户信息表,里面包含用户的ID.用户名.密码 create table userinfo( uid int not null auto_ ...
- Docker10-实战-构建Java Web运行环境
目录 创建Docker镜像 下载制作镜像的系统 启动容器并修改镜像 制作镜像 创建Docker镜像 [info]构建Docker镜像的一般过程是首先创建一个容器, 并在容器里修改镜像,配置相关环境等, ...
- ingress controller 注解使用
ingress controller 注解使用 官网github注解地址: https://github.com/kubernetes/ingress-nginx/blob/master/docs/u ...
- Xmind8 Pro 最新版破解教程（序列号|破解文件|视频教程）
文字教程: (文字说明部分是为了增强教程的完整性,可以直接看视频教程部分) 一.下载XMindCrack.jar文件: 百度云(https://pan.baidu.com/s/1x5Y4FFG61MT ...
- c#时间与时间戳互转13位
Unix时间戳(Unix timestamp),或称Unix时间(Unix time).POSIX时间(POSIX time),是一种时间表示方式,定义为从格林威治时间1970年01月01日00时00 ...
- C语言scanf函数转换说明表及其修饰符表
1. 对于上一篇文章,总结printf()输出,C库也包含了多个输入函数, scanf()是最常用的一个,也是经常与printf()经常一起搭配使用的函数之一. scanf()和printf()类似, ...
- 数论篇7——组合数 & 卢卡斯定理（Lucas）
组合数 组合数就是高中排列组合的知识,求解组合数C(n,m),即从n个相同物品中取出m个的方案数. 求解方式 求解通式:$C^{m}_{n}=\dfrac {n!}{m!\left( n-m\righ ...
- Controller的激活（1）
Public interface IController { void Execute(RequestContext requestContext) } Public abstract Class C ...
- C++对象内存模型2 （虚函数，虚指针，虚函数表)（转）
class A { public: virtual void vfunc1(); virtual void vfunc2(); void func1(); void func2(); virtual ...
- Angular、React、Vue是什么？
基于js语言的UI(组件)管理库 +数据+交互+组织 相当于iOS的uikit(UIView)