首页 > 解决方案 > MediaRecorder 以 video/webm 格式记录而不是 audio/webm

问题描述

在 ReactJS 中,我使用 MediaRecorder 通过以下代码从麦克风录制音频:

getUserMedia({ audio: true })
      .then(stream => {
        this.stream = stream;
        const mime = ['audio/wav', 'audio/mpeg', 'audio/webm', 'audio/ogg']
          .filter(MediaRecorder.isTypeSupported)[0];
        this.mediaRecorder = new MediaRecorder(stream, {
          mimeType: mime
        });
        console.log('MIME: ', mime);
        this.mediaRecorder.start();
        const audioChunks = [];
        this.mediaRecorder.addEventListener('dataavailable', event => {
          audioChunks.push(event.data);
        });

        this.mediaRecorder.addEventListener('stop', () => {
          const audioBlob = new Blob(audioChunks, {
            type: mime});
       });
      }).catch(error => { });

在我的控制台中,我得到了MIME: audio/webm. 我将此 blob 存储到 S3 存储桶,但是当我下载此文件时,文件的类型将更改为WebM video (video/webm).

知道为什么即使在给出正确的 mime 类型之后也将其视为视频文件。我在 Chrome 和 Firebox 浏览器中都试过了。

标签: amazon-s3audioblobmediarecordergetusermedia

解决方案


推荐阅读