浏览器摄像头录像机：直接在浏览器中录制视频

基于浏览器的视频录制

浏览器的 MediaRecorder API（属于 WebRTC 规范的一部分）允许直接从用户的摄像头和麦克风录制音频和视频，无需插件或额外软件。这一能力支持多种应用：视频消息、屏幕录制工具、远程面试等。

MediaRecorder 的工作原理

录制过程涉及多个 Web API 协同工作：

1. 请求摄像头访问

const stream = await navigator.mediaDevices.getUserMedia({
  video: { width: 1280, height: 720 },
  audio: true
});

浏览器会提示用户授予权限。返回的 MediaStream 包含视频和音频轨道。

2. 显示预览

const videoElement = document.querySelector('video');
videoElement.srcObject = stream;
videoElement.play();

实时摄像头画面直接附加到 video 元素上，实现实时预览。

3. 录制

const chunks = [];
const recorder = new MediaRecorder(stream, {
  mimeType: 'video/webm;codecs=vp9,opus'
});

recorder.ondataavailable = (e) => chunks.push(e.data);
recorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  downloadLink.href = url;
};

recorder.start(1000); // 每 1 秒收集一次数据

4. 停止并下载

recorder.stop();
stream.getTracks().forEach(track => track.stop()); // 释放摄像头

视频格式与编解码器

MediaRecorder 支持的格式因浏览器而异：

为获得最大兼容性，请检查支持情况并使用最佳可用格式：

const mimeTypes = [
  'video/webm;codecs=vp9,opus',
  'video/webm;codecs=vp8,opus',
  'video/webm',
  'video/mp4'
];
const mimeType = mimeTypes.find(m => MediaRecorder.isTypeSupported(m));

视频分辨率与质量设置

摄像头约束允许指定偏好的视频质量：

const constraints = {
  video: {
    width: { ideal: 1920, max: 3840 },  // 最高 4K，偏好 1080p
    height: { ideal: 1080 },
    frameRate: { ideal: 30, max: 60 },
    facingMode: 'user'  // 移动设备前置摄像头
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
};

这些是提示——浏览器和硬件可能不支持所有请求的设置。

屏幕录制

getDisplayMedia() API 支持录制用户屏幕或特定窗口：

const screenStream = await navigator.mediaDevices.getDisplayMedia({
  video: { mediaSource: 'screen' },
  audio: true  // 系统音频（并非所有平台都支持）
});

组合屏幕和麦克风：

const screenStream = await navigator.mediaDevices.getDisplayMedia({video: true});
const micStream = await navigator.mediaDevices.getUserMedia({audio: true});

const combinedStream = new MediaStream([
  ...screenStream.getTracks(),
  ...micStream.getTracks()
]);

隐私与权限

权限状态

摄像头访问可以是：

• 已授予：用户之前已批准
• 已拒绝：用户阻止了访问
• 提示：将询问用户

检查权限状态

const permission = await navigator.permissions.query({ name: 'camera' });
console.log(permission.state); // 'granted', 'denied', 或 'prompt'

指示器要求

大多数浏览器在摄像头/麦克风激活时会显示录制指示器。这无法被抑制。

HTTPS 要求

摄像头和麦克风访问需要 HTTPS 或 localhost。不安全的 HTTP 网站无法访问这些 API。

使用场景

• 视频消息：类似 Loom 的异步视频消息
• 面试工具：基于浏览器的视频面试
• 内容创作：快速视频片段和社交媒体内容
• 支持工具：录制并分享 bug 复现过程
• 教育：讲座录制和学生提交
• 医疗：远程健康症状记录

使用摄像头录像机工具

我们的工具提供：

1. 摄像头选择——选择前置或后置摄像头，或外接摄像头
2. 分辨率预设——480p、720p 或 1080p
3. 开始/停止录制——带有视觉录制指示器和计时器
4. 暂停和恢复——暂停录制同时保持会话活跃
5. 预览回放——下载前预览录制内容
6. 下载——将录制内容保存为 WebM 文件
7. 处理状态——编码过程中提供清晰反馈

所有录制均在浏览器本地完成——没有视频数据上传到任何服务器。