html5调用摄像头拍照源码
发表于：2024-11-29 作者：热门IT资讯网编辑
编辑最后更新 2024年11月29日，今天小编就为大家带来一篇关于html5调用摄像头拍照源码的文章。小编觉得挺实用的，为此分享给大家做个参考。一起跟随小编过来看看吧。代码： <！DOCTYPE html>
今天小编就为大家带来一篇关于html5调用摄像头拍照源码的文章。小编觉得挺实用的，为此分享给大家做个参考。一起跟随小编过来看看吧。
代码：
<！DOCTYPE html>HTML5调用摄像头实现拍照</ TITLE> <meta charset ="utf-8"> <meta name ="viewport"content ="width = device-width，initial-scale = 1"> </ HEAD> <BODY> <video id ="video"autoplay =""style ='width：640px; height：480px'> </ video> <button id ="paizhao">拍照</ button> <canvas id ="canvas"width ="640"height ="480"> </ canvas> <script type ="text / javascript"> var video = document.getElementById（"video"）; var context = canvas.getContext（"2d"）; var errocb = function（）{ console.log（"sth srong"）; } 如果（navigator.getUserMedia）{ navigator.getUserMedia（{ "视频"：真}，函数（流）{ video.src =流; video.play（）; }，errocb）; } else if（navigator.webkitGetUserMedia）{ navigator.webkitGetUserMedia（{ "视频"：真}，函数（流）{ video.src = window.webkitURL.createObjectURL（流）; video.play（）; }，errocb）; } 的document.getElementById（ "paizhao"）的addEventListener（ "点击"，函数（）{ context.drawImage（视频，0,0,640,480）; }）; </ SCRIPT> </ BODY> </ HTML></pre><p>以上就是html5调用摄像头拍照的源码，代码详细清楚，如果在日常工作遇到这个问题，希望你能通过这篇文章解决问题。如果想了解更多相关内容，欢迎关注行业资讯频道！</p> </div> <div class="diggit"><a href="#"> 很赞哦！ </a></div> <div class="clear"></div> <div class="keywords"> </div> <div class="share"> <div class="share-text"> <p>转载请说明来源于"热门IT资讯网"</p> <p>本文地址：<a href="https://www.492034.com/a454881" target="_blank">https://www.492034.com/a454881</a></p> </div> </div> <div class="clear"></div> </div> </div> <div class="clear blank"></div> <div class="otherlink whitebg"> <div class="news-title"> <h2>相关文章</h2> </div> <ul> <li><a href="https://www.492034.com/a459863" title="微信自带浏览器跳转appstore失效">微信自带浏览器跳转appstore失效</a></li> <li><a href="https://www.492034.com/a459862" title="PHP接收get、post 、json格式数据">PHP接收get、post 、json格式数据</a></li> <li><a href="https://www.492034.com/a459861" title="Yii2.0框架Restfull API开发攻略">Yii2.0框架Restfull API开发攻略</a></li> <li><a href="https://www.492034.com/a459860" title="PHP 安装于配置">PHP 安装于配置</a></li> <li><a href="https://www.492034.com/a459859" title="App上传应用市场的步骤有哪些能上传哪些应用市场">App上传应用市场的步骤有哪些能上传哪些应用市场</a></li> <li><a href="https://www.492034.com/a459858" title="unity3D与网页的交互---做项目的一点总结">unity3D与网页的交互---做项目的一点总结</a></li> <li><a href="https://www.492034.com/a459857" title="人工智能学习难度大吗 选择Python入门怎么样">人工智能学习难度大吗 选择Python入门怎么样</a></li> <li><a href="https://www.492034.com/a459856" title="原来按下这个按钮，iPhone手机秒变扫描仪，你不会还不知道">原来按下这个按钮，iPhone手机秒变扫描仪，你不会还不知道</a></li> <li><a href="https://www.492034.com/a459855" title="auto_mysqldump_data.sh">auto_mysqldump_data.sh</a></li> <li><a href="https://www.492034.com/a459854" title="利用curl监控web返回状态码监控web service">利用curl监控web返回状态码监控web service</a></li> <!-- <li><a target="_blank" href="/">制作是这么收费的？</a></li> --> </ul> </div> </div> <!-- . end of left-box --> <!-- right aside start--> <aside class="side-section right-box"> <div class="side-tab"> <ul id="sidetab"> <li class="sidetab-current">站长推荐</li> <li>点击排行</li> </ul> <div id="sidetab-content"> <section> <div class="tuijian"> <section class="topnews imgscale"><a href="https://www.492034.com/a459865" title="一季度中国IT安全硬件市场规模同比增长14.5%"><img src="https://www.492034.com/uploadfile/thumb/c9f0f895fb98ab9159f51fd0297e236d/278x185_auto.jpg" alt="一季度中国IT安全硬件市场规模同比增长14.5%"><span>一季度中国IT安全硬件市场规模同比增长14.5%</span></a></section> <ul> <li><a href="https://www.492034.com/a459864" title="小米 MIUI 13.5 升级名单曝光，Android 11 机型或被抛弃"><i><img src="https://www.492034.com/uploadfile/thumb/eccbc87e4b5ce2fe28308fd9f2a7baf3/70x70_auto.jpg" alt="小米 MIUI 13.5 升级名单曝光，Android 11 机型或被抛弃"></i> <p>小米 MIUI 13.5 升级名单曝光，Android 11 机型或被抛弃</p> </a></li> <li><a href="https://www.492034.com/a459859" title="App上传应用市场的步骤有哪些能上传哪些应用市场"><i><img src="https://www.492034.com/uploadfile/thumb/34/66a3b49a.webp" alt="App上传应用市场的步骤有哪些能上传哪些应用市场"></i> <p>App上传应用市场的步骤有哪些能上传哪些应用市场</p> </a></li> <li><a href="https://www.492034.com/a459857" title="人工智能学习难度大吗 选择Python入门怎么样"><i><img src="https://www.492034.com/uploadfile/thumb/6f/151b5a8a.webp" alt="人工智能学习难度大吗 选择Python入门怎么样"></i> <p>人工智能学习难度大吗 选择Python入门怎么样</p> </a></li> <li><a href="https://www.492034.com/a459856" title="原来按下这个按钮，iPhone手机秒变扫描仪，你不会还不知道"><i><img src="https://www.492034.com/uploadfile/thumb/02/7ca1dc6b.webp" alt="原来按下这个按钮，iPhone手机秒变扫描仪，你不会还不知道"></i> <p>原来按下这个按钮，iPhone手机秒变扫描仪，你不会还不知道</p> </a></li> </ul> <section class="topnews imgscale"><a href="https://www.492034.com/a459852" title="关于HTML5的简单理解"><img src="https://www.492034.com/uploadfile/thumb/84/89f54657.webp" alt="关于HTML5的简单理解"><span>关于HTML5的简单理解</span></a></section> <ul> <li><a href="https://www.492034.com/a459846" title="想知道HTML5培训班值不值得去参加"><i><img src="https://www.492034.com/uploadfile/thumb/0d/0af1469c.webp" alt="想知道HTML5培训班值不值得去参加"></i> <p>想知道HTML5培训班值不值得去参加</p> </a></li> <li><a href="https://www.492034.com/a459845" title="客户端热更新框架之UI热更框架设计(下)"><i><img src="https://www.492034.com/uploadfile/thumb/95/ce151df2.webp" alt="客户端热更新框架之UI热更框架设计(下)"></i> <p>客户端热更新框架之UI热更框架设计(下)</p> </a></li> <li><a href="https://www.492034.com/a459836" title="unity3d游戏开发优化简单说明"><i><img src="https://www.492034.com/uploadfile/thumb/b9/2374e783.webp" alt="unity3d游戏开发优化简单说明"></i> <p>unity3d游戏开发优化简单说明</p> </a></li> <li><a href="https://www.492034.com/a459833" title="程序猿的一天"><i><img src="https://www.492034.com/uploadfile/thumb/ec/cb9eba12.webp" alt="程序猿的一天"></i> <p>程序猿的一天</p> </a></li> </ul> </div> </section> <section> <div class="paihang"> <section class="topnews imgscale"><a href="https://www.492034.com/a398653" title="asp后段调用python的方法"><img src="https://www.492034.com/static/assets/images/nopic-3.webp" alt="asp后段调用python的方法"><span>asp后段调用python的方法</span></a></section> <ul> <li><i></i><a href="https://www.492034.com/a248188" title="如何应用AJAX进行注册用户即时检测">如何应用AJAX进行注册用户即时检测</a></li> <li><i></i><a href="https://www.492034.com/a389738" title="Springboot+echarts实现可视化">Springboot+echarts实现可视化</a></li> <li><i></i><a href="https://www.492034.com/a446859" title="ckeditor4.5.1配置图片上传的方法">ckeditor4.5.1配置图片上传的方法</a></li> <li><i></i><a href="https://www.492034.com/a101824" title="Angular中与视图有关的定义有哪些">Angular中与视图有关的定义有哪些</a></li> <li><i></i><a href="https://www.492034.com/a170705" title="织梦自定义表单制作在线订单的方法">织梦自定义表单制作在线订单的方法</a></li> <li><i></i><a href="https://www.492034.com/a100119" title="undo_retention之确定最优的撤销保留时间">undo_retention之确定最优的撤销保留时间</a></li> <li><i></i><a href="https://www.492034.com/a64933" title="以太坊生态系统中的开发工具和技术有哪些">以太坊生态系统中的开发工具和技术有哪些</a></li> <li><i></i><a href="https://www.492034.com/a94442" title="ORA-600：[qertbGetPartitionNumber:qesma2],[],[],[]">ORA-600：[qertbGetPartitionNumber:qesma2],[],[],[]</a></li> </ul> <section class="topnews imgscale"><a href="https://www.492034.com/a44464" title="kbengine+cocos2djs的mmorpg游戏demo是怎么样的"><img src="https://www.492034.com/static/assets/images/nopic-6.webp" alt="kbengine+cocos2djs的mmorpg游戏demo是怎么样的"><span>kbengine+cocos2djs的mmorpg游戏demo是怎么样的</span></a></section> </div> </section> </div> </div> <div class="whitebg cloud"> <h2 class="side-title">标签云</h2> <ul> <a target="_blank" href="https://www.492034.com/tag-100248.html">服务器不能远程桌面</a> <a target="_blank" href="https://www.492034.com/tag-2377870.html">选择外国服务器安全吗</a> <a target="_blank" href="https://www.492034.com/tag-2300001.html">女大学生预防网络安全的措施</a> <a target="_blank" href="https://www.492034.com/tag-2099808.html">网络安全有哪些含金量的证书</a> <a target="_blank" href="https://www.492034.com/tag-102283.html">服务器打开很卡</a> <a target="_blank" href="https://www.492034.com/tag-100027.html">服务器网站模板</a> <a target="_blank" href="https://www.492034.com/tag-100007.html">腾讯云服务器解析域名</a> <a target="_blank" href="https://www.492034.com/tag-2146.html">php 数据库的安全性</a> <a target="_blank" href="https://www.492034.com/tag-126.html">mysql数据库的安全性</a> <a target="_blank" href="https://www.492034.com/tag-2377747.html">服务器云安全费用</a> <a target="_blank" href="https://www.492034.com/tag-100357.html">服务器最大允许连接数</a> <a target="_blank" href="https://www.492034.com/tag-102503.html">云服务器 部署网站</a> <a target="_blank" href="https://www.492034.com/tag-100028.html">linux 跳转服务器</a> <a target="_blank" href="https://www.492034.com/tag-100008.html">服务器可以挖矿吗</a> <a target="_blank" href="https://www.492034.com/tag-200003.html">群晖搭建app服务器</a> <a target="_blank" href="https://www.492034.com/tag-100303.html">deepin 服务器版</a> <a target="_blank" href="https://www.492034.com/tag-278.html">数据库文件安全</a> <a target="_blank" href="https://www.492034.com/tag-2100004.html">校园信息网络安全稳定</a> <a target="_blank" href="https://www.492034.com/tag-1999997.html">幼儿园网络安全教育拍手歌</a> <a target="_blank" href="https://www.492034.com/tag-301072.html">本地怎么连接服务器hive</a> </ul> </div> <div class="clear blank"></div> <div class="whitebg suiji"> <h2 class="side-title">猜你喜欢</h2> <ul> <li><a href="https://www.492034.com/a225529" title="agilent3070软件安装">agilent3070软件安装</a></li> <li><a href="https://www.492034.com/a338912" title="怎么使用纯HTML的通用数据管理和服务">怎么使用纯HTML的通用数据管理和服务</a></li> <li><a href="https://www.492034.com/a393476" title="Python+opencv 实现图片文字的分割的方法示例">Python+opencv 实现图片文字的分割的方法示例</a></li> <li><a href="https://www.492034.com/a339690" title="Files与Paths类怎么在java项目中使用">Files与Paths类怎么在java项目中使用</a></li> <li><a href="https://www.492034.com/a412022" title="查看jupyter文件位置的方法">查看jupyter文件位置的方法</a></li> <li><a href="https://www.492034.com/a24088" title="uni-app中弹窗的使用与自定义弹窗的方法">uni-app中弹窗的使用与自定义弹窗的方法</a></li> <li><a href="https://www.492034.com/a326688" title="Python接入MySQL如何实现增删改查">Python接入MySQL如何实现增删改查</a></li> <li><a href="https://www.492034.com/a123239" title="怎么给Linux发行版添加漂亮的字体">怎么给Linux发行版添加漂亮的字体</a></li> <li><a href="https://www.492034.com/a147264" title="如何解决jvm内存溢出java.lang.OutOfMemoryError: GC overhead limit exceeded问题">如何解决jvm内存溢出java.lang.OutOfMemoryError: GC overhead limit exceeded问题</a></li> <li><a href="https://www.492034.com/a400314" title="java高并发系列 - 第4天:JMM相关的一些概念">java高并发系列 - 第4天:JMM相关的一些概念</a></li> </ul> </div> </aside> <!-- right aside end--> </article> <div class="clear blank"></div> <!--footer start--> <footer> <div class="footer box"> <div class="wxbox"> </div> <div class="endnav"> <p><b>站点声明：</b></p> <p>所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。</p> <p>Copyright © 2009-2024 <a href="https://www.492034.com/" target="_blank">热门IT资讯网</a> All Rights Reserved. <a href="/sitemap.xml">网站地图</a> <a href="/about/">关于我们</a> <a href="/contact-us/">联系我们</a> </p> </div> </div> </footer> <a href="#" title="返回顶部" class="icon-top"></a> <!--footer end--> <div style="display:none"> <!-- site_tongji --> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?36c15626b9249e23d6751c6c63858909"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-91HRTP3109"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-91HRTP3109'); </script> <!-- baidu_push --> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> <div style="display:none"> <span class="dr_show_hits_454881">0</span><script type="text/javascript"> $.ajax({ type: "GET", url:"/index.php?s=api&c=module&siteid=1&app=article&m=hits&id=454881", dataType: "jsonp", success: function(data){ if (data.code) { $(".dr_show_hits_454881").html(data.msg); } else { dr_tips(0, data.msg); } } }); </script></div> <!--本页面URL https://www.492034.com/a454881 --> <!--本页面于2024-11-29 06:34:59更新--> </body> </html>