h5 调用摄像头（基于navigator对象 目前只支持chrome，fireFox）

js 调用摄像头

项目遇到调用摄像头，空闲时间梳理一番，记录下来。如果能帮到你，就点个赞吧，哈哈o(￣▽￣)o

一、效果

二、源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>JS拍照加水印，切换摄像头</title>
</head>
<style type="text/css">
    video,
    canvas {
        border: 1px solid #ccc;
    }
</style>

<body>
    <div id="snap-box">
        <div id="snap-body" style="display: flex; align-items: center; justify-content: center; padding: 10px 0;"></div>
        <div id="snap-btn" style="display: flex; align-items: center; justify-content: center; padding: 10px 0;"></div>
    </div>
</body>
<!-- <script src="./test.js"></script> -->
<script>


    let snapBox = document.querySelector("#snap-box > #snap-btn");
    let changeBtn = document.createElement("button");
    let snapBtn = document.createElement("button");
    if (!!snapBox) {
        // changeBtn
        changeBtn.innerText = "切换摄像头";
        changeBtn.onclick = function () {
            camera.changeConstraints();
        }
        //snapBox
        snapBtn.innerText = "拍张照片呗";
        snapBox.append(changeBtn);
        snapBox.append(snapBtn);
    }

    let snapBody = document.querySelector("#snap-box > #snap-body");
    let video = document.createElement("video");
    let source = document.createElement("source");
    let canvas = document.createElement("canvas");

    if (!!snapBody) {
        // video
        video.autoplay = "true";
        video.width = "320";
        video.height = "240";
        // source
        source.type = "video/mp4";
        // canvas
        canvas.width = "320";
        canvas.height = "240";
        snapBody.append(video);
        snapBody.append(canvas);
    }

    let camera = {
        video: video,
        source: source,
        canvas: canvas,
        btn: snapBtn,
        font: "14px",
        style: "rgba(255,255,255,0.9)",
        text: "测试水印",
        height: 240,
        width: 320,
        constraints: { video: true },
        // {video: { facingMode: { exact: "environment" } }},
        changeConstraints: function () {
            if (this.constraints) {
                if (true == this.constraints.video) {
                    this.constraints.video = { facingMode: { exact: "environment" } };
                } else {
                    this.constraints.video = true;
                }
                this.stop();
                this.init();
            } else {
                alert("切换摄像头失败")
            }
        },
        draw_pic: function () {
            let self = this;
            let context = self.canvas.getContext('2d');
            context.drawImage(self.video, 0, 0, self.width, self.height);
            context.font = self.font;
            context.fillStyle = self.style;
            context.fillText(self.text, 10, self.height - 10);
        },
        bind: function () {
            let self = this;
            self.btn.addEventListener("click", function () {
                self.draw_pic();
            });
        },
        init: function () {
            if (!snapBox || !snapBody) {
                return
            }
            let video = this.video;
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                console.log(this.constraints);
                navigator.mediaDevices.getUserMedia(this.constraints).then(function (stream) {
                    try {
                        video.srcObject = stream;
                        // source.srcObject = stream;
                    } catch (error) {
                        video.src = window.URL.createObjectURL(stream);
                        // source.src = window.URL.createObjectURL(stream);
                    }
                    video.play();
                }).catch((a) => {
                    console.log(a);
                    this.changeConstraints();
                })
            }
            this.bind();
        },
        stop: function () {
            let video = this.video;
            video.pause();
            if (!video.srcObject) return
            let stream = video.srcObject
            let tracks = stream.getTracks();
            tracks.forEach(track => {
                track.stop()
            })
        }
    };

    camera.init();
</script>

</html>
posted @ 2021-09-30 10:01  每天进步一点点OVO  阅读(355)  评论(0)    收藏  举报