当前位置：首页 > JavaScript

js实现录像

2026-03-14 03:31:19JavaScript

使用MediaDevices API录制视频

在浏览器中实现录像功能可以通过navigator.mediaDevices.getUserMedia获取摄像头权限，结合MediaRecorder API完成录制。以下是基础实现代码：

const startRecording = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: 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 videoUrl = URL.createObjectURL(blob);
    document.getElementById('preview').src = videoUrl;
  };

  recorder.start();
  setTimeout(() => recorder.stop(), 5000); // 录制5秒
};

处理录制格式与参数

MediaRecorder支持多种格式配置，可通过mimeType指定编码格式。常见配置如下：

const options = {
  mimeType: 'video/webm;codecs=vp9',
  audioBitsPerSecond: 128000,
  videoBitsPerSecond: 2500000
};
const recorder = new MediaRecorder(stream, options);

支持的格式可通过MediaRecorder.isTypeSupported()检测：

if(MediaRecorder.isTypeSupported('video/mp4')) {
  console.log('MP4 supported');
}

实现分段录制与下载

对于长时间录制，建议采用分段存储。以下代码实现分片录制与下载功能：

let mediaRecorder;
let recordedChunks = [];

const handleDataAvailable = (event) => {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
};

const downloadRecording = () => {
  const blob = new Blob(recordedChunks, {type: 'video/webm'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'recording.webm';
  a.click();
  URL.revokeObjectURL(url);
};

添加可视化效果

通过Canvas可以实时处理视频帧，添加滤镜或分析功能：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const processFrame = (videoElement) => {
  ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  // 对imageData.data进行像素处理
  ctx.putImageData(imageData, 0, 0);
  requestAnimationFrame(() => processFrame(videoElement));
};

跨浏览器兼容方案

不同浏览器对媒体格式支持存在差异，推荐使用适配方案：

const getSupportedMimeType = () => {
  const types = [
    'video/webm;codecs=vp9',
    'video/webm;codecs=vp8',
    'video/webm;codecs=h264',
    'video/mp4;codecs=h264'
  ];
  return types.find(type => MediaRecorder.isTypeSupported(type)) || 'video/webm';
};

错误处理与权限管理

需要处理用户拒绝权限或设备不可用情况：

try {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { width: 1280, height: 720 },
    audio: true
  });
} catch (err) {
  console.error('Error accessing media devices:', err);
  if (err.name === 'NotAllowedError') {
    alert('Permission denied');
  }
}

扩展功能实现

结合WebSocket可实现实时流传输：

js实现录像

const socket = new WebSocket('ws://example.com/stream');

mediaRecorder.ondataavailable = (event) => {
  if (event.data.size > 0 && socket.readyState === 1) {
    socket.send(event.data);
  }
};