1.摄像头可调用demo，但需https

南骏 池

2025-05-14 455a1e7d429da9ffdaf3763e3450624223c71fc5

1.摄像头可调用demo，但需https

 H5/Config.aspx

@@ -26,7 +26,7 @@
        <van-button plain type="danger" @click="testErrorSound">测试失败音效</van-button>
    </div>
     <div class="padding">
        <van-button plain type="warning" @click="sendScan">测试扫描</van-button>
        <van-button plain type="warning" @click="startScan">测试扫描</van-button>
        <van-cell-group>
              <van-field  v-model="textInput" placeholder="请扫描这里"  v-focus.noKeyboard ></van-field>
       </van-cell-group>
@@ -35,7 +35,7 @@
<div class="padding">
            <van-cell-group>
                <van-cell title="扫描工位">
                    <van-button type="primary" size="small" @click="sendScan">扫描</van-button>
                    <van-button type="primary" size="small" @click="startScan">扫描</van-button>
                </van-cell>
                <van-field v-model="scanWorkstation" placeholder="扫描结果将显示在此处"></van-field>
            </van-cell-group>
@@ -58,6 +58,6 @@
            }, 200);
        }
    </script>
    <script src="Js/Config.js?<%=15111 %>"></script>
    <script src="Js/Config.js?<%=151111 %>"></script>

</asp:Content>

 H5/Js/Config.js

@@ -128,6 +128,36 @@
        
        testErrorSound() {
            this.$playSound('error');
        },



        startScan() {
            const qrScanner = new Html5Qrcode("qr-reader");
            const config = { 
                fps: 10,
                qrbox: 250
            };
    
            qrScanner.start(
                { facingMode: "environment" },
                config,
                (decodedText) => {
                    // 扫码成功处理
                    this.scanWorkstation = decodedText;
                    qrScanner.stop();
                    document.getElementById('qr-reader').style.display = 'none';
                },
                (errorMessage) => {
                    // 错误处理
                    console.error(errorMessage);
                }
            ).catch(err => {
                alert('无法启动摄像头: ' + err);
            });
            
            // 显示扫码容器
            document.getElementById('qr-reader').style.display = 'block';
        }
    }
})