参考HTML5Rocks的这篇文章实现的一个简单的例子。

思路如下：

1. 把冰箱门打开

2. 把大象放进冰箱里

3. 把冰箱门关上

好了不开玩笑了，其实思路是：

1. 通过getUserMedia调用设备的摄像头（电脑、手机都可以，取决于浏览器对这个API的支持情况），并将资源放入video标签。

2. 将video内的视频资源通过canvas的drawImage API放入canvas里，这个canvas是不显示的。

3. 将canvas的内容转换成base64编码的webp格式的图像（如果浏览器不支持这个格式，会fallback到png格式）放入img里，于是你就能看到你拍的照片了。

不废话了，上代码：

HTML

<!doctype html>

<html>

<head>

    <title>html5 capture test</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <video autoplay></video>

    <img src="">

    <canvas style="display: none;"></canvas>

    <button id="capture">snapshot</button>

    <script src="index.js"></script>

</body>

</html>

JS

var video = document.querySelector('video');

var canvas = document.querySelector('canvas');

var ctx = canvas.getContext('2d');

var localMediaStream = null;

var snapshot = function () {

    if (localMediaStream) {

        ctx.drawImage(video, 0, 0);

        document.querySelector('img').src = canvas.toDataURL('image/webp');

    }

};

var sizeCanvas = function () {

    setTimeout(function () {

        canvas.width = video.videoWidth;

        canvas.height = video.videoHeight;

        img.width = video.videoWidth;

        img.height = video.videoHeight;

    }, 100);

};

var btnCapture = document.getElementById('capture');

btnCapture.addEventListener('click', snapshot, false);

navigator.webkitGetUserMedia(

    {video: true},

    function (stream) {

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

        localMediaStream = stream;

        sizeCanvas();

    },

    function () {

        alert('your browser does not support getUserMedia');

    }

);

几个注意事项：

  • 不同浏览器对getUserMedia的支持情况不同，需要加上前缀，比如webkitGetUserMedia、mozGetUserMedia、msGetUserMedia，如果你想屏蔽这一问题的话，可以这样做：
// cross platforms

var myGetUserMedia = navigator.getUserMedia ||

                 navigator.webkitGetUserMedia ||

                 navigator.mozGetUserMedia ||

                 navigator.msGetUserMedia;
  • Chrome对file:///做了很多的限制，跨域就不说了，geolocation也不能在本地下使用，这个getUserMedia也是。
  • 这个sizeCanvas函数做的事情就是保证你拍到的照片的大小和摄像头拍到的大小是一样的，否则会出现拍到的照片只有摄像头录到的一部分画面的情况。

本文转载于猿2048:通过HTML5的getUserMedia实现拍照功能

通过HTML5的getUserMedia实现拍照功能的更多相关文章

  1. HTML5调用摄像头实现拍照功能（兼容各大主流浏览器）

    本人亲測,兼容各大主流浏览器,HTML5太强大了,须要的留下邮箱哦 假设想要立即收到,则可到我的资源下载 http://download.csdn.net/detail/laijieyao/81699 ...

  2. getUserMedia API及HTML5 调用手机摄像头拍照

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  3. HTML5 使用FileReader实现调用相册、拍照功能

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...

  4. HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）

    上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...

  5. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

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

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

  7. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

  8. UWP开发之Template10实践二：拍照功能你合理使用了吗？（TempState临时目录问题）

    最近在忙Asp.Net MVC开发一直没空更新UWP这块,不过有时间的话还是需要将自己的经验和大家分享下,以求共同进步. 在上章[UWP开发之Template10实践:本地文件与照相机文件操作的MVV ...

  9. 文件件监听器，android系统拍照功能调用后删除系统生成的照片

    先说说要实现的功能: android调用系统拍照功能实时 预览 删除 上传 保存 (用户不能再本地文件夹中看到拍的照片) 再说说遇到的问题: 1.调用系统拍照在系统自带的拍照文件夹中生成一张随机命名图 ...

随机推荐

  1. python os.system 和popen

    1.python  os.system 和popen  其中第一个只会返回0或者1,另外一个会返回执行结果 每天生成一个文件,并把磁盘的使用情况写到到这个文件中,文件名为日期格式(yyyy-mm-dd ...

  2. SQL实现一年中每个日期剔除节假日和星期天之后的五个日期是多少

    最近公司OA系统的需求,实现一年中每个日期剔除节假日和星期天之后的五个日期是几号,每个日期都要跳过节假日和星期天,当时是真的慌了,郁闷了一天,后来半夜忽然来灵感,想想还是可以实现. 需要做一张节假日的 ...

  3. VS Code远程链接报错Could not establish connection to “hz.matpool.com”

    VS Code远程链接报错Could not establish connection to "hz-t2.matpool.com" 输出的部分内容 安装Git git for w ...

  4. laravel7 百度智能云检测图片是否合规

    APP 文件下建一个Libs目录建一个BaiduService文件,需要检测引入进行调用即可 BaiduService文件内容如下 <?php namespace App\Libs; use A ...

  5. HBase海量数据高效入仓解决方案

    一.方案背景 现阶段部分业务数据存储在HBase中,这部分数据体量较大,达到数十亿.大数据需要增量同步这部分业务数据到数据仓库中,进行离线分析,目前主要的同步方式是通过HBase的hive映射表来实现 ...

  6. EXSI6.7 中给虚拟机磁盘扩容

    [admin@localhost ~]$ sudo fdisk -l Disk /dev/sda: 214.7 GB, 214748364800 bytes, 419430400 sectors Un ...

  7. LGCF235B题解

    简单期望/fad 题意明确,不说了. 对于高次期望,一个套路的方法是维护低次期望(?) 考虑 dp,设 \(dp1[i]\) 为前 \(i\) 次点击中 所有连续的 \(O\) 的长度之和,\(dp2 ...

  8. spring——依赖注入的三种方式

    1 构造器注入(与构造器有直接关系) 默认无参构造 3种构造方式:通过<contructor-arg>调用类中的构造器 下标 <bean id="userService&q ...

  9. 前端知识之JavaScript知识

    前端之javaScript JavaScript html :展示文档内容的 css:控制文档的显示效果 js:控制文档的交互效果 是脚本语言 一种轻量级的编程语言 可插入html页面的编程代码 js ...

  10. centOS 7 离线安装 MySQL 5.6 完美安装

    centOS 7 离线安装 MySQL 5.6 centOS 7 离线安装 MySQL 5.6 准备环境 1.离线 centOS 7(此处为 centOS 7 最小安装) 2.nginx 安装文件 ( ...