小白都會(huì)的瀏覽器攝像頭控制與視頻錄制：基于原生 JavaScript 的完整指南

作者：天藍(lán)色的魚 2025-07-15 10:28:45

開發(fā) 瀏覽器

本文我將帶領(lǐng)大家深入探索如何使用原生 JavaScript 實(shí)現(xiàn)瀏覽器攝像頭的控制與視頻錄制功能，打造一個(gè)專業(yè)級(jí)別的網(wǎng)頁應(yīng)用。

呈現(xiàn)的效果如下：

初始界面：

拍照和拍攝視頻：

無論你是前端開發(fā)新手，還是有一定經(jīng)驗(yàn)的工程師，通過本文的學(xué)習(xí)，你都將掌握以下技能：

使用 MediaDevices API 獲取和控制攝像頭設(shè)備
實(shí)現(xiàn)高質(zhì)量視頻錄制和拍照功能
設(shè)計(jì)直觀友好的用戶界面和交互體驗(yàn)
處理常見的瀏覽器兼容性問題

一、核心技術(shù)概述

在開始編碼之前，讓我們先了解一下實(shí)現(xiàn)攝像頭控制和視頻錄制所需的核心技術(shù)：

1. MediaDevices API

MediaDevices API 是現(xiàn)代瀏覽器提供的一組強(qiáng)大接口，用于訪問和控制設(shè)備的媒體輸入，如攝像頭、麥克風(fēng)等。主要方法包括：

getUserMedia()：獲取攝像頭和麥克風(fēng)的媒體流
enumerateDevices()：枚舉可用的媒體設(shè)備
getDisplayMedia()：獲取屏幕共享流（本文暫不涉及）

2. MediaRecorder API

MediaRecorder API 用于將媒體流錄制為音頻或視頻文件。主要功能包括：

開始和停止錄制
分段處理錄制數(shù)據(jù)
支持多種輸出格式（如 WebM、MP4 等）

3. Canvas API

Canvas API 用于在網(wǎng)頁上繪制圖形和處理圖像。我們將使用它來實(shí)現(xiàn)拍照功能：

捕獲視頻幀
圖像處理和濾鏡效果
導(dǎo)出為圖片格式

二、項(xiàng)目初始化與基礎(chǔ)結(jié)構(gòu)

首先，讓我們創(chuàng)建項(xiàng)目的基礎(chǔ)結(jié)構(gòu)。新建一個(gè)文件夾，命名為 "camera-recorder"，并在其中創(chuàng)建以下文件：

camera-recorder/
├── index.html
├── style.css
└── script.js

接下來，我們將使用前端技術(shù)棧構(gòu)建這個(gè)應(yīng)用，包括 Tailwind CSS 進(jìn)行樣式設(shè)計(jì)和 Font Awesome 提供圖標(biāo)支持。

三、構(gòu)建用戶界面

1. 基礎(chǔ) HTML 結(jié)構(gòu)

打開 index.html 文件，添加以下內(nèi)容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>攝像頭控制器</title>
  <!-- 引入 Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入 Font Awesome -->
  <link  rel="stylesheet">
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#10B981',
            danger: '#EF4444',
            dark: '#1F2937',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .shadow-camera {
        box-shadow: 0 0 25px rgba(59, 130, 246, 0.4);
      }
      .btn-hover {
        @apply transform transition-all duration-300 hover:scale-105 hover:shadow-lg;
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen font-sans text-dark">
  <!-- 頁面內(nèi)容將在這里 -->
</body>
</html>

2. 頁面布局設(shè)計(jì)

我們的應(yīng)用將包含以下主要部分：

頂部導(dǎo)航欄
狀態(tài)提示區(qū)
視頻預(yù)覽區(qū)
控制面板
媒體結(jié)果展示區(qū)
頁腳

下面是完整的 HTML 結(jié)構(gòu)：

<body class="bg-gray-50 min-h-screen font-sans text-dark">
  <!-- 頭部 -->
  <header class="bg-gradient-to-r from-primary to-blue-400 text-white shadow-md">
    <div class="container mx-auto px-4 py-6">
      <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold flex items-center">
        <i class="fa fa-video-camera mr-3"></i>
        智能攝像頭控制器
      </h1>
      <p class="text-blue-100 mt-2">使用現(xiàn)代瀏覽器API控制您的攝像頭并錄制視頻</p>
    </div>
  </header>

  <main class="container mx-auto px-4 py-8 max-w-5xl">
    <!-- 狀態(tài)提示區(qū) -->
    <div id="status" class="mb-6 p-4 rounded-lg bg-yellow-100 border-l-4 border-yellow-500 transition-all duration-500">
      <div class="flex items-center">
        <i class="fa fa-info-circle text-yellow-500 mr-3 text-xl"></i>
        <p>請(qǐng)點(diǎn)擊"開啟攝像頭"按鈕開始使用</p>
      </div>
    </div>

    <!-- 視頻預(yù)覽區(qū) -->
    <div class="relative bg-gray-100 rounded-xl overflow-hidden shadow-lg mb-6">
      <div id="camera-container" class="aspect-video bg-gray-800 flex items-center justify-center">
        <video id="preview" class="w-full h-full object-cover" autoplay muted playsinline></video>
        <div id="no-camera" class="absolute inset-0 flex flex-col items-center justify-center bg-gray-800/80">
          <i class="fa fa-video-camera text-gray-400 text-6xl mb-4"></i>
          <p class="text-gray-300 text-lg">攝像頭未開啟</p>
        </div>
      </div>
      
      <!-- 設(shè)備選擇下拉框 -->
      <div class="absolute top-3 right-3 z-10">
        <select id="camera-select" class="bg-white/90 backdrop-blur-sm text-dark px-3 py-1.5 rounded-lg border border-gray-300 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 text-sm">
          <option value="">選擇攝像頭設(shè)備...</option>
        </select>
      </div>
    </div>

    <!-- 控制面板 -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-8">
      <div class="flex flex-wrap gap-4 justify-center">
        <button id="start-camera" class="bg-primary hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium flex items-center btn-hover">
          <i class="fa fa-video-camera mr-2"></i> 開啟攝像頭
        </button>
        <button id="close-camera" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-medium flex items-center btn-hover" disabled>
          <i class="fa fa-power-off mr-2"></i> 關(guān)閉攝像頭
        </button>
        <button id="start-recording" class="bg-secondary hover:bg-green-600 text-white px-6 py-3 rounded-lg font-medium flex items-center btn-hover" disabled>
          <i class="fa fa-circle mr-2"></i> 開始錄制
        </button>
        <button id="stop-recording" class="bg-danger hover:bg-red-600 text-white px-6 py-3 rounded-lg font-medium flex items-center btn-hover" disabled>
          <i class="fa fa-stop mr-2"></i> 停止錄制
        </button>
        <button id="take-photo" class="bg-dark hover:bg-gray-800 text-white px-6 py-3 rounded-lg font-medium flex items-center btn-hover" disabled>
          <i class="fa fa-camera mr-2"></i> 拍照
        </button>
      </div>
    </div>

    <!-- 拍攝結(jié)果展示 -->
    <div class="mt-8">
      <h2 class="text-xl font-bold mb-4 flex items-center">
        <i class="fa fa-film mr-2 text-primary"></i>
        拍攝結(jié)果
      </h2>
      <div id="results" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="col-span-full text-center text-gray-500 py-8">
          <i class="fa fa-film text-4xl mb-3 opacity-30"></i>
          <p>您的視頻和照片將顯示在這里</p>
        </div>
      </div>
    </div>
  </main>

  <footer class="bg-gray-800 text-white mt-12 py-8">
    <div class="container mx-auto px-4 text-center">
      <p>? 2025 攝像頭控制器 | 使用現(xiàn)代瀏覽器API構(gòu)建</p>
      <p class="text-gray-400 text-sm mt-2">支持Chrome、Firefox、Safari和Edge等主流瀏覽器</p>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>

3. 樣式設(shè)計(jì)說明

我們使用 Tailwind CSS 實(shí)現(xiàn)了響應(yīng)式設(shè)計(jì)和現(xiàn)代化的 UI 效果：

使用 bg-gradient-to-r 創(chuàng)建漸變色背景
利用 clamp() 函數(shù)實(shí)現(xiàn)自適應(yīng)字體大小
添加 btn-hover 自定義工具類實(shí)現(xiàn)按鈕懸停效果
使用 grid 和 flex 布局實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)
通過 transition-all 和 duration-300 添加平滑過渡效果

四、實(shí)現(xiàn)核心功能

現(xiàn)在讓我們實(shí)現(xiàn)應(yīng)用的核心功能，包括攝像頭控制、視頻錄制和拍照功能。

1. 初始化變量和DOM元素

打開 script.js 文件，添加以下代碼：

// 全局變量
let mediaStream = null;
let mediaRecorder = null;
let recordedChunks = [];
let isRecording = false;
const preview = document.getElementById('preview');
const startCameraBtn = document.getElementById('start-camera');
const closeCameraBtn = document.getElementById('close-camera');
const startRecordingBtn = document.getElementById('start-recording');
const stopRecordingBtn = document.getElementById('stop-recording');
const takePhotoBtn = document.getElementById('take-photo');
const cameraSelect = document.getElementById('camera-select');
const resultsContainer = document.getElementById('results');
const status = document.getElementById('status');
const noCamera = document.getElementById('no-camera');

2. 實(shí)現(xiàn)狀態(tài)提示系統(tǒng)

為了提供良好的用戶體驗(yàn)，我們需要實(shí)現(xiàn)一個(gè)狀態(tài)提示系統(tǒng)：

// 更新狀態(tài)提示
function updateStatus(message, type = 'info') {
  const colors = {
    info: { bg: 'bg-blue-100', border: 'border-blue-500', icon: 'fa-info-circle text-blue-500' },
    success: { bg: 'bg-green-100', border: 'border-green-500', icon: 'fa-check-circle text-green-500' },
    warning: { bg: 'bg-yellow-100', border: 'border-yellow-500', icon: 'fa-exclamation-triangle text-yellow-500' },
    error: { bg: 'bg-red-100', border: 'border-red-500', icon: 'fa-exclamation-circle text-red-500' }
  };
  
  status.className = `mb-6 p-4 rounded-lg ${colors[type].bg} border-l-4 ${colors[type].border} transition-all duration-500`;
  status.innerHTML = `
    <div class="flex items-center">
      <i class="fa ${colors[type].icon} mr-3 text-xl"></i>
      <p>${message}</p>
    </div>
  `;
}

3. 獲取攝像頭設(shè)備列表

使用 MediaDevices.enumerateDevices() 方法獲取可用的攝像頭設(shè)備：

// 獲取攝像頭設(shè)備列表
async function getCameraDevices() {
  try {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const videoDevices = devices.filter(device => device.kind === 'videoinput');
    
    cameraSelect.innerHTML = '<option value="">選擇攝像頭設(shè)備...</option>';
    videoDevices.forEach(device => {
      const option = document.createElement('option');
      option.value = device.deviceId;
      option.text = device.label || `攝像頭 ${cameraSelect.length}`;
      cameraSelect.appendChild(option);
    });
    
    return videoDevices;
  } catch (err) {
    updateStatus(`獲取設(shè)備列表失敗: ${err.message}`, 'error');
    console.error('獲取設(shè)備列表失敗:', err);
    return [];
  }
}

4. 開啟和關(guān)閉攝像頭

使用 getUserMedia() 方法獲取攝像頭流：

// 開啟攝像頭
async function startCamera(deviceId = null) {
  try {
    // 如果已經(jīng)有流，先停止
    if (mediaStream) {
      mediaStream.getTracks().forEach(track => track.stop());
    }
    
    const constraints = {
      video: deviceId ? { deviceId: { exact: deviceId } } : true,
      audio: false
    };
    
    mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
    preview.srcObject = mediaStream;
    noCamera.classList.add('hidden');
    
    // 啟用控制按鈕
    startRecordingBtn.disabled = false;
    takePhotoBtn.disabled = false;
    closeCameraBtn.disabled = false;
    startCameraBtn.textContent = '切換攝像頭';
    startCameraBtn.classList.remove('bg-primary', 'hover:bg-blue-600');
    startCameraBtn.classList.add('bg-gray-600', 'hover:bg-gray-700');
    
    updateStatus('攝像頭已開啟，可以開始錄制或拍照', 'success');
  } catch (err) {
    updateStatus(`無法訪問攝像頭: ${err.message}`, 'error');
    console.error('訪問攝像頭失敗:', err);
    noCamera.classList.remove('hidden');
  }
}

// 關(guān)閉攝像頭
function closeCamera() {
  if (!mediaStream) return;
  
  // 停止所有流軌道
  mediaStream.getTracks().forEach(track => track.stop());
  mediaStream = null;
  
  // 更新UI
  preview.srcObject = null;
  noCamera.classList.remove('hidden');
  
  startRecordingBtn.disabled = true;
  stopRecordingBtn.disabled = true;
  takePhotoBtn.disabled = true;
  closeCameraBtn.disabled = true;
  startCameraBtn.textContent = '開啟攝像頭';
  startCameraBtn.classList.remove('bg-gray-600', 'hover:bg-gray-700');
  startCameraBtn.classList.add('bg-primary', 'hover:bg-blue-600');
  
  updateStatus('攝像頭已關(guān)閉', 'info');
}

5. 實(shí)現(xiàn)視頻錄制功能

使用 MediaRecorder API 實(shí)現(xiàn)視頻錄制：

// 開始錄制
function startRecording() {
  if (!mediaStream) return;
  
  try {
    // 創(chuàng)建錄制器
    mediaRecorder = new MediaRecorder(mediaStream);
    recordedChunks = [];
    
    // 監(jiān)聽數(shù)據(jù)可用事件
    mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) {
        recordedChunks.push(event.data);
      }
    };
    
    // 監(jiān)聽錄制停止事件
    mediaRecorder.onstop = () => {
      const blob = new Blob(recordedChunks, { type: 'video/webm' });
      recordedChunks = [];
      saveRecording(blob);
    };
    
    // 開始錄制
    mediaRecorder.start();
    isRecording = true;
    
    // 更新UI
    startRecordingBtn.disabled = true;
    stopRecordingBtn.disabled = false;
    takePhotoBtn.disabled = true;
    closeCameraBtn.disabled = true;
    
    updateStatus('正在錄制視頻...', 'warning');
    
    // 添加錄制指示器動(dòng)畫
    const indicator = document.createElement('div');
    indicator.className = 'absolute top-3 left-3 z-10 bg-red-500 rounded-full w-3 h-3 animate-pulse';
    document.getElementById('camera-container').appendChild(indicator);
  } catch (err) {
    updateStatus(`錄制失敗: ${err.message}`, 'error');
    console.error('錄制失敗:', err);
  }
}

// 停止錄制
function stopRecording() {
  if (!mediaRecorder || !isRecording) return;
  
  // 停止錄制
  mediaRecorder.stop();
  isRecording = false;
  
  // 更新UI
  startRecordingBtn.disabled = false;
  stopRecordingBtn.disabled = true;
  takePhotoBtn.disabled = false;
  closeCameraBtn.disabled = mediaStream ? false : true;
  
  // 移除錄制指示器
  const indicators = document.querySelectorAll('#camera-container > div.animate-pulse');
  indicators.forEach(indicator => indicator.remove());
  
  updateStatus('視頻錄制已完成', 'success');
}

6. 實(shí)現(xiàn)拍照功能

使用 Canvas API 實(shí)現(xiàn)拍照功能：

// 拍照
function takePhoto() {
  if (!mediaStream) return;
  
  // 創(chuàng)建Canvas并繪制當(dāng)前幀
  const canvas = document.createElement('canvas');
  canvas.width = preview.videoWidth;
  canvas.height = preview.videoHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(preview, 0, 0, canvas.width, canvas.height);
  
  // 轉(zhuǎn)換為圖片URL
  const photoUrl = canvas.toDataURL('image/jpeg');
  savePhoto(photoUrl);
  
  updateStatus('照片拍攝成功', 'success');
  
  // 添加拍照效果
  const flash = document.createElement('div');
  flash.className = 'absolute inset-0 bg-white opacity-0 transition-opacity duration-300';
  document.getElementById('camera-container').appendChild(flash);
  flash.style.opacity = '1';
  setTimeout(() => {
    flash.style.opacity = '0';
    setTimeout(() => flash.remove(), 300);
  }, 100);
}

7. 保存和展示媒體文件

// 保存錄制的視頻
function saveRecording(blob) {
  const videoUrl = URL.createObjectURL(blob);
  
  // 創(chuàng)建視頻元素
  const videoElement = document.createElement('video');
  videoElement.className = 'w-full h-auto rounded-lg shadow-md hover:shadow-lg transition-all duration-300';
  videoElement.controls = true;
  videoElement.src = videoUrl;
  
  // 創(chuàng)建卡片
  const card = createMediaCard(videoElement, 'video');
  
  // 添加下載按鈕
  const downloadBtn = document.createElement('a');
  downloadBtn.href = videoUrl;
  downloadBtn.download = `recording-${new Date().toISOString().replace(/:/g, '-')}.webm`;
  downloadBtn.className = 'mt-2 inline-block bg-primary hover:bg-blue-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium flex items-center justify-center w-full';
  downloadBtn.innerHTML = '<i class="fa fa-download mr-1"></i> 下載視頻';
  card.appendChild(downloadBtn);
  
  // 添加到結(jié)果區(qū)域
  addToResults(card);
}

// 保存拍攝的照片
function savePhoto(photoUrl) {
  // 創(chuàng)建圖片元素
  const img = document.createElement('img');
  img.className = 'w-full h-auto rounded-lg shadow-md hover:shadow-lg transition-all duration-300';
  img.src = photoUrl;
  img.alt = '拍攝的照片';
  
  // 創(chuàng)建卡片
  const card = createMediaCard(img, 'photo');
  
  // 添加下載按鈕
  const downloadBtn = document.createElement('a');
  downloadBtn.href = photoUrl;
  downloadBtn.download = `photo-${new Date().toISOString().replace(/:/g, '-')}.jpg`;
  downloadBtn.className = 'mt-2 inline-block bg-primary hover:bg-blue-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium flex items-center justify-center w-full';
  downloadBtn.innerHTML = '<i class="fa fa-download mr-1"></i> 下載照片';
  card.appendChild(downloadBtn);
  
  // 添加到結(jié)果區(qū)域
  addToResults(card);
}

// 創(chuàng)建媒體卡片
function createMediaCard(element, type) {
  const card = document.createElement('div');
  card.className = 'bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 transform hover:-translate-y-1';
  
  const cardHeader = document.createElement('div');
  cardHeader.className = 'p-3 bg-gray-50 flex justify-between items-center';
  
  const typeBadge = document.createElement('span');
  typeBadge.className = `px-2 py-0.5 rounded-full text-xs font-medium ${
    type === 'video' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'
  }`;
  typeBadge.textContent = type === 'video' ? '視頻' : '照片';
  
  const timeStamp = document.createElement('span');
  timeStamp.className = 'text-gray-500 text-xs';
  timeStamp.textContent = new Date().toLocaleString();
  
  cardHeader.appendChild(typeBadge);
  cardHeader.appendChild(timeStamp);
  
  const cardBody = document.createElement('div');
  cardBody.className = 'p-3';
  cardBody.appendChild(element);
  
  card.appendChild(cardHeader);
  card.appendChild(cardBody);
  
  return card;
}

// 添加到結(jié)果區(qū)域
function addToResults(element) {
  // 清空空狀態(tài)提示
  if (resultsContainer.querySelector('.col-span-full')) {
    resultsContainer.innerHTML = '';
  }
  
  // 添加新內(nèi)容
  resultsContainer.prepend(element);
  
  // 添加動(dòng)畫效果
  element.style.opacity = '0';
  element.style.transform = 'translateY(20px)';
  setTimeout(() => {
    element.style.opacity = '1';
    element.style.transform = 'translateY(0)';
  }, 50);
}

8. 事件監(jiān)聽和初始化

最后，添加事件監(jiān)聽器和頁面初始化代碼：

// 事件監(jiān)聽
startCameraBtn.addEventListener('click', async () => {
  if (!mediaStream) {
    await getCameraDevices();
    await startCamera();
  } else {
    await getCameraDevices();
    if (cameraSelect.options.length > 1) {
      // 切換到下一個(gè)攝像頭
      const currentIndex = Array.from(cameraSelect.options).findIndex(option => option.selected);
      const nextIndex = currentIndex < cameraSelect.options.length - 1 ? currentIndex + 1 : 1;
      cameraSelect.selectedIndex = nextIndex;
      await startCamera(cameraSelect.value);
    } else {
      updateStatus('沒有可切換的攝像頭設(shè)備', 'warning');
    }
  }
});

closeCameraBtn.addEventListener('click', closeCamera);
startRecordingBtn.addEventListener('click', startRecording);
stopRecordingBtn.addEventListener('click', stopRecording);
takePhotoBtn.addEventListener('click', takePhoto);

cameraSelect.addEventListener('change', async () => {
  if (cameraSelect.value) {
    await startCamera(cameraSelect.value);
  }
});

// 頁面加載時(shí)檢查權(quán)限
document.addEventListener('DOMContentLoaded', async () => {
  try {
    // 檢查媒體設(shè)備權(quán)限
    const permissionStatus = await navigator.permissions.query({ name: 'camera' });
    
    if (permissionStatus.state === 'granted') {
      updateStatus('已授予攝像頭訪問權(quán)限，可以隨時(shí)開啟攝像頭', 'info');
      await getCameraDevices();
    } else if (permissionStatus.state === 'prompt') {
      updateStatus('點(diǎn)擊"開啟攝像頭"按鈕并授予訪問權(quán)限', 'info');
    } else {
      updateStatus('請(qǐng)?jiān)跒g覽器設(shè)置中授予攝像頭訪問權(quán)限', 'warning');
    }
    
    // 監(jiān)聽權(quán)限狀態(tài)變化
    permissionStatus.onchange = () => {
      updateStatus(`攝像頭權(quán)限狀態(tài)已更新: ${permissionStatus.state}`, 'info');
    };
  } catch (err) {
    updateStatus('無法檢查攝像頭權(quán)限', 'warning');
    console.error('檢查攝像頭權(quán)限失敗:', err);
  }
});

五、應(yīng)用優(yōu)化與進(jìn)階功能

1. 瀏覽器兼容性處理

盡管大多數(shù)現(xiàn)代瀏覽器都支持 MediaDevices API 和 MediaRecorder API，但為了確保在各種瀏覽器中都能正常工作，建議添加適當(dāng)?shù)募嫒菪蕴幚恚?/p>

// 兼容性處理
navigator.mediaDevices = navigator.mediaDevices || 
  ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
    getUserMedia: function(c) {
      return new Promise(function(y, n) {
        (navigator.mozGetUserMedia || 
         navigator.webkitGetUserMedia).call(navigator, c, y, n);
      });
    }
  } : null);

// 檢查瀏覽器是否支持必要的API
if (!navigator.mediaDevices) {
  updateStatus('您的瀏覽器不支持?jǐn)z像頭API', 'error');
  startCameraBtn.disabled = true;
}

2. 資源管理與性能優(yōu)化

在應(yīng)用中，合理管理資源和優(yōu)化性能非常重要：

在組件卸載或頁面關(guān)閉時(shí)停止所有媒體流
使用 requestAnimationFrame 優(yōu)化視頻渲染
限制錄制視頻的分辨率以降低性能消耗
實(shí)現(xiàn)錄制緩沖區(qū)管理，避免內(nèi)存溢出

3. 進(jìn)階功能擴(kuò)展

基于現(xiàn)有的代碼基礎(chǔ)，你可以進(jìn)一步擴(kuò)展以下功能：

添加視頻濾鏡和圖像處理
實(shí)現(xiàn)多攝像頭同時(shí)錄制
添加實(shí)時(shí)音頻錄制功能
實(shí)現(xiàn)視頻剪輯和編輯功能
集成云端存儲(chǔ)和分享功能

六、總結(jié)

通過本文的學(xué)習(xí)，你已經(jīng)掌握了如何使用原生 JavaScript 實(shí)現(xiàn)瀏覽器攝像頭控制和視頻錄制功能。我們使用了 MediaDevices API 獲取攝像頭流，MediaRecorder API 錄制視頻，以及 Canvas API 實(shí)現(xiàn)拍照功能。

現(xiàn)在，你可以將這些知識(shí)應(yīng)用到實(shí)際項(xiàng)目中，開發(fā)出更加復(fù)雜和專業(yè)的網(wǎng)頁應(yīng)用。