Question

以下是代码的简历：

var client = new BinaryClient('ws://localhost:9001');
var context = null;
var store_data  = null;
//(.....)
if (!navigator.getUserMedia)
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio:true}, success, function(e) {
    alert('Error capturing audio.');
  });
} else alert('getUserMedia not supported in this browser.');

function success(e) {
      audioContext = window.AudioContext || window.webkitAudioContext;
      context = new audioContext();
      audioInput = context.createMediaStreamSource(e);
      var bufferSize = 2048;
      store_data = context.createScriptProcessor(bufferSize, 1, 1);
      //(...)
}

//(....)
client.on('open', function() {
    console.log("createStream");
    Stream = client.createStream(command_list);
    var recording = false;

    window.startRecording = function() {
      document.getElementById("startbutton").disabled = true;
      document.getElementById("stopbutton").disabled = false;

      recording = true;
      window.Stream.resume();
    }

    window.stopRecording = function() {
      document.getElementById("startbutton").disabled = false;
      document.getElementById("stopbutton").disabled = true;

      recording = false
      //window.Stream.end();
      window.Stream.pause();
    }

    store_data.onaudioprocess = function(e){ //<---line of the error
        if(!recording) return;
        console.log ('recording');
        var left = e.inputBuffer.getChannelData(0);
        window.Stream.write(convertoFloat32ToInt16(left));
      }
//(..events generated from server..)

在Chrome中我的代码工作得很好。在Mozilla中，我总是得到错误＆＃34;存储数据未定义＆＃34;。知道为什么吗？因为我将store_data声明为全局，而当getusermedia为sucess时，值会更改。

Answer 1

在不知道调用success函数的情况下，很难准确说出来，但我相信你希望你的client.on('open')监听器取决于运行的成功函数。

我不知道它将如何影响剩余的省略代码，但我只会在成功函数运行时连接BinaryClient，并且您确定已定义store_data。< / p>

function success() {
  var client = new BinaryClient('ws://localhost:9001');
  var context = null;
  var store_data  = null;

  // do the original success code here

  // now create that listener.
  client.on('open', function() {
    // do original code here
  });
}

// you probably have a line of code that looks like this
navigator.getUserMedia({}, success);

将所有代码移动到成功函数中可能会有效，但它不会很优雅。一旦你有了流程，我建议通过将每个逻辑位分成它自己的函数来重构代码。

Answer 2

是的，这是一场比赛。您的代码必须等到getUserMedia成功并且 open被解雇。

承诺是解决这个问题的好方法：

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

（使用上述polyfill访问所有支持的浏览器中的现代getUserMedia。）

var client = new BinaryClient('ws://localhost:9001');
var context = null;
var store_data  = null;
//(.....)

var haveStoreData = navigator.mediaDevices.getUserMedia({audio:true})
  .then(function(stream) {
    audioContext = window.AudioContext || window.webkitAudioContext;
    context = new audioContext();
    audioInput = context.createMediaStreamSource(stream);
    var bufferSize = 2048;
    return context.createScriptProcessor(bufferSize, 1, 1);
  });

//(....)
client.on('open', function() {
  console.log("opened");

  haveStoreData.then(function(store_data) {
    console.log("createStream");
    Stream = client.createStream(command_list);
    var recording = false;

    window.startRecording = function() {
      document.getElementById("startbutton").disabled = true;
      document.getElementById("stopbutton").disabled = false;

      recording = true;
      window.Stream.resume();
    };

    window.stopRecording = function() {
      document.getElementById("startbutton").disabled = false;
      document.getElementById("stopbutton").disabled = true;

      recording = false;
      //window.Stream.end();
      window.Stream.pause();
    };

    store_data.onaudioprocess = function(e){
      if(!recording) return;
      console.log ('recording');
      var left = e.inputBuffer.getChannelData(0);
      window.Stream.write(convertoFloat32ToInt16(left));
    };
    //(..events generated from server..)
  })
  .catch(function(e) { console.error(e); });
});

这将让用户有时间选择＆＃34;允许＆＃34;在mic权限提示中（与Chrome不同，Firefox每次都会要求用户获得权限，除非他们选择＆＃34;始终允许＆＃34;）。

Answer 3

var client = new BinaryClient('ws://193.136.94.233:9001');
var context = null;
var gain = null;
var store_data  = null;
//(.....)

navigator.mediaDevices.getUserMedia({audio:true}) .then( function(stream){ 
context = new AudioContext(); 
audioInput = context.createMediaStreamSource(stream); 
var bufferSize = 4096; 
store_data = context.createScriptProcessor(bufferSize, 1, 1);
biquadFilter = context.createBiquadFilter();
biquadFilter.type = "lowpass";
biquadFilter.frequency.value = 11500;
biquadFilter.Q.value = 3;

ganho = context.createGain();
ganho.gain.value=0.5;

//audioInput.connect(ganho);//compresso
//ganho.connect(recorder);
//recorder.connect(context.destination); 

audioInput.connect(biquadFilter);
biquadFilter.connect(ganho);
ganho.connect(store_data);
store_data.connect(context.destination); 

store_data.onaudioprocess = function(e){
  if(!recording){
    //console.log("nada faz nada desta vida")
    return; 
 }
  console.log ('recording'); 
  var left = e.inputBuffer.getChannelData(0); 
  Stream.write(convertoFloat32ToInt16(left)); 
} 
  //audioInput.connect(store_data); 
} ) .catch( function(e){ console.log(e) } );

//(...)

client.on('open', function() {
    console.log("opened connection");


    //haveStoreData.then(function(store_data) {
    Stream = client.createStream(command_list);
    //recording = false;
//(........)
);

//Other function

这是使用BinaryJS与Chrome和Mozilla进行流式传输的解决方案。感谢@jib和@Kaiido

变量为null（仅在Mozilla中）

3 个答案: