VUE写法HTML+PLUS.录音及视频

<template>
  <div>
    <div>
      <h1>Runtime supports 5+ Plus?</h1>
      <p id="checked">checking...</p>
      <audio ref="recordPlayer" controls src="" />
      <div></div>
      <el-button size="small" @click="startRecord()">开始1</el-button>
      <el-button size="small" @click="stopRecord()">结束</el-button>
      <el-button size="small" @click="bfRecord()">播放</el-button>
      <el-button size="small" @click="tzbfRecord()">停止播放</el-button>
      <br />
      <el-button size="small" @click="paiZhaoFun()">打开摄像头</el-button>
      <el-button size="small" @click="sxtStop()">关闭摄像头</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      r: null,
      sxt: null,
      amrUrl: null,
      mp3: null
    }
  },
  mounted() {
    console.log(666)
    // 判断runtime是否支持5+ API
    if (navigator.userAgent.indexOf("Html5Plus") < 0) { // 不支持5+ API
      checked("不支持5+ API");
    } else { // 支持5+ API
      checked("支持5+ API");
    }
    // 输出检测结果
    function checked(ret) {
      if (document.body) {
        document.getElementById("checked").innerText = ret;
      } else {
        document.addEventListener("DOMContentLoaded", function () {
          document.getElementById("checked").innerText = ret;
        }, false);
      }
    }

    // 扩展API加载完毕后调用onPlusReady回调函数
    this.$nextTick(() => {
      setTimeout(() => {
        document.addEventListener("plusready", this.onPlusReady(), false);
      }, 1000)
    });
    // 扩展API加载完毕，现在可以正常调用扩展API
  },
  methods: {
    onPlusReady() {
      this.r = plus.audio.getRecorder();
      this.sxt = plus.camera.getCamera();
    },
    startRecord() {
      if (this.r == null) {
        alert("Device not ready!");
        return;
      }
      this.r.record({ filename: "_doc/audio/" }, (res) => {
        console.log(res, '录音成功')
        this.amrUrl = res
        console.log(this.amrUrl)
      }, (e) => {
        alert("录音失败: " + e.message);
      });
    },
    stopRecord() {
      this.r.stop();
    },
    bfRecord() {
      console.log(this.amrUrl)
      this.mp3 = plus.audio.createPlayer(this.amrUrl);
      this.mp3.play(function () {
        console.log('播放成功')
      }, function (e) {
        console.log("播放失败：" + e.message);
      });
    },
    tzbfRecord() {
      this.mp3.close()
    },
    paiZhaoFun() {
      var res = this.sxt.supportedVideoResolutions[0];
      this.sxt.startVideoCapture((path) => {
        console.log(path, '打开了')
      }, (error) => {
        console.log(error.message, '摄像头错误')
      }, { resolution: res, format: '_doc/audio/' }
      );
    },
    sxtStop() {
      this.sxt.stopVideoCapture();
    }
  }
}

</script>

``