网页端打开相机扫描二维码

jsQR 源码：https://github.com/cozmo/jsQR

需要HTTPS下才能使用。

 

看情况调整display

<div class="camera">
    <div id="loadingMessage" style="display:none">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
    <div id="camera-title" style="display:none">
        <img class="scan-btn-switch" src="{% static 'images/camera.png' %}" />
    </div>
    <canvas id="canvas" style="display:none"></canvas>
</div>

$(function(){
    var video = document.createElement("video");
    var canvasElement = document.getElementById("canvas");
    var canvas = canvasElement.getContext("2d");
    var loadingMessage = document.getElementById("loadingMessage");
    var camera_title = document.getElementById("camera-title");

    var currentStream;
    var currentFacingMode="environment";
    function stopMediaTracks(currentStream) {
        currentStream.getTracks().forEach(track => {
            track.stop();
        });
    }

    function tick() {
        $(loadingMessage).css('display', 'block');
        loadingMessage.innerText = "⌛ Loading video..."
        if (video.readyState === video.HAVE_ENOUGH_DATA) {
            $(loadingMessage).css('display', 'none');
            $(canvasElement).css('display', 'block');
            $(video).fadeIn();
            $('.camera').fadeIn();
            $(camera_title).fadeIn();
            canvasElement.height = video.videoHeight;
            canvasElement.width = video.videoWidth;
            canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
            var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
            var code = jsQR(imageData.data, imageData.width, imageData.height, {
                inversionAttempts: "dontInvert",
            });
            if (code && code.data != '') {
                $('#loyalty_card_number').val(code.data);
                $('#points_claim_records_search input[name=search]').val(code.data);
                $(video).fadeOut();
                $('.camera').fadeOut();
                $(camera_title).fadeOut();
                console.log("Stop scan");
                // video.pause();
                stopMediaTracks(currentStream);
                return;
            }
        }
        requestAnimationFrame(tick);
    }

    $('.scan-btn').click(function(){
        if (typeof currentStream !== 'undefined') {
            stopMediaTracks(currentStream);
        }
        console.log("Start scan");
        navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
            $('.scan-btn-switch').show();
            currentFacingMode = "environment";
            currentStream = stream;
            video.srcObject = stream;
            video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
            video.play();
            requestAnimationFrame(tick);
        });
    });

    $('.scan-btn-switch').click(function(){
        if (typeof currentStream !== 'undefined') {
            stopMediaTracks(currentStream);
        }
        if (currentFacingMode === "environment") {
            currentFacingMode = "user";
        } else {
            currentFacingMode = "environment";
        }
        console.log("Switch scan");
        navigator.mediaDevices.getUserMedia({ video: { facingMode: currentFacingMode } }).then(function(stream) {
            currentStream = stream;
            video.srcObject = stream;
            video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
            video.play();
            requestAnimationFrame(tick);
        });
    });
});

 

可以看看这篇关于使用mediaDevices。

Choosing cameras in JavaScript with the mediaDevices API

https://www.twilio.com/blog/2018/04/choosing-cameras-javascript-mediadevices-api.html