Блог

Главная - Вопросы по программированию - Масштабирование видео с камеры на веб-странице как для ПК, так и для мобильных телефонов

Масштабирование видео с камеры на веб-странице как для ПК, так и для мобильных телефонов

#javascript #web-deployment #object-detection #tensorflow.js #bounding-box

Вопрос:

Я следовал кодовой таблице, чтобы создать интеллектуальную веб-камеру для обнаружения объектов с помощью TensorFlow.JS. Это был простой сайт, поэтому позже я попытался добавить некоторые визуальные эффекты, такие как некоторые цвета, панель управления, кнопки и т. Д. Теперь веб-страница работает почти гладко на экране моего ПК, но у меня много проблем с запуском ее на мобильном устройстве. Просто чтобы объяснить, что я пытаюсь сделать — во-первых, страница с некоторым текстом загружается и загружает TensorFlow.js модель => появляется кнопка =>> при нажатии на нее кнопка исчезает, появляется видео и две новые кнопки (переключить и закрыть камеру). Затем модель начинает работать и делает ограничительные рамки. У меня возникли две проблемы-

  1. Не удается использовать камеру заднего вида на мобильном телефоне.
  2. Я не могу установить положение видео так, чтобы оно подходило как для ПК, так и для мобильных экранов.

Ссылка на веб — страницу- https://lordharsh.github.io/Object-Detection-with-Webcam/

Код-

HTML-

 <!DOCTYPE html>
<html lang="en">

<head>
    <title>OD using TensorFlow</title>
    <meta charset="utf-8">
    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=1280, initial-scale=1">
</head>

<body class= "page">
    <header>
        <a>Multiple Object Detection</a>
    </header> 
    <main> 
        <p id ='p1' class= 'para'>Multiple object detection using pre trained model in TensorFlow.js. Wait for the model to load before clicking the button to enable the webcam - at which point it will become
            visible to use.</p>

        <section id="demos" class="invisible">

            <p id ='p2'>Hold some objects up close to your webcam to get a real-time classification! When ready click "enable
                webcam"
                below and accept access to the webcam when the browser asks (check the top left of your window)</p>

            <div id="liveView" class="camView">
                <button id="webcamButton" class="button b1">ENABLE CAMERA</button>
                <video id="webcam" autoplay width="640" height="480"></video>
                <button id="webcamFlipButton" class="button b2">SWITCH CAMERA</button>
                <button id="webcamCloseButton" class="button b3">CLOSE CAMERA</button>
            </div>
        </section>

        <!-- Import TensorFlow.js library -->
        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
        <!-- Load the coco-ssd model to use to recognize things in images -->
        <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>

        <!-- Import the page's JavaScript to do some stuff -->
        <script src="script.js" defer></script>
    </main>
</body>

</html>

язык JavaScript-

 const video = document.getElementById('webcam');
const liveView = document.getElementById('liveView');
const demosSection = document.getElementById('demos');
const enableWebcamButton = document.getElementById('webcamButton');
const flipWebcamButton = document.getElementById('webcamFlipButton');
const closeWebcamButton = document.getElementById('webcamCloseButton');
const para1 = document.getElementById('p1');
para2 = document.getElementById('p2');

let camDirection = 'user';

console.log(window.screen.availHeight " " window.screen.availWidth ' ' window.devicePixelRatio);


// Check if webcam access is supported.
function getUserMediaSupported() {
  return !!(navigator.mediaDevices amp;amp;
    navigator.mediaDevices.getUserMedia);
}

// If webcam supported, add event listener to button for when user
// wants to activate it to call enableCam function which we will 
// define in the next step.
if (getUserMediaSupported()) {
  enableWebcamButton.addEventListener('click', enableCam);
} else {
  console.warn('getUserMedia() is not supported by your browser');
}

// Enable the live webcam view and start classification.
function enableCam(event) {
  // Only continue if the COCO-SSD has finished loading.
  if (!model) {
    return;
  }
  if (event.target === flipWebcamButton) {
    if (camDirection === 'user'){
      camDirection = 'environment';
      console.log('shouls change');
    }
    else
      camDirection = 'user';
  }

  // Hide the button once clicked.
  p1.classList.add('removed');
  p2.classList.add('removed');
  event.target.classList.add('removed');
  video.classList.add('vid_show')
  flipWebcamButton.classList.add('show')
  closeWebcamButton.classList.add('show')
  // getUsermedia parameters to force video but not audio.
  const constraints = {
    video: {facingMode: { exact: camDirection }}
  };

  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
    video.srcObject = stream;
    video.addEventListener('loadeddata', predictWebcam);
  });
}

flipWebcamButton.addEventListener('click', enableCam);
closeWebcamButton.addEventListener('click', restartPage);

function restartPage(event) {
  location.reload()
}


// Store the resulting model in the global scope of our app.
var model = undefined;

// Before we can use COCO-SSD class we must wait for it to finish
// loading. Machine Learning models can be large and take a moment 
// to get everything needed to run.
// Note: cocoSsd is an external object loaded from our index.html
// script tag import so ignore any warning in Glitch.
cocoSsd.load().then(function (loadedModel) {
  model = loadedModel;
  // Show demo section now model is ready to use.
  demosSection.classList.remove('invisible');
});

var children = [];

function predictWebcam() {
  // Now let's start classifying a frame in the stream.
  model.detect(video).then(function (predictions) {
    // Remove any highlighting we did previous frame.
    for (let i = 0; i < children.length; i  ) {
      liveView.removeChild(children[i]);
    }
    children.splice(0);

    // Now lets loop through predictions and draw them to the live view if
    // they have a high confidence score.
    for (let n = 0; n < predictions.length; n  ) {
      // If we are over 66% sure we are sure we classified it right, draw it!
      if (predictions[n].score > 0.66) {
        const p = document.createElement('p');
        p.style = "font-size=2vh"
        p.innerText = predictions[n].class   ' - with '
            Math.round(parseFloat(predictions[n].score) * 100)
            '% confidence.';
        p.style = 'margin-left: '   predictions[n].bbox[0]   'px; margin-top: '
            (predictions[n].bbox[1] - 10)   'px; width: '
            (predictions[n].bbox[2] - 10)   'px; top: 0; left: 0;';

        const highlighter = document.createElement('div');
        highlighter.setAttribute('class', 'highlighter');
        highlighter.style = 'left: '   predictions[n].bbox[0]   'px; top: '
            predictions[n].bbox[1]   'px; width: '
            predictions[n].bbox[2]   'px; height: '
            predictions[n].bbox[3]   'px;';
        liveView.appendChild(highlighter);
        liveView.appendChild(p);
        children.push(highlighter);
        children.push(p);
      }
    }

    // Call this function again to keep predicting when the browser is ready.
    window.requestAnimationFrame(predictWebcam);
  });
}

CSS-

 :root {
  --primary: #000000;
  --secondary: #;
  --primaryLight: #2c2c2c;
  --primaryDark: #000000;
  --secondaryLight: #73ffd8;
  --secondaryDark: #00ca77;
}

header {
  overflow: hidden;
  background-color:black;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 1300px; /* Full width */
  padding: 5px;
  left: 0;
  shape-margin: 5px;
  text-align: left;
  text-shadow: 50px #000000;
}
header a{
  padding: 10px;
  left: 50px;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: whitesmoke;
  font-size: 5vh;
  font-weight: 400;
  letter-spacing: 0.08em;
}


/* Main content */
main {
  padding-left: 12px;
  margin-top:10vh; /* Add a top margin to avoid content overlay */
  text-align: center;
  font-size: large;
  align-content: center;
  text-align: center;
}

.para{
  margin-top: 40vh;
}

body {
  font-family: "Lucida Console";
  color: #ffffff;
  background-color: #2c2c2c;
}



video{
  display: none;
  border-radius: 12px; 
  align-self: center;
}

.vid_show{
  display:block;
  align-self: center;
}

section {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

.removed {
  display: none;
}

.invisible {
  opacity: 0.2;
}

.camView {
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  align-content: center;
}

.camView p {
  position: absolute;
  padding: 5px;
  background-color: #1df3c2;
  color: #fff;
  border: 1px dashed rgba(255, 255, 255, 0.7);
  z-index: 2;
  font-size: 12px;
  align-content: center;
}

.highlighter {
  background: rgba(0, 255, 0, 0.25);
  border: 1px dashed #fff;
  z-index: 1;
  position: absolute;
}

.button{
  height:max-content;
  width: max-content;
  color: #000000;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  border-radius: 3ch;
  left: 50%;
  right: 50%;
  border-collapse: collapse;
  font-size: 1.7vh;
  font-weight: bold;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  padding: 1vh;
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #000000;
  color: white;
  box-shadow: 0 6px 10px 0 rgb(231, 231, 231), 0 6px 10px 0 rgb(231, 231, 231);
}

.b2{
  display:none;
}

.b3{
  display: none;
}

.show{
  display:inline-grid;
}

Вы также можете просмотреть этот код по адресу-
Ссылка на код GitHub — https://github.com/LordHarsh/Objecct-Detection-with-Webcam

Извините за слишком длинный вопрос, но я новичок в веб-разработке.

Метки: ,