HTML5拍照和摄像机功能实战详解


Posted in HTML / CSS onJanuary 24, 2019

开篇

最近在做一个chrome app的云相机应用,应用包括拍照、摄像、保存照片视频、上传文件等等核心功能,其中涉及到很多HTML5对媒体流相关的API。写这篇文章的目的,其一是总结梳理知识点,最重要是希望对有相关需求的读者提供一些指导。

注:本篇文章以实战为准,理论知识不做过多介绍。

拍照

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

浏览器兼容性如下:

HTML5拍照和摄像机功能实战详解

从上图可以看到,主流浏览器Firefox、Chrome、Safari、Opera等等已经全面支持。

1、获取视频流,并用video标签播放。

<video id="video" autoplay></video>
    
    --------------------------------------------------------------
    
    const videoConstraints = { width: 1366, height: 768 };
    const videoNode = document.querySelector('#video');
    let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
    videoNode.srcObject = stream;
    videoNode.play();

2、多个摄像头设备,如何切换?

// enumerateDevices获取所有媒体设备
    const mediaDevices = await navigator.mediaDevices.enumerateDevices();
    // 通过设备实例king属性videoinput,过滤获取摄像头设备
    const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput') || [];
    // 获取前置摄像头
    const videoDeviceId = videoDevices[0].deviceId;
    const videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 };
    let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
    // 获取后置摄像头
    const videoDeviceId = videoDevices[1].deviceId;
    const videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 };
    let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
    
    // 依次类推...

3、拍照保存图片

// 通过canvas捕捉video流,生成base64格式图片
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = 1366;
    canvas.height = 768;
    context.drawImage(videoNode, 0, 0, canvas.width, canvas.height);
    download(canvas.toDataURL('image/jpeg'));
    // 下载图片
    function download (src) {
        if (!src) return;
        const a = document.createElement('a');
        a.setAttribute('download', new Date());
        a.href = src;
        a.click();
    }

4、关闭摄像头设备

let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
    // 3s后关闭摄像头
    setTimeout(function () {
        stream.getTracks().forEach(track => track.stop());
        stream = null;
    }, 3000);

到此完成简单的相机拍照功能

摄像

摄像基本流程,是录制一段视频流并保存为音视频文件。HTML5 MediaRecorder对象提供了多媒体录音和录视频功能。

浏览器兼容性如下:

HTML5拍照和摄像机功能实战详解

从上图所示,浏览器对MediaRecorder兼容性远不如getUserMedia,目前只有Chrome、Firefox对MediaRecorder支持较好。

==注意:摄像预览播放器video标签要设置静音muted(消除回声导致的刺耳噪音)==

const videoConstraints = { width: 1366, height: 768 };
    let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
    let mediaRecorder = new MediaRecorder(stream);
    let mediaRecorderChunks = []; // 记录数据流
   
    mediaRecorder.ondataavailable = (e) => {
        mediaRecorderChunks.push(e.data);
    };
    
    mediaRecorder.onstop = (e) => {
        // 通过Blob对象,创建文件二进制数据实例。
        let recorderFile = new Blob(mediaRecorderChunks, { 'type' : mediaRecorder.mimeType });
        mediaRecorderChunks = [];
        const file = new File([this.recorderFile], (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
            type: 'video/mp4'
        });
        download(URL.createObjectURL(file));
        // 下载视频
        function download (src) {
            if (!src) return;
            const a = document.createElement('a');
            a.setAttribute('download', new Date());
            a.href = src;
            a.click();
        }
    };
    
    mediaRecorder.stop(); // 停止录制,触发onstop事件

总结

通过以上实战,相信读者已经掌握基础相机功能,拍照、摄像、保存文件等。由于应用项目非个人项目,源码不公开,有兴趣的朋友,不妨动手一试。

HTML / CSS 相关文章推荐
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 #HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 #HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 #HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 #HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 #HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 #HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 #HTML / CSS
You might like
php获取访问者IP地址汇总
2015/04/24 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
javascript操作数组详解
2014/12/17 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
python版本的读写锁操作方法
2016/04/25 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
keras 权重保存和权重载入方式
2020/05/21 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
餐厅总经理岗位职责
2013/12/31 职场文书
打架检讨书100字
2014/01/08 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
怎么用Python识别手势数字
2021/06/07 Python
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
table不让td文字溢出操作方法
2022/12/24 HTML / CSS