参考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. Chrome：插件安装

    1.首先要下载一油猴插件管理器 得到crx文件 2.打开'扩展程序',在Chrome右上角 3.启动开发者模式(右上角),然后将油猴crx文件拖入界面中,会自动安装油猴 安装完成后,在工具栏中会出现油 ...

  2. 前端好用API之getBoundingClientRect

    前情 在前端开发需求中,经常需要获取元素的尺寸位置相关的属性,以往的做法是调用不同api获取相关属性的. getBoundingClientRect介绍 getBoundingClientRect() ...

  3. 面试官：Redis中列表的内部实现方式是什么？

    在面试间里等候时,感觉这可真暖和呀,我那冰冷的出租屋还得盖两层被子才能睡着.正要把外套脱下来,我突然听到了门外的脚步声,随即门被打开,一位眉毛弯弯嘴唇红红的小姐姐走了进来,甜甜的香水味立刻钻进了我的鼻 ...

  4. php 23种设计模型 - 适配器模式

    适配器模式(Adapter) 适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁.这种类型的设计模式属于结构型模式,它结合了两个独立接口的功能. 这种模式涉及到一个单一的类, ...

  5. PhpStrom 好用的翻译插件

    最近php使用laravel框架的比较多,里面的注释都是英文的,有些同学的英语不是很好,不过不用但是侯蜀黍带你一个好用的翻译插件,告别烦恼一了百了 Translation 翻译插件 安装: 打开Fil ...

  6. 打靶笔记-01-vulnhub-moneybox

    打靶笔记-01-vulnhub-moneybox 本篇笔记根据苑老师视频进行学习记录 https://www.bilibili.com/video/BV1Lv411n7Lq/?spm_id_from= ...

  7. LGP7915题解

    奇怪的乱搞做法(? 首先我们枚举序列的每一个位置,从这个位置劈开,假设这个位置是 \(i\),那么按照题意模拟,我们能够构造一个最终序列有 \(i\) 个 L 和 \(n-i\) 个 R 的符合题意的 ...

  8. hive从入门到放弃(三)——DML数据操作

    上一篇给大家介绍了 hive 的 DDL 数据定义语言,这篇来介绍一下 DML 数据操作语言. 没看过的可以点击跳转阅读: hive从入门到放弃(一)--初识hive hive从入门到放弃(二)--D ...

  9. 关于linux命令的随笔第一篇

    大多数的情况下,我们都是通过ssh客户端远程连接服务器去进行维护访问,所以我们必须要掌握linux命令 linux命令大约有上百种,但是并非所有命令都属于常用命令,所以不需要死记硬背,多用多百度就可以 ...

  10. Haproxy之负载均衡功能、基于cookie的session持久、haproxy自带的健康页面及其动静分离的实现

    实验前提: 1.本次实验是在Centos 7.4(64bit)系统上完成的.2.实验前确保每台服务器时间同步3.本次实验有3台主机,其中haproxy作为反向代理地址为192.168.31.43,后面 ...