2

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

到目前为止，一切都很好。一切正常。我面临的问题是停止网络摄像头。我遵循了这一点，但没有任何效果。

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

下面是我的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>
4

5 回答 5

0

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

1) 设置videoInput.src = ''。

cameraStream.stop2）在将其作为函数调用之前确保存在。Firefox 没有它，如果你尝试运行它，你的代码会抛出一个错误，并且它不会停止摄像头或清除画布。

3）在你打电话cameraStream.stop()（或不打电话）之后，设置cameraStream = null。

于 2013-07-04T15:08:48.600 回答
0

cameraStream.getVideoStreams()[0].stop()getAudioStreams- 这对我有用，如果你也有音频，你可能需要做同样的事情。

于 2014-09-10T12:22:37.007 回答
0

cameraStream.stop() API 正在使用已弃用的 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);
    }
于 2017-09-06T11:06:29.017 回答
0

认为这个问题太老了，我还是想留言给其他搜索这个问题的人，那就是

MediaStream.stop() 已弃用，很快将被删除。请改用 MediaStreamTrack.stop()。

如果您使用 Google Chrome > 45，请阅读此页面，它将节省您的时间。

于 2016-09-28T12:10:07.427 回答
0

我认为您的停止功能没有在听，我在这里检查过，请通过更改停止功能来检查

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

然后你的 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);

}

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

于 2017-09-06T13:13:12.023 回答