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按键打开摄像头和拍照的更多相关文章

  1. HTML5网页打开摄像头，并拍照

    谷歌提高了安全要求,要摄像头必须用https 效果图:

  2. html5打开摄像头并用canvas模拟拍照

    网上很多关于用HTML5打开本地摄像头的文章,但各有瑕疵.根据我自己的亲身体验,我分享一下我用HTML5打开摄像头的经验. 废话不多说,直接看代码. HTML代码: <video id=&quo ...

  3. html5打开摄像头并用canvas模拟拍照 - 转

    <video id="video" width="640" height="480" autoplay></video&g ...

  4. html5调用手机摄像头，实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  5. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  6. html5调用摄像头实现拍照

    技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...

  7. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

  8. 手机端file限制只能选择图片、视频、音频，直接打开摄像头拍照或录像

    限制只能选择图片 <input type="file" accept="image/*"> 限制只能选择视频 <input type=&quo ...

  9. 项目实战：Qt+Ffmpeg+OpenCV相机程序(打开摄像头、支持多种摄像头、分辨率调整、翻转、旋转、亮度调整、拍照、录像、回放图片、回放录像)

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

随机推荐

  1. （转载）android 一些工具类汇总

    android 一些工具类汇总 作者:曾田生z 字体:[增加 减小] 类型:转载 时间:2016-08-14我要评论 本文给大家汇总介绍了一些常用的Android工具类,非常的简单实用,有需要的小伙伴 ...

  2. JavaScript学习——表格的隔行换色+高亮显示

    1.案例一:我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下: 1)新标签 <thead> //表头 <tr> <th></th&g ...

  3. 解决vuex刷新页面数据丢失

    1.前言 vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页 ...

  4. POJ-1113 Wall 计算几何 求凸包

    题目链接:https://cn.vjudge.net/problem/POJ-1113 题意 给一些点,求一个能够包围所有点且每个点到边界的距离不下于L的周长最小图形的周长 思路 求得凸包的周长,再加 ...

  5. BZOJ3796 Mushroom追妹纸（二分答案+后缀数组+KMP）

    求出一个串使得这个串是\(s1,s2\)的子串.串中不包含\(s3\). 如果没有这个\(s3\)就可以二分答案,然后height小于二分值分一组.看看每组里是不是出现过\(s1,s2\)的后缀.判断 ...

  6. springMVC接受数组

    var obj = {}; var params = new Array(); var selected1 = $('#datatable').DataTable().rows('.selected' ...

  7. layui Layui-Select多选的使用和注意事项

    1.最近买了layadmin的后台框架,使用Layui-Select总结如下 A.配置:我采用的全局引入配置的方式 赋值(选中状态)

  8. 使用 vue + thinkjs 开发博客程序记录

    一入冬懒癌发作,给自己找点事干.之前博客程序写过几次,php 的写过两次,nodejs 用 ThinkJS 写过,随着 ThinkJS 版本从1.x 升级到 2.x 之前的博客程序也做过升级.但是因为 ...

  9. Mysql学习总结（26）——MySQL子查询

    mysql中虽然有连接查询实现多表连接查询,但是连接查询的性能很差,因此便出现了子查询. 1.理论上,子查询可以出现在查询语句的任何位置,但实际应用中多出现在from后和where后.出现在from后 ...

  10. Camera Calibration 相机标定：原理简介（一）

    1 相机标定常见方法 广义来说,相机标定不单包括成像过程的几何关系标定,还包括辐射关系的标定,本文只探讨几何关系.相机标定是3D计算机视觉(Computer Vision)里从2D图像中提取量测信息的 ...