安装使用

npm install monaco-recorder

命令

// 打包
npm run build

// 测试
npm run test

发布

npm login
npm publish

模块

<!-- 
  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>

录制控制

import { Recorder } from "monaco-recorder";
import request from "@/utils/request";
import dayjs from "dayjs";

// 录制状态
const recorderStatus = ref(false);
const start = () => {
  Recorder.start(
    {
      id: "Pages_" + dayjs().format("HH:mm"),
      fileList: pageStore.list.map((i) => ({ id: i.id, name: i.name })),
      postRecordApi(data: any) {
        console.log(data);
        return request.post("http://localhost:2247/", data, undefined, {
          hiddenLoading: true,
        });
      },
      pushEventApi(data: any) {
        console.log(data);
        return request.post("http://localhost:2247/", data, undefined, {
          hiddenLoading: true,
        });
      },
      memorizerConfig: {
        maxTotal: 15,
      },
    },
    () => {
      recorderStatus.value = true;
    }
  );
};

const stop = () => {
  Recorder.stop(() => {
    recorderStatus.value = false;
  });
};

编辑器监听

// use
<MonacoEditor
  ref="editor"
  v-model="model.body"
  language="html"
  k-script
  @open="recorder?.open(props.id, ($event as any))"
  @close="recorder?.close(props.id)"
/>

// MonacoEditor
const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
  (e: "open", value: monacoTypes.editor.IStandaloneCodeEditor): void;
  (e: "close"): void;
}>();


onMounted(async () => {
  // ...
  // editor = monaco.editor.create(...);
  readyCompleter.resolve(null);
  emit("open", editor);
});

onUnmounted(() => {
  model?.dispose();
  emit("close");
});