html5调用摄像头功能的实现代码


Posted in HTML / CSS onMay 07, 2018

前言

前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多问题。今天闲来无事,看了下自己的 todo,发现有这个调用摄像头的todo,才想到?。网上查了一下,果然 js 有调用摄像头的 api,为此自己写一个 demo ,避免忘记。

正文

调用摄像头

一共有两种实现方式,一种是使用navigator.getUserMedia(该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性),前面一种已经从 Web 标准中删除,仅为了向后兼容而存在,第二种是使用navigator.mediaDevices.getUserMedia(推荐使用),这两种方法 Safari 貌似都不支持。。。。

第一种方法navigator.getUserMedia用法详见mdn ,代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摄像头调用1</title>
</head>
<body>
    <video id="v"></video>
    <script>
        !(function () {
            function userMedia() {
                return navigator.getUserMedia = navigator.getUserMedia ||
                    navigator.webkitGetUserMedia ||
                    navigator.mozGetUserMedia ||
                    navigator.msGetUserMedia || null;
            }
            if (userMedia()) {
                var constraints = {
                    video: true,
                    audio: false
                };
                var media = navigator.getUserMedia(constraints, function (stream) {
                    var v = document.getElementById('v');
                    var url = window.URL || window.webkitURL;
                    v.src = url ? url.createObjectURL(stream) : stream;
                    v.play();
                }, function (error) {
                    console.log("ERROR");
                    console.log(error);
                });
            } else {
                console.log("不支持");
            }
        })();
    </script>
</body>
</html>

第二种方法navigator.mediaDevices.getUserMedia用法详见mdn。navigator.mediaDevices.getUserMedia 其实和第一种差不多,主要第二种返回是一个 Promise 对象,代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摄像头调用2</title>
</head>
<body>
    <video id="v"></video>
    <script>
        !(function () {
            // 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象
            if (navigator.mediaDevices === undefined) {
                navigator.mediaDevices = {};
            }
            if (navigator.mediaDevices.getUserMedia === undefined) {
                navigator.mediaDevices.getUserMedia = function (constraints) {
                    // 首先,如果有getUserMedia的话,就获得它
                    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                    // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                    if (!getUserMedia) {
                        return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                    }

                    // 否则,为老的navigator.getUserMedia方法包裹一个Promise
                    return new Promise(function (resolve, reject) {
                        getUserMedia.call(navigator, constraints, resolve, reject);
                    });
                }
            }
            const constraints = {
                video: true,
                audio: false
            };
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(stream => {
                let v = document.getElementById('v');
                // 旧的浏览器可能没有srcObject
                if ("srcObject" in v) {
                    v.srcObject = stream;
                } else {
                    // 防止再新的浏览器里使用它,应为它已经不再支持了
                    v.src = window.URL.createObjectURL(stream);
                }
                v.onloadedmetadata = function (e) {
                    v.play();
                };
            }).catch(err => {
                console.error(err.name + ": " + err.message);
            })
        })();
    </script>
</body>
</html>

拍照

思路是设置一个标志变量 videoPlaying 看看是否 video 有在 play,监听拍照按钮的点击事件,如果videoPlaying 为 true ,使用一个canvas 获取 video 的宽高(默认 canvas 是不显示的),然后使用 canvas 的drawImage,然后使用 canvas 的 toDataURL返回一个 data url,将这个 url,设置在一个 img 标签上即可?

第一种方法navigator.getUserMedia实现代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拍照1</title>
</head>
<body>
    <button id="take">拍照</button>
    <br />
    <video id="v" style="width: 640px;height: 480px;"></video>
    <canvas id="canvas" style="display:none;"></canvas>
    <br />
    <img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo">
    <script>
        !(function () {
            function userMedia() {
                return navigator.getUserMedia = navigator.getUserMedia ||
                    navigator.webkitGetUserMedia ||
                    navigator.mozGetUserMedia ||
                    navigator.msGetUserMedia || null;
            }
            if (userMedia()) {
                let videoPlaying = false;
                let constraints = {
                    video: true,
                    audio: false
                };
                let video = document.getElementById('v');
                let media = navigator.getUserMedia(constraints, function (stream) {
                    let url = window.URL || window.webkitURL;
                    video.src = url ? url.createObjectURL(stream) : stream;
                    video.play();
                    videoPlaying = true;
                }, function (error) {
                    console.log("ERROR");
                    console.log(error);
                });
                document.getElementById('take').addEventListener('click', function () {
                    if (videoPlaying) {
                        let canvas = document.getElementById('canvas');
                        canvas.width = video.videoWidth;
                        canvas.height = video.videoHeight;
                        canvas.getContext('2d').drawImage(video, 0, 0);
                        let data = canvas.toDataURL('image/webp');
                        document.getElementById('photo').setAttribute('src', data);
                    }
                }, false);
            } else {
                console.log("不支持");
            }
        })();
    </script>
</body>
</html>

第二种navigator.mediaDevices.getUserMedia实现方法:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拍照2</title>
</head>

<body>
    <button id="take">拍照</button>
    <br />
    <video id="v" style="width: 640px;height: 480px;"></video>
    <canvas id="canvas" style="display:none;"></canvas>
    <br />
    <img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo">
    <script>
        !(function () {
            // 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象
            if (navigator.mediaDevices === undefined) {
                navigator.mediaDevices = {};
            }
            if (navigator.mediaDevices.getUserMedia === undefined) {
                navigator.mediaDevices.getUserMedia = function (constraints) {
                    // 首先,如果有getUserMedia的话,就获得它
                    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                    // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                    if (!getUserMedia) {
                        return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                    }

                    // 否则,为老的navigator.getUserMedia方法包裹一个Promise
                    return new Promise(function (resolve, reject) {
                        getUserMedia.call(navigator, constraints, resolve, reject);
                    });
                }
            }
            const constraints = {
                video: true,
                audio: false
            };
            let videoPlaying = false;
            let v = document.getElementById('v');
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(stream => {
                // 旧的浏览器可能没有srcObject
                if ("srcObject" in v) {
                    v.srcObject = stream;
                } else {
                    // 防止再新的浏览器里使用它,应为它已经不再支持了
                    v.src = window.URL.createObjectURL(stream);
                }
                v.onloadedmetadata = function (e) {
                    v.play();
                    videoPlaying = true;
                };
            }).catch(err => {
                console.error(err.name + ": " + err.message);
            })
            document.getElementById('take').addEventListener('click', function () {
                if (videoPlaying) {
                    let canvas = document.getElementById('canvas');
                    canvas.width = v.videoWidth;
                    canvas.height = v.videoHeight;
                    canvas.getContext('2d').drawImage(v, 0, 0);
                    let data = canvas.toDataURL('image/webp');
                    document.getElementById('photo').setAttribute('src', data);
                }
            }, false);
        })();
    </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 #HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 #HTML / CSS
HTML5 device access 设备访问详解
May 24 #HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 #HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 #HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 #HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 #HTML / CSS
You might like
mysql5详细安装教程
2007/01/15 PHP
快速配置PHPMyAdmin方法
2008/06/05 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
10款实用的PHP开源工具
2015/10/23 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
Python统计单词出现的次数
2018/04/04 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
python打开文件的方式有哪些
2020/06/29 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
Java基础知识面试要点
2016/07/29 面试题
直接有效的自我评价
2014/01/11 职场文书
计划生育个人总结
2015/03/02 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
关于做家务的心得体会
2016/01/23 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers