使用Flask后html5无法调用摄像头

Mike_python小 · 发表于 2023-1-7 08:28:12

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

HTML文件

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>camera</title>
    <style>
        #camera {
            float: left;
            margin: 20px;
        }
        
        #contentHolder {
            width: 300px;
            height: 300px;
            margin-bottom: 10px;
        }
        
        #btn_snap {
            margin: 0 auto;
            border: 1px solid #f0f0f0;
            background: #5CACEE;
            color: #FFF;
            width: 100px;
            height: 36px;
            line-height: 36px;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            cursor: pointer;
            /*禁止选择*/
            -webkit-touch-callout: none;
            /* iOS Safari */
            -webkit-user-select: none;
            /* Chrome/Safari/Opera */
            -khtml-user-select: none;
            /* Konqueror */
            -moz-user-select: none;
            /* Firefox */
            -ms-user-select: none;
            /* Internet Explorer/Edge */
            user-select: none;
            /* Non-prefixed version, currently not supported by any browser */
        }
        
        #imgBoxxx {
            width: 200px;
            margin: 60px 20px 20px;
            /* border-radius: 50%; */
        }
    </style>
</head>
 
<body>
    <div id="camera">
        <div id="contentHolder">
            <video id="video" width="300" height="300" autoplay></video>
            <canvas style="display:none;" id="canvas" width="300" height="300"></canvas>
        </div>

        <div id="btn_snap" onclick="myfunction()">拍照</div>
    </div>
 
    <script>
        var canvas = document.getElementById("canvas"),
            pzBtn = document.getElementById("btn_snap"),
            context = canvas.getContext("2d"),
            video = document.getElementById("video");
 
        alert('该页面会调用您的摄像头')
 
        // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
 
        // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
        // 使用getUserMedia，因为它会覆盖现有的属性。
        // 这里，如果缺少getUserMedia属性，就添加它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function(constraints) {
                // 首先获取现存的getUserMedia(如果存在)
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
                // 有些浏览器不支持，会返回错误信息
                // 保持接口一致
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }
                //否则，使用Promise将调用包装到旧的navigator.getUserMedia
                return new Promise(function(resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
        var constraints = {
            audio: false,
            video: {
                width: 720,
                height: 720
            }
        }
        navigator.mediaDevices.getUserMedia(constraints)
            .then(function(stream) {
                var video = document.querySelector('video');
                // 旧的浏览器可能没有srcObject
                if ("srcObject" in video) {
                    video.srcObject = stream;
                } else {
                    //避免在新的浏览器中使用它，因为它正在被弃用。
                    video.src = window.URL.createObjectURL(stream);
                }
                video.onloadedmetadata = function(e) {
                    video.play();
                };
            })
            .catch(function(err) {
                console.log(err.name + ": " + err.message);
            });
 
        function myfunction() {
            var date = new Date().getTime();
            // 点击，canvas画图
            context.drawImage(video, 0, 0, 300, 300);
            // 获取图片base64链接
            var image = canvas.toDataURL('image/png');
            // 定义一个img
            var img = new Image();
            //设置属性和src
            img.id = "imgBox";
            img.src = image;
            //将图片添加到页面中
            // document.body.appendChild(img);
 
            // base64转文件
            function dataURLtoFile(dataurl, filename) {
                var arr = dataurl.split(','),
                    mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]),
                    n = bstr.length,
                    u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], filename, {
                    type: mime
                });
            }
            console.log(img);
            // console.log(dataURLtoFile(image, date + '.png'));


            
        };
    </script>
    <script scr="jsQR.js"></script>
</body>
 
</html>

直接打开的话是可以调用摄像头的

我加了一个flask后

from flask import Flask,render_template, request, redirect, url_for, make_response

app = Flask(__name__)

# app.route("/index")

name = ''
password = ''

@app.route("/index", methods=["POST", "GET"])
def index():
    global name, password
    if request.method == "GET":
        return render_template("index.html")
    if request.method == "POST":
        name = request.form.get("name")
        password = request.form.get("password")
        if name=="Admin" and password=="123456":
            return redirect(url_for('sm'))
            # return "a"
        else:
            return render_template("index.html")


@app.route("/sm", methods=["POST", "GET"])
def sm():
    if (name=="Admin" and password=="123456"):
        return render_template("sao_ma.html")
    else:
        return redirect(url_for('index'))



if __name__ == "__main__":
    app.run(host='0.0.0.0', port=80, debug = True)

也就是

@app.route("/sm", methods=["POST", "GET"])
def sm():
    if (name=="Admin" and password=="123456"):
        return render_template("sao_ma.html")
    else:
        return redirect(url_for('index'))

这段代码
再根据flask给的ip打开就无法调用摄像头了

求解

Mike_python小 · 发表于 2023-1-7 09:00:01

已解决，感谢我自己

liuhongrun2022 · 发表于 2023-1-7 09:02:19

Mike_python小发表于 2023-1-7 09:00
已解决，感谢我自己

《求人不如求自己》

元豪 · 发表于 2023-1-7 10:19:20

liuhongrun2022 发表于 2023-1-7 09:02
《求人不如求自己》

同感

账号		自动登录	找回密码
密码			立即注册