参考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. Java课程设计---学生信息管理系统需求分析及总体设计

    按照软件工程实践的原则,开发大型程序需要经历需求分析.总体设计.详细设计.编码实现.系统测试.系统维护等几个阶段. 1.需求分析 本阶段是整个软件开发过程中最重要的环节.通过了解实际运行的系统或与用户 ...

  2. 浏览器无插件播放rtsp流解决方案

    1. 安装 FFmpeg 参考 CentOS下安装FFmpeg,特别详细. 我遇到的错误和解决办法: 缺少lame ffmpeg+libmp3lame库源码安装教程(CentOS) make ffmp ...

  3. c语言刷 队列题记录

    622. 设计循环队列 https://blog.csdn.net/Galaxy_n/article/details/115978544 typedef struct { int *arrs; int ...

  4. MongoDB创建普通账户与admin账户的配置方法

    MongoDB数据库设置账户及权限的方法 1.如果MongoDB服务正在运行的情况下,需先停止该服务 在cmd(命令提示符)下输入net stop MongoDB,按下enter(回车键) 运行结果: ...

  5. 《MySQL实战45讲》个人笔记-基础篇

    拜读了林晓斌大佬的<MySQL实战45讲>,特意做个知识点总结,以便后期回忆. 01.基础架构:一条SQL查询语句是如何执行的? Server 层包括连接器.查询缓存.分析器.优化器.执行 ...

  6. B站（bilibili） 等级升级脚本-云函数版

    前言 云函数运行会莫名其妙的报错(我也不知道为什么,我这边测试有时候报错,有时候不会),并非代码有错,建议在本地运行. 由于之前写的代码有些bug,后面又又又又又又又更新了. 最后更新于2022-1- ...

  7. 微信小程序断网处理

    wx.onNetworkStatusChange(function callback) 参数 function callback 网络状态变化事件的回调函数 参数 Object res 属性 类型 说 ...

  8. 如何在 MWeb 中配置 Hexo 等静态网站

    原文链接 参考链接: https://zh.mweb.im/mweb-1.4-add-floder-octpress-support.html https://zhuanlan.zhihu.com/p ...

  9. CF492E题解

    屑题. 考虑对于每一个 \((x,y)\),将其与 \(((x+dx) \mod n,(y+dy) \mod n)\) 连边. 答案就是连通块中权值最大的那个. 考虑对于 \((x_1,y_1)\) ...

  10. SpringBoot 集成 knife4j (Swagger2)

    SpringBoot 集成 knife4j (Swagger2) 前提 :本文 spring boot版本为 2.6.1 ,knife4j 版本为:3.0.3 1.初始化项目,导入pom依赖 < ...