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 ...
随机推荐
- [JZOJ 5465] [NOIP2017提高A组冲刺11.9] 道路重建 解题报告 (e-dcc+树的直径)
题目链接: http://172.16.0.132/senior/#main/show/5465 题目: 小X所居住的X国共有n个城市,有m条无向道路将其连接.作为一个统一的国家,X 城的任意两个城市 ...
- 移动端video播放时不弹出页面层
移动端视频在播放时会主动弹出页面,有的浏览器不会.对那些会的浏览器进行处理: 直接加上下面三个属性即可,兼容方面就不说了,微信上是很ok的. <video x5-playsinline=&quo ...
- DBMS_XPLAN详细说明
执行计划的组成部分 正确的看执行计划 DBMS_XPLAN 这个包是一个很好查看执行计划,显示很多格式,来分析执行计划中存在的问题 format:控制详细执行计划输出的格式,包含以下内容: BASIC ...
- POJ 1664 放苹果【DFS】
题意:给出n个苹果,m个盘子,问有多少种不同的苹果放置方法 可以把它抽象为把一个数n,拆分成a1,a2,a3,---,am,使得它们的和为n, 话说这一题是学习的ppt里面的,它的思路就是搜索 搜索条 ...
- pandaboy玩pandas
基于python的三方库pandas的excel表二次开发 import numpy as np import pandas as pd import time from pandas import ...
- python对比图片
通过python的PIL模块可以对比两张图片是否相同,具体源码如下 from PIL import Image from PIL import ImageChops def compare_image ...
- 模块-时间模块(new)
模块-时间模块 导入: import time 方法: _STRUCT_TM_ITEMS __doc__ __loader__ __name__ __package__ __spec__ altzon ...
- oracle数据库回滚
线下测试数据误操作,回滚攻略--把数据捞出来,这个时间自己设置--表名一定要是:xx_tbd日期 CREATE TABLE user_tbd0718ASselect * from user as of ...
- 不安全的直接对象引用:你的 ASP.NET 应用数据是否安全?
介绍 作为一个在X94的航空工程师,你的老板要求你从2号楼的工程图中检索出一个特定的专利.不幸的是,进入大楼需要你出示你具有进入大楼的资格的证明,然后你迅速地以徽章的形式出示给了保安.到了十三楼,进入 ...
- HDU 5607 graph(矩阵优化+概率DP)
该题非常easy想到求概率的转移方程:用d[i][j]表示第i步,走到j点的概率. 可是该题的k高达1e9.所以依照套路.要用矩阵相乘来优化. 第一次写矩阵相乘. 大概的意思就是利用矩阵实现递推. 而 ...