H5利用JS调用摄像头实现拍照效果（记录）

桃扇骨 2021-12-16 00:43 341阅读 0赞

今天学习了调用电脑摄像头，利用canvas画布将视频当前帧转换成图片的实例，其中用到了 mediaDevices.getUserMedia 方法。该方法提示用户允许使用媒体输入，产生包含所请求类型的媒体轨道。包括视频轨道（由诸如照相机，视频记录设备，屏幕共享服务等的硬件或虚拟视频源产生），音频轨道（类似地，由物理或虚拟音频源，如麦克风，A / D转换器等），以及其他可能的轨道类型。

它返回一个 Promise 解析为一个 MediaStream 对象。用户如果拒绝许可，或者匹配媒体不可用，则请求会被拒绝，抛出 PermissionDeniedError 或 NotFoundError 错误。详情请戳 链接 。

注意：该方法只适用于本地和 https 请求，http 会提示没有权限，报 PermissionDeniedError 错误。

## html代码 ##

<div id="camera">
        <div id="contentHolder">
            <video id="video" width="300" height="300" autoplay></video>
            <canvas style="display:none;" id="canvas" width="300" height="300"></canvas>
        </div>
        <div id="btn_snap">拍照</div>
    </div>

## js代码 ##

<script>
        var canvas = document.getElementById("canvas"),
            pzBtn = document.getElementById("btn_snap"),
            context = canvas.getContext("2d"),
            video = document.getElementById("video");
        alert('该页面会调用您的摄像头')
        // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
        // 使用getUserMedia，因为它会覆盖现有的属性。
        // 这里，如果缺少getUserMedia属性，就添加它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                // 首先获取现存的getUserMedia(如果存在)
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
                // 有些浏览器不支持，会返回错误信息
                // 保持接口一致
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }
                //否则，使用Promise将调用包装到旧的navigator.getUserMedia
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
        var constraints = { audio: false, video: {width: 720,height:720} }
        navigator.mediaDevices.getUserMedia(constraints)
            .then(function (stream) {
                var video = document.querySelector('video');
                // 旧的浏览器可能没有srcObject
                if ("srcObject" in video) {
                    video.srcObject = stream;
                } else {
                    //避免在新的浏览器中使用它，因为它正在被弃用。
                    video.src = window.URL.createObjectURL(stream);
                }
                video.onloadedmetadata = function (e) {
                    video.play();
                };
            })
            .catch(function (err) {
                console.log(err.name + ": " + err.message);
            });
    
    
    
        pzBtn.addEventListener("click", function () {
            // 点击，canvas画图
            context.drawImage(video, 0, 0, 300, 300);
            // 获取图片base64链接
            var image = canvas.toDataURL('image/png');
            // 定义一个img
            var img = new Image();
            //设置属性和src
            img.id = "imgBoxxx";
            img.src = image;
            //将图片添加到页面中
            document.body.appendChild(img);
    
            // base64转文件
            function dataURLtoFile(dataurl, filename) {
                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], filename, {type: mime});
            }
            console.log(dataURLtoFile(image, 'aa.png'));
        });
    </script>

## css代码 ##

<style>
        #camera{
            float: left;
            margin: 20px;
        }
        #contentHolder{
            width: 300px;
            height: 300px;
            margin-bottom: 10px;
        }
        #btn_snap{
            margin: 0 auto;
            border: 1px solid #f0f0f0;
            background: #5CACEE;
            color: #FFF;
            width: 100px;
            height: 36px;
            line-height: 36px;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            cursor: pointer;
            /*禁止选择*/
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Chrome/Safari/Opera */
            -khtml-user-select: none; /* Konqueror */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently not supported by any browser */
        }
        #imgBoxxx{
            width: 200px;
            margin: 60px 20px 20px;
        }
    </style>

点击——>[原网址][Link 1]

[Link 1]: https://www.w3h5.com/post/180.html

发表评论取消回复

表情：

评论列表（有 0 条评论，341人围观）

还没有评论，来说两句吧...

相关阅读

相关 WPF实现拍照截图功能(WPFMediaKit 调用摄像头和拍照)

*1.下载WPFMediaKit包** ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_...

本是古典何须时尚/ 2024年04月18日 16:42/ 0 赞/ 36 阅读

相关 Vue 调用PC摄像头拍照

项目需求：可以本地上传头像，也可以选择拍摄头像上传。组件： 1. Camera组件：实现打开、关闭摄像头、绘制、显示图片、用于上传 2. CameraDia...

迈不过友情╰/ 2024年04月18日 14:09/ 0 赞/ 29 阅读

相关 Unity | 如何调用摄像头拍照

我只用了PC端，其他平台我没试过哈~ 一、摄像头进入unity的过程 1.常见的输入内容常见的输入内容：声音、图片（影像就是一连串图片不停的放，所以摄像头发给电

「爱情、让人受尽委屈。」/ 2023年09月24日 17:11/ 0 赞/ 32 阅读

相关 H5调用手机的摄像头拍照上传以及手机相册选取照片

H5调用手机的摄像头拍照上传以及手机相册选取照片语法： <input accept="audio/|video/|image/|MIME_type"> 提示：如

系统管理员/ 2022年09月25日 12:19/ 0 赞/ 266 阅读

相关用html5和javascript调用摄像头实现拍照功能

在机缘巧合之下，了解到用HTML5和javascript调用摄像头来实现拍照功能，今天就把大致原理写下来。页面布局很简单，就是一个input标签，两个HTML5元素video、

青旅半醒/ 2022年05月23日 10:24/ 0 赞/ 426 阅读

相关 js调用本地摄像头拍照截图，提交后台

今天有个需求，需要在前端界面调用本地摄像头，然后拍照结束后可以截取预览，最后将结果提交到后台。查了网上很多的插件，发现适合的非常少，于是决定自己修改一个。这里我修改了一个j

古城微笑少年丶/ 2022年05月15日 07:53/ 0 赞/ 407 阅读

相关 H5实现调用本地摄像头实现实时视频以及拍照功能

getUserMedia API HTML 5 的getUserMedia API提供了访问媒体的能力, 基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等

怼烎@/ 2022年05月14日 23:43/ 0 赞/ 694 阅读

相关 Java调用电脑摄像头拍照实现例子

运用的是开源项目webcam-capture实现的；基本的示例比较齐全，上手快。 webcam-capture项目地址： [https://github.com/s

旧城等待，/ 2022年03月30日 13:52/ 0 赞/ 1100 阅读

相关利用HTML5 API接口实现调用摄像头拍照功能

想着研究下HTML5实现调用摄像头的一些方法。看了一下html5文档，主要是使用html5的getUserMedia()API，写一个例子来记录具体的使用方法。 <h

小咪咪/ 2022年01月29日 08:27/ 0 赞/ 580 阅读

相关 H5利用JS调用摄像头实现拍照效果（记录）

今天学习了调用电脑摄像头，利用canvas画布将视频当前帧转换成图片的实例，其中用到了 mediaDevices.getUserMedia 方法。该方法提示用户允许使用媒体输入

桃扇骨/ 2021年12月16日 00:43/ 0 赞/ 342 阅读