uniapp实现h5录音功能

前段时间有个需求是将小程序转换成h5，然后uni.getRecorderManager()就自然而然的不能用了，最后通过网上忘了是哪找的文章加上自己修修改改的使用navigator解决了这个问题

附代码：

<template>
  <view class="recorder"> </view>
</template>

<script>
export default {
  data() {
    return {
      isUserMedia: false, //false 代表初始化失败 true 成功
      stream: null,
      audio: null,
      recorder: null,
      chunks: [],
      startTime: 0,
    };
  },
  //判断兼容问题和https并初始化
  mounted() {
    /**
     * 	error 事件的返回状态
     * 	100: 请在HTTPS环境中使用
     * 	101: 浏览器不支持
     *  201: 用户拒绝授权
     *  500: 未知错误
     * */
    if (window.location.origin.indexOf("https") === -1) {
      this.$emit("error", "100");
      throw "请在 https 环境中使用本插件。";
    }
    // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
    if (navigator.mediaDevices === undefined) {
      navigator.mediaDevices = {};
    }

    // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
    // 因为这样可能会覆盖已有的属性。这里我们只会在没有 getUserMedia 属性的时候添加它。
    if (navigator.mediaDevices.getUserMedia === undefined) {
      navigator.mediaDevices.getUserMedia = function (constraints) {
        // 首先，如果有 getUserMedia 的话，就获得它
        var getUserMedia =
          navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

        // 一些浏览器根本没实现它 - 那么就返回一个 error 到 promise 的 reject 来保持一个统一的接口
        if (!getUserMedia) {
          this.$emit("error", "101");
          throw "当前浏览器不支持";
        }

        // 否则，为老的 navigator.getUserMedia 方法包裹一个 Promise
        return new Promise(function (resolve, reject) {
          getUserMedia.call(navigator, constraints, resolve, reject);
        });
      };
    }
    this.getRecorderManager();
  },
  methods: {
    //获取录音管理器并初始化
    getRecorderManager() {
      this.audio = document.createElement("audio");
      navigator.mediaDevices
        .getUserMedia({ audio: true })
        .then((stream) => {
          console.log(stream.getTracks());
          this.isUserMedia = true;
          stream.getTracks().forEach((track) => {
            track.stop();
          });
        })
        .catch((err) => {
          this.onErrorHandler(err);
        });
    },
    start() {
      if (!this.isUserMedia) return console.log("设备不支持");
      //开始录制 初始化录音控件
      navigator.mediaDevices
        .getUserMedia({ audio: true })
        .then((stream) => {
          this.startTime = new Date().getTime();
          this.stream = stream;
          this.recorder = new MediaRecorder(stream);
          this.recorder.ondataavailable = this.getRecordingData;
          this.recorder.onstop = this.saveRecordingData;
          this.recorder.start();
        })
        .catch((err) => {
          this.onErrorHandler(err);
        });
    },
    stop() {
      this.recorder && typeof this.recorder.stop === 'function' && this.recorder.stop();
      this.recorder && typeof this.recorder.getTracks === 'function' && this.stream.getTracks().forEach((track) => {
        track.stop();
      });
    },
    getRecordingData(e) {
      this.chunks.push(e.data);
    },
    saveRecordingData() {
      const blob = new Blob(this.chunks, { type: "audio/mpeg" }),
        localUrl = URL.createObjectURL(blob);

      const endTime = new Date().getTime();

      let duration = (endTime - this.startTime).toString().split("");
      duration.splice(duration.length - 2);
      duration.splice(duration.length - 1, 0, ".");
      duration = parseFloat(duration.join(""));

      const recorder = {
        data: blob,
        duration: duration,
        localUrl: localUrl,
      };
      this.$emit("success", recorder);
    },
    //返回的报错信息
    onErrorHandler(err) {
      console.log(err);
      if (err.name === "NotAllowedError") {
        this.$emit("error", "201");
        throw "用户拒绝了当前的浏览器实例的访问请求";
      }

      if (err.name === "NotReadableError") {
        this.$emit("error", "101");
        throw "当前浏览器不支持";
      }
      this.$emit("error", "500");
      throw `调用失败，${err}`;
    },
  },
  destroyed() {
    this.stop();
  },
};
</script>
<style></style>