参考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. omnet++：官方文档翻译总结（四）

    学习翻译自:Adding Statistics Collection - OMNeT++ Technical Articles Part 5 - Adding Statistics Collectio ...

  2. 解决 Page 'http://localhost:63342/v3/js/math/math.map' requested without authorization页面未授权问题

    用webstorm调试页面时,老是弹出对话框说页面未授权,如下图: 解决方法尝试了两种都有效,感觉第一种是正解通用,第二种大家也可以了解一下作为参考 第一种: File--Settings如下图 第二 ...

  3. JAVA ArrayList集合底层源码分析

    目录 ArrayList集合 一.ArrayList的注意事项 二. ArrayList 的底层操作机制源码分析(重点,难点.) 1.JDK8.0 2.JDK11.0 ArrayList集合 一.Ar ...

  4. JZ-006-旋转数组的最小数字

    旋转数组的最小数字 题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. NOTE:给出的所有元素都大于0,若数组 ...

  5. SQL Server的Linked Servers（链接）

    我们在使用SQL Server时,有时会有这种需求,需要从一个SQL Server服务器A中,查询另一个SQL Server服务器B中的表,然后将SQL Server服务器A中的表和SQL Serve ...

  6. 翻译 | 解读首部 Kubernetes 纪录片

    引言 Honeypot.io 自诩为欧洲最大的技术人才招聘平台,同时提供开发者视频网站,又被称其为 "开发者的 Netflix".2022 年 1 月,该公司与 Red Hat.G ...

  7. MATLAB菜鸟入门笔记【编程习惯】

    1.编程标记模板   %  Script file:temp_conversion.m % %  Purepose: %  To convert an input temperature from d ...

  8. 构造方法__construct()与析构方法__destruct() 构造方法：刚出生时婴儿的啼哭 析构方法：老人临终时的遗言

    <?phpclass person{ var $name; var $sex; var $age;//构造方法 function __construct($name, $sex, $age) { ...

  9. think php 多条件检索+自带分页+多条件搜索标红分页

    //视图<form action="/homework/homework/index" method="get"> <input type=& ...

  10. 拉格朗日插值法--python

    数据插补 常见插补方法 插值法--拉格朗日插值法 根据数学知识可知,对于平面上已知的n个点(无两点在一条直线上可以找到n-1次多项式 ,使次多项式曲线过这n个点. 1)求已知过n个点的n-1次多项式: ...