html5中一个有趣的 API，能够调用电脑的摄像头，结合 <video> 标签和 Canvas 就能在浏览器中拍摄照片了。

这里需要注意:

因为安全问题, chrome 对于本地文件禁用了很多功能(以file:///开头). 所以如果你直接把html文件拖进chrome是看不到效果的(getUserMedia 失败). 这个问题让我疑惑了挺久的.

解决办法:

1. 使用IDE 来查看效果, 比如webstorm.

2. 配合http服务器. 比如python simplehttpserver. 或者apache等等.

3. 关闭所有chrome窗口(否则参数无效). 在命令行中增加如下参数启动chrome.

chrome --allow-file-access-from-files

一个示例

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<p>Using Opera Next or Chrome Canary, use this page to take your picture!</p>

<video id="video" width="640" height="480" autoplay></video>

<button id="snap" class="sexyButton">Snap Photo</button>

<canvas id="canvas" width="640" height="480"></canvas>

<script>

    // 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) { // WebKit-prefixed

            navigator.mozGetUserMedia(videoObj, function(stream){

                video.src = window.URL.createObjectURL(stream);

                video.play();

            }, errBack);

        }

        // Trigger photo take

        document.getElementById("snap").addEventListener("click", function() {

            context.drawImage(video, 0, 0, 640, 480);

        });

    }, false);

</script>

</body>

</html>

　　代码参考自 http://davidwalsh.name/demo/camera.php

使用getUserMedia 调用摄像头的更多相关文章

  1. 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能，不兼容IE

    <template>     <div>       <!--canvas截取流-->       <canvas ref="canvas" ...

  2. JavaScripts调用摄像头【MediaDevices.getUserMedia()】

    h5调用摄像头(允许自定义界面)[MediaDevices.getUserMedia()] <!DOCTYPE html> <html lang="en"> ...

  3. HTML之调用摄像头实现拍照和摄像功能

    应该有很多人知道,我们的手机里面有个功能是“抓拍入侵者”,说白了就是在解锁应用时如果我们输错了密码手机就会调用这一功能实现自动拍照. 其实在手机上还有很多我们常用的软件都有类似于这样的功能,比如微信扫 ...

  4. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

  5. html5调用摄像头实现拍照

    技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...

  6. [转]html5调用摄像头实例

    原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...

  7. 使用js调用摄像头拍照

    在一些浏览器里已经可以使用web api调用摄像头功能了. 基于此可以经行拍照摄像功能,网上找了些资料,然后实现了简单的拍照功能 演示地址 bingxl.cn/webrtc.html 代码 <! ...

  8. 摄像头调用,h5调用摄像头进行扫一扫插件备份

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

随机推荐

  1. POJ 2395 Out of Hay（MST）

    [题目链接]http://poj.org/problem?id=2395 [解题思路]找最小生成树中权值最大的那条边输出,模板过的,出现了几个问题,开的数据不够大导致运行错误,第一次用模板,理解得不够 ...

  2. Openstack之Swift架构（Cloud Storage）

    Swift是OpenStack的子项目之一,也称为对象储存,适用于储存永久类型的静态数据,例如:虚拟机镜像文件.图片.存档备份等 复制的三个副本如何联系在一起? 让我们用一些具体场景和介绍一些组件,来 ...

  3. 实体框架 (EF) 入门 => 五、连接和模型

    public class BloggingContext : DbContext  {  public BloggingContext()          : base("name=Blo ...

  4. CStdioFile

    CStdioFile类的声明保存再afx.h头文件中. CStdioFile类继承自CFile类,CStdioFile对象表示一个用运行时的函数fopen打开的c运行时的流式文件.流式文件是被缓冲的, ...

  5. C#POP3协议实现SSL验证登陆GMAIL

    最近在折腾POP3协议,登陆pop.qq.com和pop.163.com没有什么问题,于是就想着登陆pop.gmail.com,结果失败了.经查,发现gmail的pop3端口不是110,而是995.于 ...

  6. <!DOCTYPE> 标签的深度剖析以及使用选择

    前言: 今天被问道“有没有仔细了解过<!DOCTYPE>标签?”,愣了一下,因为一开始在W3cschool上看到过建议使用XHTML Transitional DTD,之后就很听话地把Dr ...

  7. INNO&&DELPHI

    好久不弄delphi了,再次见到inno,居然不知所措~ 让人亲切的 var,又见到了.而如今,到处可见. 整目录复制 Flags: igNoreversion recursesubdirs crea ...

  8. Hello OSGI --- Apache Felix

    Apache Felix Felix是一个OSGi版本4规范的Apache实现. OSGi是一个基于Java的服务平台规范,其目标是被需要长时间运行.动态更新.对运行环境破坏最小化的系统所使用.有许多 ...

  9. Flex4 DataGrid ItemRenderer内嵌方式

    Flex4 DataGrid ItemRenderer像Flex3一直内嵌ItemRenderer会报空对象引用的错误,如: <s:GridColumn dataField="titl ...

  10. 树链剖分||dfs序 各种题

    1.[bzoj4034][HAOI2015]T2 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把 ...