在方法

Question

我正在创建使用getUserMedia的类。在方法startRecording()中，我试图声明/重新声明一个空数组this.recordedBlobs = [];，该数组应保存媒体流中记录的数据。 应该通过调用方法this.mediaRecorder.ondataavailable在this.handleDataAvailable事件上添加数据。但是this.handleDataAvailable不断抛出错误

Uncaught ReferenceError: recordedBlobs is not defined
at MediaRecorder.handleDataAvailable

整个类如下：

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);
    }
}

有人知道为什么handleDataAvailable无法访问this.recordedBlobs。 任何帮助表示赞赏。

这是构造函数：

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

这并不是真正的重复，因为在handleDataAvailable()方法中我可以访问this，但是this的值仅包含MediaRecorder对象。

Answer 1

在构造方法中，尝试使用空数组初始化

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