declaring empty array variable inside method

Question

I am creating class to use getUserMedia. Inside method startRecording() I am trying to declare/redeclare an empty array this.recordedBlobs = []; which should hold recorded data from media stream. The data is supposed to be added on this.mediaRecorder.ondataavailable event, by calling method this.handleDataAvailable. But this.handleDataAvailable keeps throwing error

Uncaught ReferenceError: recordedBlobs is not defined
at MediaRecorder.handleDataAvailable

The whole part of class look like this:

startRecording() {
    this.snapshotButton.disabled = true;
    this.sendButton.disabled = true;
    this.stopButton.disabled = false;
    this.recordButton.textContent = 'Pause';

    this.recordedBlobs = [];
    let options = {mimeType: 'video/webm;codecs=vp9'};
    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
        console.error(`${options.mimeType} is not Supported`);
        options = {mimeType: 'video/webm;codecs=vp8'};
        if (!MediaRecorder.isTypeSupported(options.mimeType)) {
            console.error(`${options.mimeType} is not Supported`);
            options = {mimeType: 'video/webm'};
            if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                console.error(`${options.mimeType} is not Supported`);
                options = {mimeType: ''};
            }
        }
    }
    try {
        this.mediaRecorder = new MediaRecorder(window.stream, options);
    } catch (e) {
        console.error('Exception while creating MediaRecorder:', e);
        return;
    }

    console.log('Created MediaRecorder', this.mediaRecorder, 'with options', options);
    this.mediaRecorder.onstop = (event) => {
        console.log('Recorder stopped: ', event);
    };
    this.mediaRecorder.ondataavailable = this.handleDataAvailable;
    this.mediaRecorder.start(10); // collect 10ms of data
    console.log('MediaRecorder started', this.mediaRecorder);
    return this.recordedBlobs;
}
stopRecording() {
    this.mediaRecorder.stop();
    this.recordButton.textContent = 'Start';
    this.snapshotButton.disabled = false;
    this.sendButton.disabled = false;
    this.sendButton.textContent = 'Send Video';
    this.stopButton.disabled = true;
    console.log('Recorded Blobs: ', this.recordedBlobs);
}
handleDataAvailable(event) {
    if (event.data && event.data.size > 0) {
        this.recordedBlobs.push(event.data);
    }
}

Does anyone knows why handleDataAvailable can not access this.recordedBlobs. Any help greatly appreciated.

This is the constructor:

constructor(button, constraints) {
    this.constraints = constraints;
    this.openVideoPanelButton = document.querySelector(button);
    this.openVideoPanelButton.addEventListener('click', async () => {
        this.openVideoPanel();
    });
    console.log('initialized');
}

It is not really duplicate because inside handleDataAvailable() method I am able to access this but the value of this contains only MediaRecorder object

how to add handleDataAvailable into constructor? as a variable pointing to method? — Igor Mizak, Mar 01 '19 at 10:58
here is the whole class so far https://jsfiddle.net/igor77/zkqg27eh/5/ — Igor Mizak, Mar 01 '19 at 11:29
This is a duplicate. Read it again, and try the suggestions in the answer. I think you'll find using `bind` to work well. — Heretic Monkey, Mar 01 '19 at 20:46

score 0 · Answer 1 · answered Mar 01 '19 at 10:54

0

In the constructor method try to initialize with empty Array

constructor(){
    this.recordedBlobs = [];
}

answered Mar 01 '19 at 10:54

Abderrahim Soubai-Elidrisi

5,025
1
26
36

1

when added to constructor now i am getting different error: Uncaught TypeError: Cannot read property 'push' of undefined at MediaRecorder.handleDataAvailable – Igor Mizak Mar 01 '19 at 11:00

declaring empty array variable inside method

1 Answers1