首页 > 代码库 > html5调用本机摄像头兼容谷歌浏览器高版本,谷歌浏览器低版本,火狐浏览器
html5调用本机摄像头兼容谷歌浏览器高版本,谷歌浏览器低版本,火狐浏览器
做这个功能的时候在网上查了一些资料，代码如下，在这个代码在谷歌浏览器46版本是没问题的，在火狐浏览器也行，但是在谷歌浏览器高版本下是不兼容的
<div id="body"> <section class="featured"> <div class="content-wrapper"> <hgroup class="title"> <h1>Welcome to webcam</h1> <br /> <h2>兼容谷歌浏览器46版本，48版本，谷歌浏览器高版本，火狐浏览器</h2> </hgroup> </div> </section> <section class="content-wrapper main-content clear-fix"> <h3> html5在本机调用摄像头是没问题，但是部署到外网服务器，谷歌浏览器高版本需要将http要改成https;<br /> https在IIS7.5配置教程：http://www.cnblogs.com/bobliu/archive/2012/08/05/2590694.html ; </h3> <ol class="round"> <li class="one"> <video id="video" width="320" height="240" autoplay></video> <input type="button" value="拍照按钮" id="snap" /> </li> <li class="two"> <canvas id="canvas" width="320" height="240"></canvas> </li> </ol> </section></div>
<script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var video = document.getElementById("video"); $(document).ready(function () { videoObj = { video: true }; var errBack = function (error) { console.log("Video capture error: ", error.code); }; if (navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function (stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function (stream) { video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } else if (navigator.mozGetUserMedia) { // Firefox-prefixed navigator.mozGetUserMedia(videoObj, function (stream) { video.mozSrcObject = stream; video.play(); }, errBack); }; $("#snap").on("click", function () { context.drawImage(video, 0, 0, 640, 480); }); });</script>
谷歌浏览器高版本要兼容以上代码，必须要将项目部署成https
https与IIS7.5部署教程可以见这么同学的博客：http://www.cnblogs.com/bobliu/archive/2012/08/05/2590694.html ;
自己做了一个测试demo 点击下载
html5调用本机摄像头兼容谷歌浏览器高版本,谷歌浏览器低版本,火狐浏览器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。