Fork me on GitHub

html5实现摄像头扫码的实践

使用的技术：原生html+vue.js+zxing.js；测试时附加需要的技术：iis10+ca证书制作。实现在安卓手机、安卓平板、pc上，实现浏览器上摄像头扫码功能。苹果的设备没测试过。
第一步：写好测试的网页并部署。
部署时使用iis发布。因为这个打开摄像头被限制为localhost和127.0.0.1和https协议下才能用，所以在pc上可以先配置本地ip地址，等在本地测试可以了，就自己制作一个ca证书，配置为局域网的https协议，保证测试设备和这次开发的网页服务器在同一个局域网下。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摄像头测试</title>
    <script src="js/vue.js"></script>
    <script src="js/zxing.js"></script>
    
</head>
<body>
    <div class="vueWrapper">
        <button @click="openVideo">打开</button>
        {{text}}
        <video ref="video" id="video" autoplay playsinline></video>
        {{text2}}
    </div>
</body>
<script>
    var codeReader=null;
    var vue = new Vue({
        el: '.vueWrapper',
        data: {
            text:'',
            text2:'',
        },
        methods: {
          

            openVideo(param=null){
               // alert("open")
                navigator.mediaDevices.getUserMedia({
                video: {
                    facingMode: "environment", // 后置摄像头
                    width: { min: 600, ideal: 1280, max: 1920 },
                },
                audio: false,
            }).then(success => {
                // 摄像头开启成功
                this.$refs['video'].srcObject = success
                // 播放摄像头画面
                this.$refs['video'].play();
               var codeReader = new ZXing.BrowserQRCodeReader();
            }).catch(err => {
                // 摄像头开启失败
                console.log(err)
                alert(err);
            })
            },
        }
    })
</script>
</html>
View Code
第二步，制作ca证书，参考：https://blog.csdn.net/m0_52440465/article/details/130713591，iis导入时，是pfx格式，所以用这个命令：
openssl pkcs12 -export -out server.pfx -inkey server.pem -in server.crt
转换一下格式。
完整：
openssl genpkey -algorithm RSA -out ca.pem -pkeyopt rsa_keygen_bits:2048

openssl req -new -key ca.pem -out ca.csr -subj "/OU=Self Sign CA/O=Self Sign/CN=Self Sign" -addext "keyUsage=critical,keyCertSign,cRLSign" -addext "basicConstraints=critical,CA:TRUE"

openssl x509 -req -days 365 -in ca.csr -signkey ca.pem -out ca.crt -copy_extensions copy

openssl genpkey -algorithm RSA -out server.pem -pkeyopt rsa_keygen_bits:2048

openssl req -new -key server.pem -out server.csr -subj "/C=CN/ST=Beijing/L=Beijing/O=local/OU=local/CN=localhost" -addext "subjectAltName =IP:192.168.1.77"

openssl x509 -req -in server.csr -CA ca.crt -CAkey ca.pem -CAcreateserial -out server.crt -days 365 -copy_extensions copy

openssl pkcs12 -export -out server.pfx -inkey server.pem -in server.crt
View Code

 

以上两个步骤完成，就可以在pc、手机和平板上也能打开手机摄像头了。
第三步，zxing扫码功能。
codeReader = new ZXing.BrowserQRCodeReader();
 codeReader.listVideoInputDevices()
                        .then(videoInputDevices => {
                            if (!videoInputDevices || videoInputDevices.length <= 0) {
                                return;
                            }
                            codeReader
                                .decodeFromInputVideoDevice(undefined, 'video')
                                .then(result => {
                                    console.log("result",result);
                                    if (!result) {//扫码失败

                                        return;
                                    }
                                    else {
                                        if (result.text) {//成功
                                            this.text=result.text                                           
                                        }
                                        else {                                          
                                            return;
                                        }
                                    }
                                })
                                .catch(err => {
                                     console.error("errscan", err);
                                    return;
                                });
View Code

 Vue和zXing的js资料：

https://files.cnblogs.com/files/HelloQLQ/VueAndZxing.zip?t=1721458991&download=true

posted @ 2024-07-20 15:01  HelloLLLLL  阅读(238)  评论(0)  编辑  收藏  举报