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>

转载于:https://www.cnblogs.com/MyUniverse/p/10014231.html

HTML5按键打开摄像头和拍照相关推荐

buildroot+qt+qcamrea+opencv打开摄像头进行拍照录像保存功能
相关参考如何用FFmpeg API采集摄像头视频和麦克风音频,并实现录制文件的功能_爱写代码的自由人-CSDN博客_ffmpeg 摄像头红胖子(红模仿)的博文大全:开发技术集合(包含Qt实用技术. ...
html5 摄像头拍摄视频教程,html5实现调用摄像头并拍照功能
相关介绍: 我们知道通常情况下,DOMContentLoaded事件要在window.onload之前执行,当DOM树构建完成的时候就会执行DOMContentLoaded事件,而window.onl ...
html5 video js控制摄像头的焦距,html 通过input video canvas 打开摄像头定制相机
在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来.页面布局很简单,就是一个input标签,两个HTML5元素video.canvas和一个but ...
html5 隐藏摄像头,js控制摄像头拍照请问html5怎么关闭摄像头？
JS 能不能调用摄像头并拍照可以调用,不过适合HTML5,浏览器版本也要高点,有些低版本的估计不支持 var promisifiedOldGUM = function(constraints) { ...
AI 质检学习报告——实践篇——第一步：python利用OpenCV打开摄像头并截图
写在前边想要做一个AI质检的项目,一点一点来,首先:python利用OpenCV打开摄像头并拍照. 效果设摄像头像素不咋地,实际的产品肯定不会是这个像素,必须安排一个专业的. 实现代码 impor ...
mfc调取摄像头显示并截图_利用MFC来显示摄像头并拍照
今天是第一次尝试写一个MFC程序.水了一天,终于写好了.总结一下. 一.配置环境调用摄像头是通过opencv库进行的,所以首先要配置好opencv 的环境.这个可以通过这个链接进行配置. https ...
matlab用摄像头拍照,使用MATLAB调用摄像头并拍照—详细代码
大家也可以加我的交流群,所有资料我会在群里分享出来哦:977947271 2020/5/30: 近日每天都有十几个很明显的小号加群,而且有的大号进群竟然打广告和卖不良物品,经我和群友讨论后,加群需要1 ...
摄像头自建html直播,html5调用摄像头实现拍照
html5调用摄像头实现拍照拍照 var video=document.getElementById("video"); var context=canvas.getContex ...
uniapp打开摄像头进行视频并拍照
引用引用插件: 基于内置H5的人脸所识别组件. 引用文章:前端网页打开摄像头并将图像传给后端. 新建hybrid文件提示:以下是本篇文章正文内容,下面案例可供参考一.使用步骤 1.创建hybri ...

HTML5按键打开摄像头和拍照

HTML5按键打开摄像头和拍照相关推荐

最新文章

热门文章