Колба с помощью USB-камеры Проблемы - PullRequest
Новая
       45

Колба с помощью USB-камеры Проблемы

0 голосов
/ 15 октября 2019

Недавно я начал создавать HTML-сайт, который должен использовать мою USB-камеру, к сожалению, я не могу понять, как я могу изменить камеру, которую показывает моя программа.

Когда я запускаю эту программу, пользователь попадает на страницу, где он может видеть некоторые кнопки и камеру. К сожалению, это всегда берет мою камеру веб-камеры вместо моей камеры USB. Если бы вы могли дать мне какие-либо советы, как решить эту проблему, я был бы счастлив.

Я знаю, что мое кодирование немного запутанно, но я новичок в этом.

PS этот проект дляменя, чтобы я мог видеть мою собаку в саду.

Мой код Python 

from flask import Flask, render_template, redirect, request, url_for
import time
import os
import cv2
from math import sqrt



app=Flask(__name__)

@app.route("/")
def Startpage():
    return render_template("backround-image.html")

@app.route("/Statistic")
def Statistic():
    return render_template("outside.html")

@app.route("/Textarea")
def Textarea():
    return render_template("inside.html")


app.run(debug=True)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home-Dog -Cam</title>
<meta charset="utf-8">


<meta http-equiv="refresh" content="20">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* First Box under the HEADER */
header {
  background-color: #9ACD32;
  padding: 10px;
  text-align: center;
  font-size: 15px;
  color: white;
}

/* Create two columns/boxes that floats next to each other */
/*nav=navigator/*
nav {
  float: left;
  width: 40%;
  height: 600px; /* only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 60%;
  background-color: #f1f1f1;
  height: 600px;
}

section:after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}

.block1 {
  display: block;
  width: 100%;
  border: none;
  background-color: #4CAF50;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}
.block2 {
  display: block;
  width: 100%;
  border: none;
  background-color: #FF0000;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}
.block3 {
  display: block;
  width: 100%;
  border: none;
  background-color: #FFFF00;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}
.block4 {
  display: block;
  width: 100%;
  border: none;
  background-color: #FFA500;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}
</style>
</head>
<body>

<h2>Welcome </h2>
<p>We are happy to show you the future</p>


<header>
  <h2><img src="", height=100, width=400></p>
  </h2>
</header>

<section>
  <nav>
      <ul>
      <li> <button type="button" class="block1" color="GRENN">Start</button> </li>
      <li> <button type="button" class="block2" color="RED">Stop</button> </li>
          <li> <button type="button"class="block3">Statistics // HOW  long did he play outside more stuff </button></li>
          <li> <button type="button"class="block4">Call Scooby /// AUIO Later </button></li><li><button type="button"class="block4">Pick Number</button></li>


      </ul>
  </nav>

  <article>
    <h1>Sicherheitskammera</h1>
<div id="container">
    <video autoplay="true" id="videoElement">

    </video>
</div>
<script>
var video = document.querySelector("#videoElement");

if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
    .catch(function (err0r) {
      console.log("Something went wrong!");
    });
}
</script>
  </article>
</section>

<footer>
</footer>

</body>
...