streamproc / MediaStreamRecorder

Cross browser audio/video/screen recording. It supports Chrome, Firefox, Opera and Microsoft Edge. It even works on Android browsers. It follows latest MediaRecorder API standards and provides similar APIs.
https://www.webrtc-experiment.com/msr/
MIT License
2.62k stars 563 forks source link

audio-only recording does not work #151

Open varenc opened 6 years ago

varenc commented 6 years ago

See #131. The demo for audio recording simply doesn't work: https://www.webrtc-experiment.com/msr/audio-recorder.html

Checking out the project and running it directly also doesn't work. This project appears pretty prominently in search results but it's wasting a lot of time when it's non-functional. Details in #131

muaz-khan commented 6 years ago

Please try this (WebAudio based recording):

mediaRecorder = new MediaStreamRecorder(stream);

mediaRecorder.recorderType = StereoAudioRecorder;
mediaRecorder.mimeType = 'audio/wav';
mediaRecorder.audioChannels = 2;

mediaRecorder.ondataavailable = function(blob) {
    var url = URL.createObjectURL(blob);
    window.open(url);
};

mediaRecorder.start(5 * 1000);

@varenc @itdpong

itdpong commented 6 years ago

hi all, the following script is work in my case,

mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'audio/wav';

mediaRecorder.ondataavailable = function(blob) {
    var url = URL.createObjectURL(blob);
    console.log(url);
};

mediaRecorder.start(5 * 1000);

Question:

  1. so is that mean only audio/wav is work rather than audio/webm???
  2. I am using msr with vue.js in a component. the following script will return error 'media error ReferenceError: StereoAudioRecorder is not defined', are there any require method like require('StereoAudioRecorder'); I should do???(this is my first project using vue, webpack, so I am not sure this is the msr problem or my problem) mediaRecorder.recorderType = StereoAudioRecorder;
  3. 'window.open(url);' seems not work with a ObjectURL
muaz-khan commented 6 years ago

To enable audio/webm recording, please make sure that you're passing audio-only stream. That stream must not have any video track. Here is a quick solution for audio/webm (audio/ogg on Firefox):

var audioOnlyStream = new MediaStream();

// get only audio tracks from the main stream object
cameraStream.getAudioTracks().forEach(function(track) {
    audioOnlyStream.addTrack(track);
});

// pass "audio-only-stream" instead of cameraStream
mediaRecorder = new MediaStreamRecorder(audioOnlyStream);
mediaRecorder.mimeType = 'audio/webm'; // or audio/ogg

mediaRecorder.ondataavailable = function(blob) {
    var url = URL.createObjectURL(blob);
    console.log(url);
};

mediaRecorder.start(5 * 1000);