ストリームコールバック関数外の変数にアクセスする - JavaScript、WebRTC

Question

私はウェブカメラをストリーミングしており、ウェブカメラを停止する方法が必要です。私は、コールバック関数の外でトラック変数に到達することはできませんが、ストリーミングトラックでstopを呼び出すことによってそれを停止しようとしています。コールバック関数の外でこの関数内でtrackにアクセスするにはどうすればよいですか？基本的にはこのような：

var track; 
      function successCallback(stream) { 
       localstream = stream; // stream available to console 
       track = stream.getTracks()[0]; 
       if (window.URL) { 
        video.src = window.URL.createObjectURL(stream); 
       } else { 
        video.src = stream; 
       } 
      } 
track.stop(); 

完全なインスタンスは、次のようになります。

function media(i) { 
      navigator.getUserMedia = navigator.getUserMedia || 
       navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 

      var constraints = { 
       audio: false, 
       video: true 
      }; 
      var video = document.querySelectorAll("video")[i]; 
      var localstream; 

      function successCallback(stream) { 
       localstream = stream; // stream available to console 
       var track = stream.getTracks()[0]; 
       if (window.URL) { 
        video.src = window.URL.createObjectURL(stream); 
       } else { 
        video.src = stream; 
       } 

       track.stop(); 
      } 

      function errorCallback(error) { 
       console.log('navigator.getUserMedia error: ', error); 
      } 

      navigator.getUserMedia(constraints, successCallback, errorCallback); 
     } 

Answer 1

はmedia機能のtrack外範囲を定義します。また、track.stop()が呼び出されたときにBlob URLをvideosrcに設定することを検討してください。

window.onload = function() { 
    let track, url; 

    function media(i) { 
    navigator.getUserMedia = navigator.getUserMedia || 
     navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 

    var constraints = { 
     audio: false, 
     video: true 
    }; 
    var video = document.querySelectorAll("video")[i]; 
    var localstream; 

    function successCallback(stream) { 
     localstream = stream; // stream available to console 
     track = stream.getTracks()[0]; 
     if (window.URL) { 
     url = window.URL.createObjectURL(stream); 
     video.src = url; 
     } else { 
     video.src = stream; 
     } 

     // track.stop(); 
    } 

    function errorCallback(error) { 
     console.log('navigator.getUserMedia error: ', error); 
    } 

    navigator.getUserMedia(constraints, successCallback, errorCallback); 
    } 

    var button = document.querySelector("button"); 
    button.onclick = function() { 
    track.stop(); 
    URL.revokeObjectURL(url); 
    // document.querySelectorAll("video")[i].src = ""; 
    } 
    media(0) 
} 

plnkr https://plnkr.co/edit/FJhEBOCTRcE5NUUaEI7B?p=preview