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 ...
随机推荐
- Django 之 restframework 版本控制的使用以及源码分析
Django rest_framework 之 版本控制 一.何为版本控制: 用于版本的控制 二.内置的版本控制类: from rest_framework.versioning import Q ...
- Python卸载不干净？苹果电脑卸载python教程
如今,Pyhon越来越火,屡次超越Java.C++成为编程语言排行榜第一的语言,国内的公司和程序员们也越来越喜欢使用Python.但是Python安装之后,散落在电脑各处,删除起来比较麻烦,很多小伙伴 ...
- KVM虚拟机被OOM killer
一.线上环境的虚拟机被KVM物理机kill掉 Linux 内核根据应用程序的要求分配内存,通常来说应用程序分配了内存但是并没有实际全部使用,为了提高性能,这部分没用的内存可以留作它用,这部分内存是属于 ...
- MySQL 8.0 的xtrabackup备份
xtrabackup 备份语句: fname=`date +%F_%H-%M-%S` mkdir -p /mnt/dbbak/db_$fname xtrabackup --defaults-file= ...
- Netbackup常用命令--bprestore
bprestore bprestore – 从 NetBackup 服务器还原文件 大纲 bprestore [-A | -B | -rb] [-K] [-l | -H | -y] [-r] [-T] ...
- 关于MySql的坑
今天弄hibernate的时候数据库死活连不上 估计mybatis也够呛 搞了好几个小时也不行,最后问题是mysql驱动版本过低,需要换高一些版本的驱动 另一个就是一个ssl方面的错误 连接的时候要把 ...
- python tkinter txt窗口，开线程两个卡死
一个线程可以,两个卡死 #!/usr/bin/python # coding: utf-8 from Tkinter import * import threading class MyThread2 ...
- 为什么 JVM 不用 JIT 全程编译？
考虑到跨平台,所以无法使用AOT: 考虑到执行效率,所以无法全部使用JIT: 编译技术大约分为两种,一种AOT,只线下(offline)就将源代码编译成目标机器码,这是普遍用在系统程序语言中:另一种是 ...
- Objective-C多态：动态类型识别＋动态绑定＋动态加载
http://blog.csdn.net/tskyfree/article/details/7984887 一.Objective-C多态 1.概念:相同接口,不同的实现 来自不同类可以定义共享相同名 ...
- 第9章 MyBatis的关系映射
在实际开发中,对数据库的操作通常涉及多张表,涉及了对象和对象之间的关联关系.针对多表之间的操作,MyBatis提供了关联映射,通过关联映射就可以很好的处理对象与对象之间的关联关系 9.1 关联关系概述 ...