js怎么实现屏幕录制
使用MediaDevices和MediaRecorder API
在JavaScript中，可以通过navigator.mediaDevices.getDisplayMedia获取屏幕内容，再结合MediaRecorder录制视频流。
async function startRecording() {
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const recorder = new MediaRecorder(stream);
const chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'recording.webm';
a.click();
};
recorder.start();
// 停止录制示例：recorder.stop();
}添加音频轨道
若需同时录制麦克风音频，需合并屏幕和音频流：
async function recordWithAudio() {
const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
const combinedStream = new MediaStream([
...screenStream.getVideoTracks(),
...audioStream.getAudioTracks()
]);
const recorder = new MediaRecorder(combinedStream);
// 其余逻辑同上
}处理权限和兼容性
屏幕录制需用户明确授权，且仅在HTTPS或localhost环境下可用。检测兼容性：
if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
console.error('Screen recording not supported');
}使用第三方库简化流程
库如recordRTC可简化复杂操作：
import RecordRTC from 'recordrtc';
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const recorder = new RecordRTC(stream, { type: 'video' });
recorder.startRecording();
// 停止录制
recorder.stopRecording(() => {
const blob = recorder.getBlob();
// 处理blob
});注意事项
- 录制前需用户交互（如按钮点击），浏览器禁止自动启动。
- 不同浏览器支持的视频编码可能不同（如Chrome用
video/webm，Safari用video/mp4）。 - 长时间录制需注意内存管理，可分段保存。
