Question

有没有办法将 PoseNet 与实时网络摄像头一起使用？

2020-05-07

628

javascript html tensorflow.js

我已经尝试添加视频标签，然后将源设置为网络摄像头，但这不起作用。它只是在控制台中产生 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>

Answer 1

请参阅此处的官方示例代码，了解如何将网络摄像头与 bodypix 结合使用（与 posenet 非常相似，但提供了更多详细信息）。但是，代码的网络摄像头部分是相同的：

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');
}