1.7.1 • Published 4 months ago
monaco-recorder-beta v1.7.1
安装使用
npm install monaco-recorder-beta
命令
// 打包
npm run build
// 生成文档
npm run doc
// 测试
npm run test
发布
npm login
npm publish
CDN方式引入
监视器
<script src="/recorder.js"></script>
<script>
// const {Memorizer, Monitor, Recorder} = monacoRecorder;
Vue.createApp({
// ...
async mounted() {},
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.Recorder.open(file.name, r, lang))
},
closeTab(tab) {
// ...
// close file
monacoRecorder.Recorder.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.Recorder.getInstance()
}
}
})
</script>
播放器
<script src="/recorder.js"></script>
<script>
async mounted() {
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-beta";
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");
});
1.7.1
4 months ago
1.7.0
2 years ago
1.6.9
2 years ago
1.6.8
2 years ago
1.6.7
2 years ago
1.6.6
2 years ago
1.6.5
2 years ago
1.6.2
2 years ago
1.6.1
2 years ago
1.6.0
2 years ago
1.5.0
2 years ago
1.4.7
2 years ago
1.4.5
2 years ago
1.4.4
2 years ago
1.4.3
2 years ago
1.4.2
2 years ago
1.4.1
2 years ago
1.4.0
2 years ago
1.3.8
2 years ago
1.3.7
2 years ago
1.3.6
2 years ago
1.3.5
2 years ago
1.3.4
2 years ago
1.3.3
2 years ago
1.3.2
2 years ago
1.3.1
2 years ago
1.3.0
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago