参考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. AcWing 289. 环路运输

    传送门 思路: 一个环路上的问题,考虑拆环为链然后复制一倍接在后面.那么对于Ai与Aj,不妨设j<i,如果i-j>N/2则两者距离在新的链上就是i-j,而如果i-j<=N/2那么两者 ...

  2. Hive表数据同步到es

    1.首先服务器节点,进入到对应的数据库.2. 然后找到要同步的表,show create table + 表名查看一下或者自己可以新建一个表,用来测试原表,如下 CREATE TABLE `wb_tm ...

  3. 【实测】Python 和 C++ 下字符串查找的速度对比

    完整格式链接:https://blog.imakiseki.cf/2022/03/07/techdev/python-cpp-string-find-perf-test/ 背景 最近在备战一场算法竞赛 ...

  4. JZ-005-用两个栈实现队列

    用两个栈实现队列 题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 题目链接: 用两个栈实现队列 代码 import java.util.Stack; / ...

  5. 25 面向对象编程 继承概念 代码 快捷键 super注意点

    继承概念 继承的本质是对某一批的抽象,从而实现对现实世界更美好的建模. extends的意思的"扩展".子类是父类的扩展. JAVA中类只有单继承,没有多继承!理解:一个儿子只能有 ...

  6. 手写 Vue2 系列 之 patch —— diff

    前言 上一篇文章 手写 Vue2 系列 之 初始渲染 中完成了原始标签.自定义组件.插槽的的初始渲染,当然其中也涉及到 v-bind.v-model.v-on 指令的原理.完成首次渲染之后,接下来就该 ...

  7. 通信原理：基于MATLAB的AM调幅分析

    目的: 通过matlab仿真AM调制,通过图像分析来更好的了解AM调制的过程 1.为什么基带信号要加上一个直流分量. 2.所加直流分量为什么要大于基带信号的最大值. 3.时域中调制信号与载波和基带信号 ...

  8. 给Windows系统免疫不再受恶意代码骚扰

    所谓恶意代码,是指网页中使用了利用WSH漏洞来修改系统的一段代码(但是由于它并不具备传染性和自我复制这两个病毒的基本特征,因此不能称作病毒).WSH是"Windows Scripting H ...

  9. Spring MVC 实验3 springMVC框架基础

    实验三:spring mvc框架基础 实验目的: (1)理解spring mvc框架的运行流程 . (2)掌握springmvc框架的配置 实验要求: 请根据课程内容,  修改项目中的任意一用例,将控 ...

  10. ssh-ssl编译安装

    升级前准备 #下载所需依赖包#yum install -y gcc gcc-c++ glibc make autoconf openssl openssl-devel pcre-devel pam-d ...