设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Python交流 › 使用Flask后html5无法调用摄像头
返回列表 发新帖
查看: 2482|回复: 3

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

[复制链接]
Mike_python小
发表于 2023-1-7 08:28:12 | 显示全部楼层 |阅读模式

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

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

x
HTML文件
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>camera</title>
  9.     <style>
  10.         #camera {
  11.             float: left;
  12.             margin: 20px;
  13.         }
  14.         
  15.         #contentHolder {
  16.             width: 300px;
  17.             height: 300px;
  18.             margin-bottom: 10px;
  19.         }
  20.         
  21.         #btn_snap {
  22.             margin: 0 auto;
  23.             border: 1px solid #f0f0f0;
  24.             background: #5CACEE;
  25.             color: #FFF;
  26.             width: 100px;
  27.             height: 36px;
  28.             line-height: 36px;
  29.             border-radius: 8px;
  30.             text-align: center;
  31.             cursor: pointer;
  32.             cursor: pointer;
  33.             /*禁止选择*/
  34.             -webkit-touch-callout: none;
  35.             /* iOS Safari */
  36.             -webkit-user-select: none;
  37.             /* Chrome/Safari/Opera */
  38.             -khtml-user-select: none;
  39.             /* Konqueror */
  40.             -moz-user-select: none;
  41.             /* Firefox */
  42.             -ms-user-select: none;
  43.             /* Internet Explorer/Edge */
  44.             user-select: none;
  45.             /* Non-prefixed version, currently not supported by any browser */
  46.         }
  47.         
  48.         #imgBoxxx {
  49.             width: 200px;
  50.             margin: 60px 20px 20px;
  51.             /* border-radius: 50%; */
  52.         }
  53.     </style>
  54. </head>

  56. <body>
  57.     <div id="camera">
  58.         <div id="contentHolder">
  59.             <video id="video" width="300" height="300" autoplay></video>
  60.             <canvas style="display:none;" id="canvas" width="300" height="300"></canvas>
  61.         </div>

  63.         <div id="btn_snap" onclick="myfunction()">拍照</div>
  64.     </div>

  66.     <script>
  67.         var canvas = document.getElementById("canvas"),
  68.             pzBtn = document.getElementById("btn_snap"),
  69.             context = canvas.getContext("2d"),
  70.             video = document.getElementById("video");

  72.         alert('该页面会调用您的摄像头')

  74.         // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
  75.         if (navigator.mediaDevices === undefined) {
  76.             navigator.mediaDevices = {};
  77.         }

  79.         // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
  80.         // 使用getUserMedia，因为它会覆盖现有的属性。
  81.         // 这里，如果缺少getUserMedia属性，就添加它。
  82.         if (navigator.mediaDevices.getUserMedia === undefined) {
  83.             navigator.mediaDevices.getUserMedia = function(constraints) {
  84.                 // 首先获取现存的getUserMedia(如果存在)
  85.                 var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  86.                 // 有些浏览器不支持，会返回错误信息
  87.                 // 保持接口一致
  88.                 if (!getUserMedia) {
  89.                     return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
  90.                 }
  91.                 //否则，使用Promise将调用包装到旧的navigator.getUserMedia
  92.                 return new Promise(function(resolve, reject) {
  93.                     getUserMedia.call(navigator, constraints, resolve, reject);
  94.                 });
  95.             }
  96.         }
  97.         var constraints = {
  98.             audio: false,
  99.             video: {
  100.                 width: 720,
  101.                 height: 720
  102.             }
  103.         }
  104.         navigator.mediaDevices.getUserMedia(constraints)
  105.             .then(function(stream) {
  106.                 var video = document.querySelector('video');
  107.                 // 旧的浏览器可能没有srcObject
  108.                 if ("srcObject" in video) {
  109.                     video.srcObject = stream;
  110.                 } else {
  111.                     //避免在新的浏览器中使用它，因为它正在被弃用。
  112.                     video.src = window.URL.createObjectURL(stream);
  113.                 }
  114.                 video.onloadedmetadata = function(e) {
  115.                     video.play();
  116.                 };
  117.             })
  118.             .catch(function(err) {
  119.                 console.log(err.name + ": " + err.message);
  120.             });

  122.         function myfunction() {
  123.             var date = new Date().getTime();
  124.             // 点击，canvas画图
  125.             context.drawImage(video, 0, 0, 300, 300);
  126.             // 获取图片base64链接
  127.             var image = canvas.toDataURL('image/png');
  128.             // 定义一个img
  129.             var img = new Image();
  130.             //设置属性和src
  131.             img.id = "imgBox";
  132.             img.src = image;
  133.             //将图片添加到页面中
  134.             // document.body.appendChild(img);

  136.             // base64转文件
  137.             function dataURLtoFile(dataurl, filename) {
  138.                 var arr = dataurl.split(','),
  139.                     mime = arr[0].match(/:(.*?);/)[1],
  140.                     bstr = atob(arr[1]),
  141.                     n = bstr.length,
  142.                     u8arr = new Uint8Array(n);
  143.                 while (n--) {
  144.                     u8arr[n] = bstr.charCodeAt(n);
  145.                 }
  146.                 return new File([u8arr], filename, {
  147.                     type: mime
  148.                 });
  149.             }
  150.             console.log(img);
  151.             // console.log(dataURLtoFile(image, date + '.png'));


  154.             
  155.         };
  156.     </script>
  157.     <script scr="jsQR.js"></script>
  158. </body>

  160. </html>
复制代码


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

我加了一个flask后
  1. from flask import Flask,render_template, request, redirect, url_for, make_response

  3. app = Flask(__name__)

  5. # app.route("/index")

  7. name = ''
  8. password = ''

  10. @app.route("/index", methods=["POST", "GET"])
  11. def index():
  12.     global name, password
  13.     if request.method == "GET":
  14.         return render_template("index.html")
  15.     if request.method == "POST":
  16.         name = request.form.get("name")
  17.         password = request.form.get("password")
  18.         if name=="Admin" and password=="123456":
  19.             return redirect(url_for('sm'))
  20.             # return "a"
  21.         else:
  22.             return render_template("index.html")


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



  34. if __name__ == "__main__":
  35.     app.run(host='0.0.0.0', port=80, debug = True)
复制代码


也就是
  1. @app.route("/sm", methods=["POST", "GET"])
  2. def sm():
  3.     if (name=="Admin" and password=="123456"):
  4.         return render_template("sao_ma.html")
  5.     else:
  6.         return redirect(url_for('index'))
复制代码


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

求解
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

Mike_python小
 楼主| 发表于 2023-1-7 09:00:01 | 显示全部楼层
已解决，感谢我自己
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

liuhongrun2022
发表于 2023-1-7 09:02:19 | 显示全部楼层
Mike_python小 发表于 2023-1-7 09:00
已解决，感谢我自己

《求人不如求自己》
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

元豪
发表于 2023-1-7 10:19:20 | 显示全部楼层
liuhongrun2022 发表于 2023-1-7 09:02
《求人不如求自己》

同感
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-25 06:21

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表