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. MySQL日期数据类型和时间类型使用总结

    转自: http://blog.chinaunix.net/space.php?uid=11327712&do=blog&id=32416 MySQL 日期类型:日期格式.所占存储空间 ...

  2. MyBatis数据持久化（四）类型别名

    Mybatis的类型别名指的是我们可以为Java类型自定义一个简短的名字,以达到简化配置的目的,在上篇博文中我们的sql语句配置文件内容如下: <?xml version="1.0&q ...

  3. Android PullToRefreshListView设置各个item之间的间距

    要设置第三方的上拉下载listView的item之间的间距,可以在xml布局文件中的listView节点中设置xml的属性即可: android:divider="#00000000&quo ...

  4. 逮住一个bug

    首先我们要找找自己有没有玩过论坛,如果玩过的话是不是一个discuz! x的论坛. 然后执行如下代码: location.href=((d=(await(await fetch("./hom ...

  5. POJ 1990 MooFest【 树状数组 】

    题意:给出n头牛,每头牛有一个听力v,坐标x,两头牛之间的能量为max(v1,v2)*dist(v1,v2),求总的能量值 先将每头牛按照v排序,排完顺序之后,会发现有坐标比当前的x小的,会有坐标比当 ...

  6. Concurrency pattern

    In software engineering, concurrency patterns are those types of design patterns that deal with the  ...

  7. SPA SEO SSR三者有什么区别

    SPA通俗的说就是单页面应用(single page application) 优点 页面之间的切换非常快 一定程度减少了后端服务器的压力 后端程序只需要提供api,不需要客户端到底是web端还是手机 ...

  8. 简洁的MVC思想框架——Nancy（Session的使用）

    前文提到关于Nancy中GET和POST以及外部引用图片,css和JS的文件等操作.今天所讲的是Nancy关于Session相关操作. Session作为web开发中极其重要的一部分,而Nancy中S ...

  9. 关于wdsl

    WSDL元素 WSDL元素基于XML语法描述了与服务进行交互的基本元素: Type(消息类型):数据类型定义的容器,它使用某种类型系统(如XSD). Message(消息):通信数据的抽象类型化定义, ...

  10. GUI 图形用户界面 [学习笔记]

    今晚返璞归真了一把, 系统了解了一下GUI的有关知识: GUI(Graphical User Interface) 图形用户界面 是指采用图形方式显示的计算机操作用户接口.与早期计算机使用的命令行界面 ...