2

headtrackrライブラリgetUserMediaを使用して、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

cameraStream.getVideoStreams()[0].stop()-私にとってはうまくgetAudioStreamsいきました。オーディオもある場合は、同じことを行う必要があるかもしれません。

于 2014-09-10T12:22:37.007 に答える
0

これらの手順は、この順序で機能します。

1) を設定しvideoInput.src = ''ます。

2)cameraStream.stop関数として呼び出す前に存在することを確認してください。Firefox にはそれがありません。実行しようとすると、コードはエラーをスローし、カメラを停止したり、キャンバスをクリアしたりしません。

3) 電話をかけた後cameraStream.stop()(または電話をかけなかった場合)、 を設定しcameraStream = nullます。

于 2013-07-04T15:08:48.600 に答える
0

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);
    }
于 2017-09-06T11:06:29.017 に答える