Есть ли способ использовать Pos eNet в прямом эфире с веб-камеры? - PullRequest
Новая
       42

Есть ли способ использовать Pos eNet в прямом эфире с веб-камеры?

1 голос
/ 07 мая 2020

Я уже пытался добавить тег видео, а затем установить источник для веб-камеры, но это не сработало. Он только что произвел 404 в консоли. Вот код, который я пробовал: 

<html>
  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <!-- Load Posenet -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
 </head>

  <body>
    <video autoplay="true" id="videoElement">

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

    if (navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
}
    var flipHorizontal = false;

    var imageElement = document.getElementById('videoElement');

    posenet.load().then(function(net) {
      const pose = net.estimateSinglePose(imageElement, {
        flipHorizontal: true
      });
      return pose;
    }).then(function(pose){
        var parts = pose["keypoints"];
        console.log(parts[9]);
    })
  </script>
</html>

1 Ответ

1 голос
/ 08 мая 2020

См. Здесь наш официальный пример кода для использования веб-камеры с бодипиксом (который очень похож на pos enet, но дает вам еще больше деталей). Тем не менее, часть кода веб-камеры будет такой же:

CodePen: https://codepen.io/jasonmayes/pen/QWbNeJd

или Glitch: https://glitch.com/edit/#! / Tensorflow- js -body-segmentation

По сути, ключевые части здесь: 

const video = document.getElementById('webcam');


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


// Enable the live webcam view and start classification.
function enableCam(event) {
  // getUsermedia parameters.
  const constraints = {
    video: true
  };

  // Activate the webcam stream.
  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    video.addEventListener('loadedmetadata', function() {
      // do something once loaded metadata
    });

    video.srcObject = stream;
    video.addEventListener('loadeddata', function(){
      // Do something once loaded.
    });
  });
}



// If webcam supported, add event listener to button for when user
// wants to activate it.
if (hasGetUserMedia()) {
  const enableWebcamButton = document.getElementById('webcamButton');
  enableWebcamButton.addEventListener('click', enableCam);
} else {
  console.warn('getUserMedia() is not supported by your browser');
}
...