javascript - control - video dom events

Cómo capturar audio en javascript?

Question

Actualmente estoy usando getUserMedia() , que solo funciona en Firefox y Chrome, pero quedó obsoleto y solo funciona en https (en Chrome). ¿Hay alguna otra forma mejor de obtener la entrada de voz en JavaScript que funcione en todas las plataformas?

Por ejemplo, ¿cómo los sitios web como la aplicación web.whatsapp.com graban audio? getUserMedia() solicita a los usuarios primerizos que permitan la grabación de audio, mientras que la aplicación Whatsapp no ​​requiere el permiso del usuario.

El getUserMedia() que estoy usando se ve así:

navigator.getUserMedia(
    {
        "audio": {
            "mandatory": {
                "googEchoCancellation": "false",
                "googAutoGainControl": "false",
                "googNoiseSuppression": "false",
                "googHighpassFilter": "false"
            },
            "optional": []
        },
    }, gotStream, function(e) {
        console.log(e);
    });

Answer 1

getUserMedia() no está en desuso, está en desuso y lo está usando en http . Hasta donde sé, el único navegador que requiere https para getUserMedia() ahora es Chrome, lo que creo que es el enfoque correcto.

Si quiere ssl/tls para su prueba, puede usar la versión gratuita de CloudFlare.

La página de Whatsapp no ​​proporciona ninguna función de grabación, solo le permite iniciar la aplicación.

Buen artículo sobre getUserMedia

Ejemplo completamente funcional con el uso de MediaRecorder

Answer 2

Recorder JS hace el trabajo fácil para ti. Funciona con los nodos de la API de Web Audio

Chrome y Firefox Browsers han evolucionado ahora. Hay una API MediaRecoder incorporada que hace la grabación de audio por usted.

navigator.mediaDevices.getUserMedia({audio:true})
    .then(stream => {
        rec = new MediaRecorder(stream);
        rec.ondataavailable = e => {
            audioChunks.push(e.data);
            if (rec.state == "inactive"){
               // Use blob to create a new Object URL and playback/download
            }
        }
    })
    .catch(e=>console.log(e));

Demostración de trabajo

MediaRecoder compatibilidad con MediaRecoder comienza desde

Soporte de Chrome: 47

Soporte de Firefox: 25.0

Answer 3

Chrome requiere el uso de https , ya que getUserMedia es una característica poderosa. El acceso a la API no debería funcionar en dominios no seguros, ya que el acceso a la API puede desbordarse a actores no seguros. Sin embargo, Firefox aún soporta getUserMedia sobre http .

He estado usando RecorderJS y sirvió bien a mis propósitos. Aquí hay un ejemplo de código. ( fuente )

function RecordAudio(stream, cfg) {

  var config = cfg || {};
  var bufferLen = config.bufferLen || 4096;
  var numChannels = config.numChannels || 2;
  this.context = stream.context;
  var recordBuffers = [];
  var recording = false;
  this.node = (this.context.createScriptProcessor ||
    this.context.createJavaScriptNode).call(this.context,
    bufferLen, numChannels, numChannels);

  stream.connect(this.node);
  this.node.connect(this.context.destination);

  this.node.onaudioprocess = function(e) {
    if (!recording) return;
    for (var i = 0; i < numChannels; i++) {
      if (!recordBuffers[i]) recordBuffers[i] = [];
      recordBuffers[i].push.apply(recordBuffers[i], e.inputBuffer.getChannelData(i));
    }
  }

  this.getData = function() {
    var tmp = recordBuffers;
    recordBuffers = [];
    return tmp; // returns an array of array containing data from various channels
  };

  this.start() = function() {
    recording = true;
  };

  this.stop() = function() {
    recording = false;
  };
}

El uso es directo:

var recorder = new RecordAudio(userMedia);
recorder.start();
recorder.stop();
var recordedData = recorder.getData()

Editar: es posible que también desee verificar esta respuesta si nada funciona.