欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-01 14:39:16
这篇文章主要介绍了html5调用摄像头功能的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ... 18-05-07...

前言

前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 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用法详见mdnnavigator.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>

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