Question

我有这个代码，绿色可视化器应该在捕获麦克风时移动。是什么导致它根本不动？

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: white;
    }

    img {
      width: 12px;
      height: 12px;
    }
  </style>
</head>

<body >

<div id="select_media" style="padding:2px;background-color: black;color:white;
     width: 250px;">
  <table>
    <tr>

      <td valign="top">
                <div class='select'>


        <table>
          <tr>
            <td>
              <img src="/images/camera.png" />
            </td>
            <td>
              <video muted autoplay style="width: 208px;height: 200px;"></video> 
              <select id='videoSource' style="width: 208px;"></select>
            </td>
          </tr>

          <tr>
            <td>
             <img src="/images/microphone.png" />
            </td>
            <td>
              <select id='audioSource' style="width: 208px;"></select>
              <br/>
              <canvas id="test" style="background-color: black; 
                      width:208px;height: 10px;" ></canvas>              
            </td>            
          </tr>

<!--          <tr>
            <td>
              <img src="/images/speaker.png" />
            </td>
            <td>
              <select id='audioSource' style="width: 208px;"></select>
            </td>
          </tr>-->

          <tr>
            <td valign="top">
              <img src="/images/speaker.png" />
            </td>
            <td>
              <span id="playtestsound" onclick="playtestsound('audio1', 'play');" 
                    style="cursor:pointer;">Play test sound</span>
                    <br/>


            </td>            
          </tr>
        </table>





        </div>
      </td>

      <td>

      </td>
    </tr>

  </table>

</div>  

    <audio id="audio1" src="/audio/Phone.wav" controls preload="auto" 

           autobuffer
           style="display: none;">
        Your browser not supported
    </audio>

</body>

  <script type="text/javascript">
    var videoElement = document.querySelector("video");
    var audioSelect = document.querySelector("select#audioSource");
    var videoSelect = document.querySelector("select#videoSource");
    var startButton = document.querySelector("button#start");

    var canvasContext=document.getElementById("test");

    navigator.getUserMedia = navigator.getUserMedia ||
      navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

    function gotSources(sourceInfos) {
      for (var i = 0; i != sourceInfos.length; ++i) {
        var sourceInfo = sourceInfos[i];
        var option = document.createElement("option");
        option.value = sourceInfo.id;
        if (sourceInfo.kind === 'audio') {
          option.text = sourceInfo.label || 'microphone ' + (audioSelect.length + 1);
          audioSelect.appendChild(option);
        } else if (sourceInfo.kind === 'video') {
          option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
          videoSelect.appendChild(option);
        } else {
          console.log('Some other kind of source: ', sourceInfo);
        }
      }
    }

    if (typeof MediaStreamTrack === 'undefined'){
      //alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
    } else {
      MediaStreamTrack.getSources(gotSources);
    }


    function successCallback(stream) {                  
      window.audioContext = new webkitAudioContext();
      window.analyser = window.audioContext.createAnalyser();
      window.microphone = window.audioContext.createMediaStreamSource(stream );
      window.javascriptNode = window.audioContext.createScriptProcessor(2048, 1, 1);

      window.analyser.smoothingTimeConstant = 0.3;
      window.analyser.fftSize = 1024;

      microphone.connect(analyser); 
      window.analyser.connect(window.javascriptNode);
      javascriptNode.connect(window.audioContext.destination);

      //canvasContext = document.getElementById("test");
      canvasContext= canvasContext.getContext("2d");

      window.javascriptNode.onaudioprocess = function() {
        var array =  new Uint8Array(window.analyser.frequencyBinCount);
        window.analyser.getByteFrequencyData(array);
        var values = 0;

        var length = array.length;
        for (var i = 0; i < length; i++) {
            values += array[i];
        }

        var average = values / length;
        canvasContext.clearRect(0, 0, 300, 130);        
        canvasContext.fillStyle = '#00ff00';
        canvasContext.fillRect(average,0,50,130);

        console.log('>>> ' , average);
      };



      window.stream = stream; // make stream available to console
      videoElement.src = window.URL.createObjectURL(stream);
      videoElement.play();





    }

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

    function start(){
      if (!!window.stream) {
        videoElement.src = null;
        window.stream.stop();
      }
      var audioSource = audioSelect.value;
      var videoSource = videoSelect.value;
      var constraints = {
        audio: {
          optional: [{sourceId: audioSource}]
        },
        video: {
          optional: [{sourceId: videoSource}]
        }
      };
      navigator.getUserMedia(constraints, successCallback, errorCallback);
    }

    function playtestsound(soundobj,todo) {
      var thissound=document.getElementById(soundobj);
      switch(todo) {
        case 'play':
          thissound.volume=0.20;
          thissound.play();
          break;
        case 'stop':
          thissound.pause();        
          break;
      }
    }

    audioSelect.onchange = start;
    videoSelect.onchange = start;

    start();
  </script>

</html>

Answer 1

这似乎是来自Chrome / Canary的BUG。

在我的OSX 10.9.5中，麦克风处于活动状态但无法正常工作，当我进入OSX控制面板并立即更改麦克风音量时，它开始工作。

enter image description here

什么导致我的可视化工具根本不移动甚至麦克风被捕获？

1 个答案: