vue.js/laravel Impossible de définir la propriété 'ondataavailable' de null

Question

Je suis nouveau sur Laravel et vue.js. J'essaie d'utiliser getNavigatorMedia et MediaRecorder. Lors du test, il capture le mediastream mais il semble que le flux ne soit pas transmis aux propriétés que j'ai créées dans l'objet de données, car elles restent nulles. J'ai essayé de créer des variables dans les méthodes réelles, mais cela ne fonctionne pas.

Attached please find my code and below is the reported error. If anyone could point me in the right direction it would be much appreciated. 

Uncaught TypeError: Cannot set property 'ondataavailable' of null 
    at VueComponent.toggleRecording (record:104) 
    at Proxy.boundFn (vue.js:167) 
    at click (eval at makeFunction (vue.js:9252), <anonymous>:2:152) 
    at HTMLButtonElement.invoker (vue.js:1732) 



          
  
 
   
 
    
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.js" type="text/javascript"> </script> 
 
    <script src ="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script> 
 
    <script> 
 

 
    Vue.component('record', { 
 
    template: '#record-template', 
 

 

 
     data: function() { 
 
      return { 
 
       isRecording: false, 
 
       audioRecorder: null, 
 
       recordingData: [], 
 
       dataUrl: '' 
 
      }; 
 
     }, 
 
    methods: 
 
     { 
 
      //method to start and stop the recording process 
 
      toggleRecording: function() { 
 
       var that = this; 
 
       this.isRecording = !this.isRecording; 
 

 
       if (this.isRecording) { 
 
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 
 
        navigator.getUserMedia({ 
 
          audio: true, 
 
          video: false 
 
         }, function(stream) { 
 
          that.stream = stream; 
 
          that.audioRecorder = new MediaRecorder(stream, { 
 
           mimeType: 'audio/webm;codecs=opus', 
 
           audioBitsPerSecond : 96000 
 
          }); 
 

 
          that.audioRecorder.start(); 
 

 
          console.log('Media recorder started'); 
 

 
         }, function(error) { 
 
          alert(JSON.stringify(\t error)); 
 
        }); 
 
       } 
 
       else { 
 
        this.audioRecorder.stop(); 
 
       } 
 

 
        this.audioRecorder.ondataavailable = function(event) { 
 
        that.recordingData.push(event.data); 
 

 
        } 
 
        this.audioRecorder.onstop = function(event) { 
 
        console.log('Data available after MediaRecorder.stop() called'); 
 
        // var audio = document.createElement('audio'); 
 
        // audio.controls = true; 
 

 
        var blob = new Blob(that.recordingData, { type: 'audio/ogg'}); 
 
        that.dataUrl = window.URL.createObjectURL(blob); 
 
        // audio.src = dataUrl; 
 
        console.log("recorder stopped"); 
 
        } 
 

 
      }, 
 

 
      //method to remove a recording that was saved previously 
 
      removeRecording: function() { 
 
       this.isRecording = false; 
 
       this.recordingData = []; 
 
       this.dataUrl = ''; 
 

 
      }, 
 
      //method to start and stop the playback process 
 
      togglePlay: function() { 
 
       var audioElement = document.getElementById("audio"); 
 
       if (audioElement.paused === false) { 
 
        audioElement.pause(); 
 
       } else { 
 
        audioElement.play(); 
 
       } 
 
       // var handleSuccess = function(stream) { 
 
       // if (window.URL) { 
 
       // audioElement.src = window.URL.createObjectURL(stream); 
 
       // } else { 
 
       // audioElement.src = stream; 
 
       // } 
 

 

 

 

 
      }, 
 
      //method to submit the recording to the API using vue-resource 
 
      submitRecording: function() { 
 
      } 
 
     }, 
 

 

 
    }); 
 

 

 
    new Vue({ 
 
     el: '#app' 
 

 

 
    }); 
 

 
    </script>
 
    
<div id="app"> 
 
    <h1>Test</h1> 
 
    <record> 
 
    </record> 
 
    </div> 
 

 
    <template id="record-template"> 
 
    <div> 
 

 
    <button class="button red-button" v-on:click.stop.prevent="toggleRecording"> 
 
    \t <i class="stop icon" v-show="isRecording"></i> 
 
     <span v-show="isRecording">Stop recording</span> 
 
    \t <i class="record icon" v-show="!isRecording"></i> 
 
     <span v-show="!isRecording">Start recording</span> 
 
    </button> 
 

 
    <button id="remove-recording" class="remove-recording" v-if="dataUrl.length > 0" v-on:click.stop.prevent="removeRecording"> 
 
     <i class="remove icon"></i> Delete recording 
 
    </button> 
 

 

 
    <button id="send-recording" class="button green-button" v-if="dataUrl.length > 0"> 
 
     <i class="send icon"></i> Send recording 
 
    </button> 
 

 

 
    <button class="button green-button" v-if="dataUrl.length > 0" v-on:click.stop.prevent="togglePlay"> 
 
     <i class="play icon"></i> Play recording 
 
    </button> 
 
    </div> 
 
    <audio id="audio" preload="auto" v-model="dataUrl"></audio> 
 

 

 
    </template>
 
   
 
  
 
 

 

Answer 1

Javascript, par nature, est asynchrone, ce qui signifie la logique plus tard dans le script n'attend pas la logique précédente pour terminer. Qu'est-ce qui se passe est que vous essayez de se lier à MediaRecorder avant la propriété Vue audioRecorder est même un objet MediaRecorder.

Essayez de déplacer les liaisons d'événements dans le rappel de flux. Cela vous oblige aussi à changer le périmètre de la propriété de ce à que pour les liaisons

function(stream) { 
    that.stream = stream; 
    that.audioRecorder = new MediaRecorder(stream, { 
     mimeType: 'audio/webm;codecs=opus', 
     audioBitsPerSecond : 96000 
    }); 

    // event bindings 
    that.audioRecorder.ondataavailable = function(event) { 
    that.recordingData.push(event.data); 
    } 

    that.audioRecorder.onstop = function(event) { 
    console.log('Data available after MediaRecorder.stop() called'); 
    // var audio = document.createElement('audio'); 
    // audio.controls = true; 

    var blob = new Blob(that.recordingData, { type: 'audio/ogg'}); 
    that.dataUrl = window.URL.createObjectURL(blob); 
    // audio.src = dataUrl; 
    console.log("recorder stopped"); 
    } 

    that.audioRecorder.start(); 

    console.log('Media recorder started'); 
}