HTML5按键打开摄像头和拍照
HTML5实现按键打开摄像头和拍照
步骤：
1、创建一个打开摄像头按钮的标签、video标签、拍照的按钮标签、画布
2、实现打开摄像头的功能
3、实现拍照功能
具体实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>takePhoto</title>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded",function(){
var drawing = document.getElementById("drawing");
if(drawing.getContext)
{
context = drawing.getContext("2d");
}
var video = document.getElementById("video");
var med = {video:true};
var errBack = function(e)
{
alert("An error has occurred",e)
}
var onCamera = document.getElementById("onCamera");
var takePhoto = document.getElementById("takePhoto")
//实现通过按钮打开摄像头的功能
onCamera.addEventListener("click",function(){
f(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia(med).then(function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
})
console.log(navigator.mediaDevices.getUserMedia(med))
}
},false);
//实现将拍照功能
takePhoto.addEventListener("click",function(stream){
context.drawImage(video,0,0,640,480)
},false);
},false)
</script>
</head>
<body>
<button id="onCamera">打开摄像头</button>
<video id="video" width="640" height="480"></video>
<button id="takePhoto">拍照</button>
<canvas id="drawing" width="640" height="480">A drawing of something</canvas>
</body>
</html>
HTML5按键打开摄像头和拍照的更多相关文章
- HTML5网页打开摄像头，并拍照
谷歌提高了安全要求,要摄像头必须用https 效果图:
- html5打开摄像头并用canvas模拟拍照
网上很多关于用HTML5打开本地摄像头的文章,但各有瑕疵.根据我自己的亲身体验,我分享一下我用HTML5打开摄像头的经验. 废话不多说,直接看代码. HTML代码: <video id=&quo ...
- html5打开摄像头并用canvas模拟拍照 - 转
<video id="video" width="640" height="480" autoplay></video&g ...
- html5调用手机摄像头，实现拍照上传功能
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
- 怎样让HTML5调用手机摄像头拍照——实践就是一切
原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...
- html5调用摄像头实现拍照
技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...
- 利用html5调用本地摄像头拍照上传图片[转]
利用html5调用本地摄像头拍照上传图片 html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...
- 手机端file限制只能选择图片、视频、音频，直接打开摄像头拍照或录像
限制只能选择图片 <input type="file" accept="image/*"> 限制只能选择视频 <input type=&quo ...
- 项目实战：Qt+Ffmpeg+OpenCV相机程序(打开摄像头、支持多种摄像头、分辨率调整、翻转、旋转、亮度调整、拍照、录像、回放图片、回放录像)
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...
随机推荐
- java web项目中资源国际化
有一些网站会有语言栏选项: 选择英文,内容就显示为英文: 选择中文,内容就显示文中文. 这里就用到了国际化资源. 先看效果图: 步骤: 1.建立资源包: mess_en_US.properties ( ...
- JAR包放在WEB-INF/lib子目录报ClassNotFoundException解决方案
对于Java Web应用依赖的jar包,我们通常会放到WEB-INF/lib目录下,但是笔者喜欢把不同框架的jar包放在不同的子目录下,例如新建一个struts目录存放struts框架的jar包等. ...
- avalon 双工绑定以及一个按钮多个事件
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> ...
- 「JavaSE 重新出发」01. Java介绍
「白皮书」关键术语 简单性(C++--) 面向对象 分布式 健壮性 安全性 体系结构中立 可移植性 解释型 高性能 多线程 动态性 Java 发展历程 SUN公司--Stanford Universi ...
- STM8S103内存详析
STM8S103的RAM有1k,0x00-0x3FF(RAM和ROM统一编址),其中0x200-0x3ff共512个字节默认为堆栈,剩余的低端512个字节又分为了Zero Page和剩余的RAM(简称 ...
- Mathab和Python的numpy中的数组维度
Matlab和Python的numpy在维度索引方面的不同点: 1.索引的起始点不同:Matlab起始位置的索引为1,Python为0. 2.索引的括号不同:Matlab中元素可以通过小括号表示索引, ...
- 联想lenovo 家用电脑安装win7 无法引导问题（新电脑安装系统时提示File:\Boot\BCD错误解决方案）
安装方式 : 1.进入 PE 2.用 EasyimageX 恢复 GHO镜像 3.重启后出现 原因: 主要 是安装win7 时,格式 化选择为GUID模式. 处理: win7 以后,格式华时选择MB ...
- spring慕课网
资源链接 http://spring.io/ http://projects.spring.io/spring-framework/ Spring是什么? Spring是一个开源的轻量级的应用开发框架 ...
- Linux命令之bc - 浮点计算器、进制转换
用途说明 Bash内置了对整数四则运算的支持,但是并不支持浮点运算,而bc命令可以很方便的进行浮点运算,当然整数运算也不再话下.手册页上说bc是An arbitrary precision calcu ...
- mariadb 视图 事务 索引 外键
视图 对于复杂的查询,在多个地方被使用,如果需求发生了改变,需要更改sql语句,则需要在多个地方进行修改,维护起来非常麻烦 假如因为某种需求,需要将user拆房表usera和表userb,该两张表 ...