title: Camera permission dialogue box not appearing
body: <p>So I've been trying to make a UI in which the user can upload his pictures to local system (To move from one location to images database by opening a file manager dialogue box) or take live pictures and add to the images database. I made this simple html file which is running well but after i try to run it with flask after creating a localhost , google chrome doesn't prompt for camera permission from above and somehow the permission is already granted but the camera doesn't work . Here is the code- app.py</p>
  
  <pre><code>import os
  
  from flask import Flask, request, render_template, send_from_directory
  
  app = Flask(__name__)
  
  APP_ROOT = os.path.dirname(os.path.abspath(__file__))
  
  
  @app.route("/")
  def index():
      return render_template("upload.html")
  
  
  @app.route("/upload", methods=["POST"])
  #for the intake of the folder name that needs to be created or selected in the dataset folder
  def upload():
      fold_nam=request.form["name"] 
  
  
      folder_name = request.form.get('superhero')
      '''
      # this is to verify that folder to upload to exists.
      if os.path.isdir(os.path.join(APP_ROOT, 'files/{}'.format(folder_name))):
          print("folder exist")
      '''
      #Change this target variable as per the device working in (set your own path address of the dataset folder)
      target="/home" + str(fold_nam).lower()
      print(target)
      if not os.path.isdir(target):
          os.mkdir(target)
      print(request.files.getlist("file"))
      for upload in request.files.getlist("file"):
          print(upload)
          print("{} is the file name".format(upload.filename))
          filename = upload.filename
          # This is to verify files are supported
          ext = os.path.splitext(filename)[1]
          if (ext == ".jpg") or (ext == ".png"):
              print("File supported moving on...")
          else:
              render_template("Error.html", message="Files uploaded are not supported...")
          destination  = "/".join([target, filename])
          print("Accept incoming file:", filename)
          print("Save it to:", destination)
          upload.save(destination)
  
      # return send_from_directory("images", filename, as_attachment=True)
      return render_template("complete.html", image_name=filename)
  
  if __name__ == "__main__":
      app.run(port=4555, debug=True)
  
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;form id="frm1" action="/action_page.php"&gt;
          Name: &lt;input type="text" name="fname"&gt;&lt;br&gt;
  
  
          &lt;input type="file" id="real-file" hidden="hidden" /&gt;
          &lt;button type="button" id="custom-button"&gt;CHOOSE A FILE&lt;/button&gt;
          &lt;span id="custom-text"&gt;No file chosen, yet.&lt;/span&gt;
          &lt;script type="text/javascript"&gt;
              const realFileBtn = document.getElementById("real-file");
              const customBtn = document.getElementById("custom-button");
              const customTxt = document.getElementById("custom-text");
  
              customBtn.addEventListener("click", function () {
                  realFileBtn.click();
              });
  
              realFileBtn.addEventListener("change", function () {
                  if (realFileBtn.value) {
                      customTxt.innerHTML = realFileBtn.value.match(
                          /[\/\\]([\w\d\s\.\-\(\)]+)$/
                      )[1];
                  } else {
                      customTxt.innerHTML = "No file chosen, yet.";
                  }
              });
  
          &lt;/script&gt;
      &lt;/form&gt;
  
  
      &lt;div class="container"&gt;
          &lt;video id="video" width="300" height="300" autoplay="true"&gt;&lt;/video&gt;
          &lt;button class="button" id="snap"&gt;Photo&lt;/button&gt;
          &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
          &lt;br&gt;
  
          &lt;a id="download" href="/images/myw3schoolsimage.jpg" download&gt;download&lt;/a&gt;
          &lt;div&gt;
  
              &lt;input type="submit" value="Upload!" id="upload-button"&gt;&lt;br&gt;
  
  &lt;/body&gt;
  &lt;script&gt;
  
  
  
      $("#file-picker").change(function () {
  
          var input = document.getElementById('file-picker');
  
          for (var i = 0; i &lt; input.files.length;i++) {
              //koala.jpg, koala.JPG substring(index) lastIndexOf('a') koala.1.jpg
              var ext = input.files[i].name.substring(input.files[i].name.lastIndexOf('.') + 1).toLowerCase()
  
          if((ext == 'jpg') || (ext == 'png')) {
              $("#msg").text("Files are supported")
          }
          else {
              $("#msg").text("Files are NOT supported")
              document.getElementById("file-picker").value = "";
          }
  
      }
  
  
  });
  
  &lt;/script&gt;
  
  
  &lt;script src="./index.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>
  (() =&gt; {
      var video = document.getElementById('video');
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var img = document.getElementById("img")
      var download = document.getElementById("download")
  
  
      if (navigator.mediaDevices &amp;&amp; navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia({ video: true }).then((stream) =&gt; {
              video.srcObject = stream;
              video.play();
          });
      }
      document.getElementById("snap").addEventListener("click", () =&gt; {
          context.drawImage(video, 0, 0, 300, 300);
          img.setAttribute("src", canvas.toDataURL("image/png"))
          download.setAttribute("href", canvas.toDataURL("image/png"))
      });
  })()
  
  </code></pre>
  
  <p>All i want is to run the **index.html ** using flask with the camera running properly in localhost.</p>
  
  <p>I know that my code is not in the finished state , but i'm stuck at this very place. I would like to mention that all my files are in proper directories and i have no indentation errors etc. Anyone who is willing to help is requested to mention every minute detail as I'm not very good at this .
  Thankyou!</p>