getUserMedia and Recorder.js for save blob WAV in SD with PHP

Hello friends, I tried to upload a plugin from Guillem Perez Githud (GitHub - lempere/Recorderjs: A plugin for recording/exporting the output of Web Audio API nodes) to save audio files with getUserMedia and Recorder.js… then send them to a php file that should be saved in the directory where it is hosted (/www), the problem is that it bounds the wav files SaveWav.php resulting from the folder, but if staying temporarily in /tmp to download.

Why this problem occurs?

We code the index hints and saveWav.php:

index.html

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Live input record and playback</title>
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <style type='text/css'>
    ul { list-style: none; }
    #recordingslist audio { display: block; margin-bottom: 10px; }
  </style>
</head>
<body>

  <h1>Recorder.js simple WAV export example</h1>

  <p>Make sure you are using a recent version of Google Chrome, at the moment this only works with Google Chrome Canary.</p>
  <p>Also before you enable microphone input either plug in headphones or turn the volume down if you want to avoid ear splitting feedback!</p>

  <button onclick="startRecording(this);">record</button>
  <button onclick="stopRecording(this);" disabled>stop</button>
  
  <h2>Recordings</h2>
  <ul id="recordingslist"></ul>
  
  <h2>Log</h2>
  <pre id="log"></pre>

  <script>
  function __log(e, data) {
    log.innerHTML += "\n" + e + " " + (data || '');
  }

  var audio_context;
  var recorder;

  function startUserMedia(stream) {
    var input = audio_context.createMediaStreamSource(stream);
    __log('Media stream created.');
    
    input.connect(audio_context.destination);
    __log('Input connected to audio context destination.');
    
    recorder = new Recorder(input);
    __log('Recorder initialised.');
  }

  function startRecording(button) {
    recorder && recorder.record();
    button.disabled = true;
    button.nextElementSibling.disabled = false;
    __log('Recording...');
  }

  function stopRecording(button) {
    recorder && recorder.stop();
    button.disabled = true;
    button.previousElementSibling.disabled = false;
    __log('Stopped recording.');
    
    // create WAV download link using audio data blob
    createDownloadLink();
    
    recorder.clear();
  }

  function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
      var url = URL.createObjectURL(blob);
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');
      var bt = document.createElement('button');
    
      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);
      bt.textContent = "Send post";

      bt.onclick =  function(){ sendWaveToPost(blob); }
      li.appendChild(bt);
    });
  }
function sendWaveToPost(blob) {
  var file2 = new FileReader();
  file2.onloadend = function(e){         
        $.ajax({
          url: "saveWav.php",
          type: "POST",
          data: file2.result,
          processData: false,
          contentType : "text/plain"
        });
      } ;
  file2.readAsDataURL( blob );
}
  window.onload = function init() {
    try {
      // webkit shim
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      window.URL = window.URL || window.webkitURL;
      
      audio_context = new AudioContext;
      __log('Audio context set up.');
      __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
    } catch (e) {
      alert('No web audio support in this browser!');
    }
    
    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
      __log('No live audio input: ' + e);
    });
  };
  </script>

  <script src="recorder.js"></script>
</body>
</html>

saveWav.php

<?php
   if( isset($HTTP_RAW_POST_DATA))
   {
      $cad = $HTTP_RAW_POST_DATA;

      $date = date("d-m-Y H:i:s");
      $stringas = explode(":",$cad);
      $type = explode(";", $stringas[1]);
      $base = explode(",", $type[1]);
      $base64 = $base[1];
      print_r ( $base64 );

      $myFile = "grab.".$date.".wav";
      $fh = fopen($myFile, 'w');
      fwrite($fh, base64_decode($base64));
   }
?>

Thanks for your help !

Since the PHP code is from GitHub - lempere/Recorderjs: A plugin for recording/exporting the output of Web Audio API nodes, you should better ask its author

Thanks for your help, but the problem is not with the code, the problem is with the php.ini that is installed in version 5.4 with PHP opkg, I've tested the code on a remote server without any problem, but when uploading files to the sd card, and place them in the (/ sd / arduino / www), the file does not receive the saveWav.php bob sent by the index html, so I think the problem lies in the php.ini that is in the Arduino YUN, that's why I wonder if they know how to fix this situation.

Hi!! i just would like to ask if you were to solve this problem..
Were you able to save the blob in the arduino sd successfully??
I've got similar problem to yours so I am hoping I can get some idea to you if you got this covered :slight_smile:

Try absolute path;-

relative path:

$myFile = "grab.".$date.".wav";

absolute path:

$myFile = "/mnt/sda1/grab.".$date.".wav";