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 7之传统I/O - 字符类 StringReader和StringWriter
转自:https://www.xuebuyuan.com/2015312.html 这两个类将String类适配到了Reader和Writer接口,在StringWriter类实现的过程中,真正使用的 ...
- TensorFlow训练MNIST报错ResourceExhaustedError
title: TensorFlow训练MNIST报错ResourceExhaustedError date: 2018-04-01 12:35:44 categories: deep learning ...
- python 3.x 学习笔记7 ( 模块 （修）)
1.定义:模块:用来从逻辑上组织python代码(变量.函数.类.逻辑:实现一个功能),本质就是.py结尾的python文件包:用来从逻辑上组织模块的,本质就是一个目录(必须带有一个__init__. ...
- 中文版 ImageNet Classification with Deep Convolutional Neural Networks
ImageNet Classification with Deep Convolutional Neural Networks 摘要 我们训练了一个大型深度卷积神经网络来将ImageNet LSVRC ...
- 用Beamer做Slides
学术用幻灯片,首选还是latex.但是问题来了,Beamer这个latex幻灯模板还需要很多自定义设置.于是找了网上一些自己觉得好的例子. http://www.latexstudio.net/ind ...
- Sublime Text 3 注册码 激活码 版本号 Build 3143
—– BEGIN LICENSE —– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA ...
- About CNN（convolutional neural network）
NO.1卷积神经网络基本概念 CNN是第一个被成功训练的多层深度神经网络结构,具有较强的容错.自学习及并行处理能力.最初是为识别二维图像而设计的多层感知器,局部连接和权值共享网络结构 类似于生物神经网 ...
- vue非空校验
效果图 实现代码 //页面html <div> <ul class="listinfo"> <li> <span class=" ...
- 织梦DEDECMS系统中文章内容为空 用SQL语句如何删除？
织梦后台里提供了清空内容为空的文章,可是发现并不好用,有些空文章还是删除不了,而有些文章不是空的,只是采到了几个字,这些无法清除,于是就手动来清除这个文章.开始是一个一个文章找,一个一个来删除,后来觉 ...
- POJ-2318 TOYS 计算几何 判断点在线段的位置
题目链接:https://cn.vjudge.net/problem/POJ-2318 题意 在一个矩形内,给出n-1条线段,把矩形分成n快四边形 问某些点在那个四边形内 思路 二分+判断点与位置关系 ...