js调用本地摄像头demo

亦凉 2023-01-18 11:26 215阅读 0赞

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JveXdjeA_size_16_color_FFFFFF_t_70][]

html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TEST DEMO</title>
    </head>
    <body>
    <div id="main" style="margin-left:10px;overflow-y:scroll;">
        <div>
            <div>
                <div>
                    <video style="width:250px;height:250px;border:5px solid black;"></video>
                    <img id="picture" style="width:250px;height:250px;border:5px solid black;">
                    <canvas id="canvas" style="display: none;width:250px;height:250px"></canvas>
                    <button onclick="cameraForm.save()">拍摄</button>
                    <button onclick="cameraForm.close()">关闭摄像头</button>
                    <button onclick="cameraForm.open()">开启摄像头</button>
                </div>
            </div>
        </div>
    </div>
    </body>
    <script src="/jquery.js"></script>
    <script src="/cameraForm.js"></script>
    </html>

js

let cameraForm = {
        video: null,
        base64Img: "",
        open: function () {
            // 视频大小
            let constraints = {audio: false, video: {width: 250, height: 250}};
            // 开启视频
            navigator.mediaDevices.getUserMedia(constraints).then(function (mediaStream) {
                cameraForm.video = document.querySelector('video');
                cameraForm.video.srcObject = mediaStream;
                cameraForm.video.onloadedmetadata = function (e) {
                    cameraForm.video.play();
                };
            }).catch(function (err) {
                console.log(err.name + ": " + err.message);
                alert("摄像头打开失败")
            });
        },
        close: function () {
            //关闭摄像头
            cameraForm.video.srcObject.getTracks()[0].stop();
        },
        save: function () {
            // 使用canvas进行拍照
            let canvas = document.getElementById('canvas');
            let ctx = canvas.getContext('2d');
            ctx.drawImage(cameraForm.video, 0,0,250, 250);
            cameraForm.base64Img = canvas.toDataURL("image/png");
            document.getElementById('picture').src = cameraForm.base64Img;
        }
    };
    $(function () {
        cameraForm.open();
    
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JveXdjeA_size_16_color_FFFFFF_t_70]: /images/20221021/e316caa1e5e54b89b1282f2bbccae0fe.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Http请求:Google调用本地摄像头权限开启

项目场景：最近在做一个考试培训系统！里面用到了监控摄像需要调用本地摄像头 -------------------- 解决方案：打开谷歌浏览器，输入[chro

朱雀/ 2023年09月28日 14:59/ 0 赞/ 10 阅读

相关 js调用本地摄像头demo

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2J

亦凉/ 2023年01月18日 11:26/ 0 赞/ 216 阅读

相关【谷歌】浏览器js打开本地摄像头

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dla

秒速五厘米/ 2022年10月09日 03:10/ 0 赞/ 280 阅读

相关 vue调用摄像头

[https://blog.csdn.net/weixin\_42120669/article/details/120075590?spm=1001.2014.3001.55

叁歲伎倆/ 2022年09月09日 13:52/ 0 赞/ 298 阅读

相关 OpenCV 调用摄像头

OpenCV调用摄像头还是很简单的，同样是由VideoCapture 来控制，一种是VideoCapture(const string& filename)用来打开视频文件，一

谁践踏了优雅/ 2022年07月11日 08:21/ 0 赞/ 279 阅读

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

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

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

相关 Html5调用本地摄像头

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

野性酷女/ 2022年04月15日 02:58/ 0 赞/ 331 阅读

相关 Android实现调用摄像头,选择本地照片的功能

首先我们看布局代码的文件： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:androi

末蓝、/ 2022年04月06日 08:18/ 0 赞/ 291 阅读

相关使用JS调用手机摄像头和相册

Html <h2 class="title-detail">图片描述</h2> <input type="hidden" id="picIndex" va

雨点打透心脏的1/2处/ 2022年03月17日 15:14/ 0 赞/ 1040 阅读

相关 js调用摄像头

js调用摄像头废话不多说,直接上代码。 <template> <div> <el-button type="primary" @cl

痛定思痛。/ 2021年09月07日 12:36/ 0 赞/ 539 阅读