vue-recorder实现录音功能报错问题如何解决？

• Z时代
• 2024-02-07
• 分类：IT

开始录音事件，// new Recorder(stream) 报错 TypeError: vue_recorder_WEBPACK_IMPORTED_MODULE_5_.default is not a constructor

vue

<template>
  <div>
    <button @click="startRecording" :disabled="isRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
  </div>
</template>
<script>
import { Recorder } from 'vue-recorder';
export default {
  data() {
    return {
      isRecording: false,
      mediaRecorder: null,
      chunks: [],
    };
  },
  methods: {
    startRecording() {
      this.chunks = [];
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then((stream) => {
          // new Recorder(stream) 报错 TypeError: vue_recorder_WEBPACK_IMPORTED_MODULE_5_.default is not a constructor
          this.mediaRecorder = new Recorder(stream);
          this.mediaRecorder.start();
          this.isRecording = true;
          this.mediaRecorder.ondataavailable = (event) => {
            this.chunks.push(event.data);
          };
        })
        .catch((error) => {
          console.error('Error accessing microphone:', error);
        });
    },
    stopRecording() {
    },
  },
};

回答：

首先 浏览器版本是否过低
其次 默认是在localhost、file和https 域下使用，就是http://localhost 、file://xxxx、https://xxxxxx才能使用
可以参考一下mdn关于这个api的描述与注意事项
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices...

以上是 vue-recorder实现录音功能报错问题如何解决？ 的全部内容， 来源链接： utcz.com/p/934833.html