Test.Core.Web/pages/QrCode.cshtml

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

@page

<!DOCTYPE html>
<html>
<head>
    <title>二维码扫描测试</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            text-align: center;
        }
    </style>
    <script src="/common/jquery-1.10.2.js"></script>
    <script>
        //这段代 主要是获取摄像头的视频流并显示在Video 签中
        var constraints = { "video": true, audio: false };
        var canvas;
        var context;
        var video;
        var log;

        //打印内容到页面
        function appendToBody(content) {
            log.value = content;
        }

        //抓屏获取图像流，并上传到服务器
        function decode() {
            context.drawImage(video, 0, 0, 320, 320);
            $.ajax({
                type: 'post',
                url: '/api/qr/decode',
                data: { data: canvas.toDataURL("image/jpeg") },
                cache: false,
                timeout: 10000,
                success: function (res) {
                    if (res.Result)
                        appendToBody(res.Data);
                    else
                        appendToBody('未识别二维码，请重新扫描！');
                },
                error: function (err) {
                    appendToBody('扫描失败' + err);
                }
            });
        }

        function alertError(error) {
            if (error.PERMISSION_DENIED) {
                alert('用户拒绝了浏览器请求媒体的权限', '提示');
            } else if (error.NOT_SUPPORTED_ERROR) {
                alert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');
            } else if (error.MANDATORY_UNSATISFIED_ERROR) {
                alert('指定的媒体类型未接收到媒体流', '提示');
            } else {
                alert('系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试', '提示');
            }
        };