如何通过html5调用电脑摄像头手机摄像头

来源：蜘蛛抓取(WebSpider) 时间：2017-04-18 09:26 标签： html调用电脑摄像头
基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 - photobooth.js
WebRTC可能是明年最受关注的HTML5标准了，Mozilla为此开发了一套帮助你控制硬件的API，例如，摄像头，麦克风，或者是加速表。你可以不依赖其它的插件来调用你需要的本机硬件设备。&
在今天的这篇文章中，我们将介绍来自Wolfram Hempel开发的Photobooth.js，使用这个类库可以帮助你快速的调用摄像头功能，你可以很容易的添加摄像头功能到网站中。并且快速的帮助你拍照，你可以使用这个功能来实现用户的大头照拍摄，是不是非常不错？&
主要特性：&
使用Chrome打开在线演示后，请确认允许浏览器调用你的摄像头，如下：&
Javascript代码：
$（&#webcam&）.photobooth（）.on（&image&，function（ event， dataUrl ）{
$（&.nopic&）.hide（）;
$（ &#pictures& ）.prepend（ &&img src=&& + dataUrl + && &&）;
以上代码将生成的图片数据传递到id=picture的这个标签中。具体说明请参考相关API。&
希望大家喜欢我们提供的这个在线演示和demo，如果你有任何问题，请给我们留言，谢谢！&
文章：359篇人气：58221
< 是专注于互联网技术的独立博客，我们分享最好的html，css，javascrip，jQuery等技术教程和文章，及其UI设计和素材，努力成为最专业的产品，UI设计和编程开发网站内容分享和原创网站。
本网页浏览已超过3分钟，点击关闭或灰色背景，即可回到网页拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3be8f98f32ea43dd-ua98).
重新安装浏览器，或使用别的浏览器10:19 提问
html5怎么调用手机摄像头并且扫描二维码？
现在在做的一个项目需要做一个手机浏览器上扫描二维码的功能，自己在网上找了很多，但还是不行，求大神指点。谢谢！谢谢！
按赞数排序
appcan和hbuilder都有解决办法，你查查看
其他相关推荐HTML5如何调用电脑或手机上的摄像头
查看: 6549|
摘要: 很多同学问的最多的一个问题就是,html5在不利用phoengap调用原生的情况下如何调用手机摄像头，今天给大家分享一个HTML5如何调用电脑或手机上的摄像头 的文章希望对大家有帮助移动设备和桌面电脑上的客户端API起初并
多同学问的最多的一个问题就是,html5在不利用phoengap调用原生的情况下如何调用手机摄像头，今天给大家分享一个HTML5如何调用电脑或手机上的摄像头 的文章希望对大家有帮助移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。HTML代码下面的代码里我写了一部分注释，请阅读：&pre&&!--
理想情况下我们应该先判断你的设备上是否 有摄像头或相机，但简单起见，我们在这里直接 写出了HTML标记，而不是用JavaScript先判断
然后动态生成这些标记
--&&video id="video" width="640" height="480" autoplay&&/video&
&button id="snap"&Snap Photo&/button&
&canvas id="canvas" width="640" height="480"&&/canvas&&/pre&在写出上面这些标记前应该判断用户的客户端是否有摄像头支持，但这里为了不那么麻烦，这里直接写出了这些HTML标记，需要注意的是我们这里使用的长宽是640×480。JavaScript代码因为我们是手工写出的HTML，所以下面的js代码会比你想象的要简单了很多。// Put event listeners into placewindow.addEventListener("DOMContentLoaded", function() {&&& // Grab elements, create settings, etc.&&& var canvas = document.getElementById("canvas"),&&& &&& context = canvas.getContext("2d"),&&& &&& video = document.getElementById("video"),&&& &&& videoObj = { "video": true },&&& &&& errBack = function(error) {&&& &&& &&& console.log("Video capture error: ", error.code); &&& &&& };&&& // Put video listeners into place&&& if(navigator.getUserMedia) { // Standard&&& &&& navigator.getUserMedia(videoObj, function(stream) {&&& &&& &&& video.src =&&& &&& &&& video.play();&&& &&& }, errBack);&&& } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed&&& &&& navigator.webkitGetUserMedia(videoObj, function(stream){&&& &&& &&& video.src = window.webkitURL.createObjectURL(stream);&&& &&& &&& video.play();&&& &&& }, errBack);&&& }&&& else if(navigator.mozGetUserMedia) { // Firefox-prefixed&&& &&& navigator.mozGetUserMedia(videoObj, function(stream){&&& &&& &&& video.src = window.URL.createObjectURL(stream);&&& &&& &&& video.play();&&& &&& }, errBack);&&& }}, false);一旦判断出用户浏览器支持getUserMedia ，下面就非常简单了，只需要将那个video元素的src设置为用户的摄像头视频直播连接。这就是用浏览器访问摄像头需要做的所有的事情！拍照的功能只能说是稍微复杂一点点。我们在按钮上加入一个监听器，将视频画面画到画布上。// 触发拍照动作document.getElementById("snap")&&&&&& .addEventListener("click", function() {&&& context.drawImage(video, 0, 0, 640, 480);});当然，你还可以在图片上加一些滤镜效果….我还是把这些技术放到以后的文章里再说吧。但至少你可以将这个画布图像转换成一张图片。以前我们需要使用第三方的插件才能从浏览器里访问用户的摄像头，这不免有些复杂。现在只需要HTML5的画布技术和javaScript，我们就能简单快速的操作用户的摄像头。不仅仅还是访问摄像头，而且是因为HTML5的画布技术及其强大，我们可以给图片上加入各种迷人的滤镜效果。现在，在浏览器里用自己的摄像头给自己拍张照片吧！有兴趣的童鞋可以试试这种方法
刚表态过的朋友 ()
上一篇：下一篇：
站长推荐 /1
Ionic(ionicframework)号称未来最有潜力的一款html5移动app开发框架是Angularjs移动端解决方案，Angularjs号称下一代web应用，Ionic移动app开发教程值得拥有
Powered byOpera Mobile通过HTML5调用手机摄像头的Demo-原创视频-搜狐视频
Opera Mobile通过HTML5调用手机摄像头的Demo
<span class="c-black" data-rss-fanscount=" 人订阅
视频介绍：
Opera Mobile通过HTML5调用手机摄像头的Demo 这是一个Demo，在这个Demo中Opera Mobile可以在不用任何其他的外设、扩展等等的情况下调用你手机上的摄像头，并且通过WebSockets将你拍到的照片传到你的桌面Opera上
推荐出品人

我要回帖

更多关于 html调用电脑摄像头 的文章

 

随机推荐