使用HTML5技术控制电脑或手机上的摄像头(转载)

  移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头,并提取截屏图形。

观看演示

HTML代码

  下面的代码里我写了一部分注释,请阅读:

<!--
    理想情况下我们应该先判断你的设备上是否
    有摄像头或相机,但简单起见,我们在这里直接
    写出了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>

  在写出上面这些标记前应该判断用户的客户端是否有摄像头支持,但这里为了不那么麻烦,这里直接写出了这些HTML标记,需要注意的是我们这里使用的长宽是640×480。

JavaScript代码

  因为我们是手工写出的HTML,所以下面的js代码会比你想象的要简单了很多。

// Put event listeners into place
window.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 = stream;
            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的画布技术及其强大,我们可以给图片上加入各种迷人的滤镜效果。现在,在浏览器里用自己的摄像头给自己拍张照片吧!

引自:http://www.webhek.com/browser-camera

时间: 2024-10-21 02:25:47

使用HTML5技术控制电脑或手机上的摄像头(转载)的相关文章

使用HTML5技术控制电脑或手机上的摄像头

移动设备和桌面电脑上的客户端API起初并不是同步的.最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上.其中一个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机.下面就让我展示一下如何通过浏览器来访问你的摄像头,并提取截屏图形. 下面的代码里写了一部分注释,请阅读: 1.  <!-- 2.      理想情况下我们应该先判断你的设备上是否 3.      有摄像头或相机,但简单起见,我们在这里直接 4.      写

电脑和手机上常用apk或Pc软件的重要目录或文件或文件夹路径

常用apk或Pc软件的重要目录或文件或文件夹路径 01.hosts文件位置在哪里 C:\Windows\System32\drivers\etc 原文地址:https://www.cnblogs.com/GaoNa/p/10984448.html

调试手机上网页 (断点 console timeline 选择dom)

用手机看网页,越来越多,手机app套个webview的也很多,那该如何调试手机上的页面了?比如 断点,选dom,console,控制台输出,查看内存,== 嗯,万能的的chrome和safari还是帮我们解决了这些事情 android下调试手机上的网页(断点,查看修改dom,console输出,timeline,===) ios下调试手机上的网页 遇到的一些问题 android下调试手机上的网页(断点,查看修改dom,console输出,timeline,===) 一些说明 这个方案是chrom

安卓手机屏幕投射到电脑以及一台电脑控制多台手机技术原理浅析

奥创软件研究院推出的奥创微群控让越来越多的人了解到了电脑控制手机的操作.自奥创软件研究院首家发布电脑批量控制手机的解决方案以来,有很多人开始探讨电脑控制手机技术在实际工作中的应用. 由于市场太大,仅靠奥创软件研究院一家也是做不过来的,现在将手机屏幕投射到到电脑的技术原理,以及一台电脑批量控制多台手机的技术(即所谓的手机反响控制)简单的给大家介绍下,在此抛砖引玉,希望能给大家一些思路上的指导. 说到安卓手机的屏幕投射,就不得不说安卓的adb,ADB的全称为Android Debug Bridge这

一台电脑控制多台手机技术原理分析

奥创软件研究院是首家研发电脑批量控制手机的软件研发机构,现在简单跟大家分析下电脑批量控制手机的原理. 现在电脑控制手机有多种方式,云端,WIFI ,以及USB 连接,云端的话,其实就是云端向手机里面的APP发送指令,这样无法及时的跟进手机执行任务的情况,所以奥创软件研究院不在这里多介绍,这里为大家介绍一台电脑控制27台,最高控制127台的技术原理,希望能够帮助到大家理清楚电脑控制手机的一些基本原理. 可能有人会疑问,为什么最多是127台呢?因为当时电脑主板的USB 接口在设计出来的时候,没想到会

触控鼠标 (使用手机控制电脑,支持IOS,android.OSx 和windows)进入初步推广阶段

这款应用主要是用于使用手机控制电脑,几乎涉猎全平台(android 和 ios,windows 和os x),其实在1个月之前已经上线了,一直也比较忙,也就没有对这个应用进行一个系统的介绍和推广,今天就先写篇博文对这款应用进行一下系统的介绍和推广.从开始有一个开发自己的app 到有了这个开发思路,再到最后的app store 上线大概用了2个半月吧.因为是个人开发所以大部分都是用晚上和周末的时间做的,所以开发周期也就比较长点了. 从网站,到电脑服务端再到android 和iphone 手机端,完

一台电脑控制27台手机基本原理

奥创软件研究院是首家研发电脑批量控制手机的软件研发机构,现在跟大家简单聊下电脑控制手机的原理.现在电脑控制手机有多种方式,云端,WIFI ,以及USB 连接,云端的话,其实就是云端向手机里面的APP发送指令,这样无法及时的跟进手机执行任务的情况,所以奥创软件研究院不在这里多介绍,这里为大家介绍一台电脑控制27台,最高控制127台的技术原理,希望能够帮助到大家理清楚电脑控制手机的一些基本原理. 可能有人会疑问,为什么最多是127台呢?因为当时电脑主板的USB 接口在设计出来的时候,没想到会有这么多

手机控制电脑,在WIFI局域网下(关机,重启,遥控)

这个软件叫百变遥控:http://blog.sina.com.cn/s/blog_9abc7dbc0101hmut.html 今天周末,在家里看电影,家里用的是台式电脑,我自己买了一个投影仪来专门看视频节目的,因为投影仪是和电脑连接的,所以每次换集啊,想快进啊,就非常不方便,得跑去操作电脑,天冷啊,躺在床上不想动啊,所以想能用手机来操作电脑,于是在网上找了找. 我以前是用的TeamViewer和花生壳来远程控制我的公司里的办公电脑的,但这两个玩意有个问题,它们是需要通过这两个软件的中央服务器来转

手机控制电脑定时关机,重启WiFi

需求 晚上上床,电脑开着WiFi让手机上网.要么上床之前就给电脑设置定时关机:要么就电脑开通宵:要么就待会下来关电脑.这3种情况都非常不好,要么麻烦,要么浪费. 最无奈的是电脑刚开好WiFi,上床后才发现,手机虽然连上了WiFi,但是不能上网.于是蛋疼的从床上爬下来重启WiFi. 昨晚突发奇想如果能够在床上用手机控制电脑定时关机该多好.刚好今天凌晨咳嗽到睡不着,干脆起来实现它. 想法 因为电脑和手机在以上2种情况都是连通的,所以手机可以轻松访问电脑,那么就要把电脑部署成服务器. 然后让手机以网页