monaco-recorder

<!-- 
  CDN方式引入

  window.monacoRecorder
  window.monacoPlayer
-->
<script src="/player.umd.js"></script>
<script src="/recorder.umd.js"></script>

<!-- es module -->
<!-- npm install monaco-recorder -->
<script lang="ts">
import {
  Monitor, // 监视器
  Memorizer, // 存储器
  Recorder, // 记录器 <完整的 事件监听|存储上传|直播 方案>
  Player, // 播放器
} from 'monaco-recorder'

import type {
  EditorFileItem,
  File,
  InitData,
  MonacoEditor,
  MonacoEvent,
  MonacoEventType,
  RecorderOptions
} from 'monaco-recorder'

</script>

<script>
Vue.createApp({
  // ...

  async mounted() {
    // import { Recorder as monacoRecorder } from 'monaco-recorder'
    // window.monacoRecorder
    this.recorder = monacoRecorder.getInstance()
  },
  unmounted() {
      // 卸载关闭直播
      if (this.recordId) {
        axios.post("/stopRecord?id=" + this.recordId);
      }
  },
  methods: {
    async loadFiles() {
        this.files = await request
          .get(`/xxxx`)

        // 监听文件列表变化
        this.recorder.changeFileList(this.files.filter(i => i.objectType !== 'root').map(i => ({
          id: i.name,
          name: i.name,
          type: i.objectType,
        })))
    },

    openFile(file) {
      // ...
      //  const editor = createEditor(file._editor, file._content, lang, {})
      // 监听该文件
      editor.then(r => monacoRecorder.open(file.name, r, lang))
    },
    closeTab(tab) {
      // ...
      // close file
      monacoRecorder.close(tab.id)
    },

    start(recordId = "fullstack_" + Date.now()) {
      if (this.recorder.recordingStatus) return;

      var recordName = prompt('发起直播，请输入名称');
      if (recordName) {
          return
      }

      // 创建录像
      axios.post("/postRecord", {
          record_id: recordId,
          name: trecordName,
          type: 'fullstack',
          live: 1
      });
      var fileList = this.files.filter(i => i.objectType !== 'root').map(i => ({
          id: i.name,
          name: i.name,
          type: i.objectType,
      }))
      var categories = JSON.parse(JSON.stringify(this.categories));

      this.recorder.initialize({
          id: recordId,
          name: trecordName,
          initData: {
              categories,
              fileList,
          },
          pushEventApi(data) {
              console.log(data)
              const result = data.map(i => {
                  return {
                      record_id: i.record_id,
                      order: i.order,
                      json: JSON.stringify(i)
                  }
              })
              return axios.post("/postEvent", result);
          },
          memorizerConfig: {
              maxTotal: 100,
              interval: 1000
          },
      })
  },
  stop() {
      if (this.recorder?.recordingStatus) {
          axios.post("/stopRecord?id=" + this.recorder.recordId);
      }
      this.recorder?.dispose()
      this.recorder = monacoRecorder.getInstance()
  }

  }
})

</script>

<script>
async mounted() {
  // import { Player as monacoPlayer } from 'monaco-recorder'
  // window.monacoPlayer

  this.player = new monacoPlayer(monaco, (id, content, lang) => {
      return new Promise(resolve => {
          // monaco的dom出现晚一点
          this.$nextTick(() => {
              resolve(createEditor(this.player.getDom(id), content, lang, {onChangeContent() { } }))
          })
      })
  })

    const qs = new URLSearchParams(location.search);
    this.recordId = qs.get("id");
    var isLive = qs.get("live") === 'true';

    const data = (await axios.get("/getRecord?id=" + this.recordId)).data
    // this.player.bindExport((event, isInverse) => {
    //     console.log(event, isInverse)
    // })
    this.player.load(data)

    // 自动播放
    this.player.play();

    if (isLive) {
        this.player.createPoll((order) => {
            return axios.get('/pollRecord', {
                params: {
                    id: this.recordId,
                    order
                }
            }).then(res => {
                return res.data
            })
        });
    }

    // 加载分类
    this.categories = this.player?.other?.categories;

},

</script>