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 ...
随机推荐
- 一、MySQL基础知识
一.背景介绍 我们每天都在访问各种网站.APP,如微信.QQ.抖音,今日头条等,这些东西上面都存在大量的信息,这些信息都需要有地方存储,存储在哪里呢?数据库. 所有我们需要开发一个网站.APP,数据库 ...
- 第一册：lesson 131.
原文: Don't be so sure. question:What's the problem about deciding on a holiday. Where are you going t ...
- 国内不fq安装K8S一: 安装docker
目录 1.安装docker 1.1 准备工作 1.2 安装docker 1.3 修改cgroup 国内不fq安装K8S一: 安装docker 国内不fq安装K8S二: 安装kubernet 国内不fq ...
- kubernetes集群证书过期之后--转发
步骤 如果有多master,需要在每个master上进行以下操作. 需要进行以下步骤 重新生成证书 重新生成对应的配置文件 重启docker 和 kubelet 拷贝kubectl 客户端文件 [ro ...
- elasticsearch使用ansj分词器
目前elasticsearch的版本已经更新到7.0以上了,不过由于客户需要5.2.2版本的elasticsearch,所以还是需要安装的,并且安装上ansj分词器.在部署ES的时候,采用容器的方式进 ...
- 项目Beta冲刺 随笔集合
课程: 软件工程1916|W(福州大学) 作业要求: 项目Beta冲刺 团队名称: 火鸡堂 作业目标: 尽力交付 火鸡堂 队员学号 队员姓名 博客地址 备注 221600111 彼术向 http:// ...
- 安装Matlab出现弹出DVD1插入DVD2的提示怎么办?
此使,找到DVD1光驱,右键弹出,然后回到dvd2.iso文件右键装载,回到matlab安装页面,对提示框“弹出DVD1插入DVD2”点击确定,安装即可继续进行.
- SSH框架学习中遇到的问题
在web.xml中配置struts2过滤器时,struts2 2.5之前的版本有ng,而2.5之后没有ng,如图 还有要注意web.xml的版本约束,之前一直遇到问题,后来在网上才发现原来时web的版 ...
- brew 又叫Homebrew，是Mac OSX上的软件包管理工具
brew 又叫Homebrew,是Mac OSX上的软件包管理工具; Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装.卸载.更新.查看.搜索等很多实用的功能.简单的一条指令,就可以 ...
- 关于springboot项目的jar和war两种打包方式部署的区别
关于springboot项目的jar和war两种打包方式部署的区别 关于springboot项目的jar和war两种打包方式部署的区别? https://bbs.csdn.net/topics/392 ...