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

【问题标题】：Is there a way to use PoseNet with live webcam feed?有没有办法将 PoseNet 与实时网络摄像头提要一起使用？
【发布时间】：2020-05-07 15:37:56
【问题描述】：

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

【问题讨论】：

标签： javascript html tensorflow.js

【解决方案1】：

请在此处查看我们的官方示例代码，了解如何使用带有 bodypix 的网络摄像头（这与posenet 非常相似，但会为您提供更多详细信息）。然而，代码的网络摄像头部分将是相同的：

代码笔： https://codepen.io/jasonmayes/pen/QWbNeJd

或故障：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');
}

【讨论】：