Question

我使用headtrackr库使用HTML5 getUserMedia实现了头部跟踪功能。此外，我有一个画布，我正在画一个笑脸，当网络摄像头跟踪它时，它会移动头部。

到目前为止一切顺利。事情很好。我面临的问题是停止摄像头。我跟着this但没有任何效果。

我知道无论如何我必须停止流。我有一个停止按钮，不仅会停止相机，还需要清除画布。这就是实际问题所在。我的停止功能实现不是释放网络摄像头，即它保持打开但是头部停止并且画布也没有被清除。

以下是我的javascript代码

var cameraStream = null;
window.URL = window.URL || window.webkitURL;
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
    || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var videoInput = document.getElementById('inputVideo');

if (!navigator.getUserMedia) {
        fallback();
} else {
        navigator.getUserMedia({
    audio : true,
    video : true
   }, success, fallback);
 }

  document.addEventListener('facetrackingEvent', function(event) {
     $('#parameters').html(
                "Height: " + event.height + " Width: " + event.width + "\n     X: "
                    + event.x + " Y: " + event.y);
    setTimeout(function() {
            drawCircle(event.x, event.y);
       }, 500);
   });

  function fallback(e) {
     videoInput.src = 'fallbackvideo.webm';
     console.log('Reeeejected!', e);
  }   

  function success(stream) {
    alert(stream);
    cameraStream = stream;
    var canvasInput = document.getElementById('inputCanvas');
    videoInput.src = window.URL.createObjectURL(stream);

    var htracker = new headtrackr.Tracker();
    htracker.init(videoInput, canvasInput);
    htracker.start();
   }

  function drawCircle(x, y) {
   canvas = document.getElementById('faceCanvas');
   context = canvas.getContext('2d');
       context.clearRect(0, 0, canvas.width, canvas.height);
   context.strokeStyle = '#0000FF';
        context.fillStyle = '#FFFF00';
   context.lineWidth = 4;
   context.beginPath();
   context.arc(x, y, 50, 0, Math.PI * 2, true);
   context.closePath();
   context.stroke();
   context.fill();

    // The smile
    context.strokeStyle = '#FF0000';
    context.lineWidth = 2;
    context.beginPath();
    context.arc(x, y - 10, 40, 0.2 * Math.PI, 0.8 * Math.PI, false);
    // context.closePath();
    context.stroke();
    // context.fill();

    // The Left eye
    context.strokeStyle = '#000000';
    context.fillStyle = '#000000';
    context.beginPath();
    context.arc(x - 20, y - 15, 10, 0 * Math.PI, 2 * Math.PI, false);
    context.closePath();
    context.stroke();
    context.fill();

    // The Right Eye
    context.strokeStyle = '#000000';
    context.fillStyle = '#000000';
    context.beginPath();
    context.arc(x + 20, y - 15, 10, 0 * Math.PI, 2 * Math.PI, false);
    context.closePath();
    context.stroke();
    context.fill();
}

/**
 * stops head tracking
 */
function stopTracking(){
        cameraStream.stop();
        videoInput.src="";
      canvas  = document.getElementById('faceCanvas');
      context = canvas.getContext('2d');
      context.clearRect(0,0,canvas.width,canvas.height);
  }

我的HTML代码就在这里

<canvas id="inputCanvas" ></canvas>
    <video id="inputVideo" autoplay=""></video>
    <div id="parameters"></div>
    <canvas id="faceCanvas"></canvas>
    <button id="stop" onclick="stopTracking();">Stop Tracking</button>
    <script src="resources/js/facedetection.js"></script>
    <script src="resources/js/headtrackr.min.js"></script>
    <script src="resources/js/jquery-1.9.1.min.js"></script>

Answer 1

按此顺序执行这些步骤对我有用。

1）设置videoInput.src = ''。

2）在将其作为函数调用之前，请确保cameraStream.stop存在。 Firefox没有它，如果你试图运行它，你的代码将抛出一个错误，它不会停止相机或清除画布。

3）致电cameraStream.stop()（或不）后，请设置cameraStream = null。

Answer 2

cameraStream.getVideoStreams()[0].stop() - 对我有用，如果您有音频，则可能需要对getAudioStreams执行相同操作。

Answer 3

认为这个问题太老了，我还是想留意一下这个问题的其他人，就是

MediaStream.stop（）已弃用，很快就会被删除。改为使用MediaStreamTrack.stop（）。

如果您使用的是Google Chrome＆gt; 45，请阅读this page，这将节省您的时间。

Answer 4

cameraStream.stop（）API使用的是不推荐使用的。改变

   function stopTracking(){
        cameraStream.stop();
        videoInput.src="";
        canvas  = document.getElementById('faceCanvas');
        context = canvas.getContext('2d');
        context.clearRect(0,0,canvas.width,canvas.height);
    }

到

    function stopTracking(){
          cameraStream.getTracks().forEach(track => track.stop());
          videoInput.src="";
          canvas  = document.getElementById('faceCanvas');
          context = canvas.getContext('2d');
          context.clearRect(0,0,canvas.width,canvas.height);
    }

Answer 5

我认为您的停止功能没有收听，我已在此处查看过，请通过

更改停止功能来检查

document.getElementById("stop").addEventListener("click", stopTracking);

然后你的停止跟踪功能

function stopTracking(){
    if (videoInput.src) {
            cameraStream.getAudioTracks()[0].stop();
            if( cameraStream.getVideoTracks().length > 0){
                cameraStream.getVideoTracks()[0].stop();
                videoInput.src = null;
            }
        }
  canvas  = document.getElementById('faceCanvas');
  context = canvas.getContext('2d');
  context.clearRect(0,0,canvas.width,canvas.height);

}

您需要遍历所有可用的本地流。

HTML5 localMediaStream停止功能不释放网络摄像头/硬件

5 个答案: