教你用几行代码，在网页里调出前置摄像头！

最下面有完整代码 你有没有想过？现在很多网页能直接打开摄像头 ------ 比如视频聊天、在线拍照，甚至人脸识别。其实这背后的原理没那么复杂，今天就用一段简单代码，教你自己做一个 "网页调用前置摄像头" 的小工具，小白也能看懂哦！

先看看效果长啥样？

打开这个网页后，浏览器会问你 "是否允许使用摄像头"，点 "允许"，你就能在页面上看到前置摄像头的画面了，下面还有个 "停止摄像头" 按钮，点一下就能关掉。是不是很神奇？

代码拆解开，其实很简单

下面咱们一点点看这段代码，不用怕，我会用大白话解释～

第一步：搭个网页的 "架子"

xml 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>调用前置摄像头</title>
  <!-- 这里放样式和脚本 -->
</head>
<body>
  <!-- 这里放页面上能看到的东西 -->
</body>
</html>

这就像盖房子先搭框架，<html> 是整个房子，<head> 是藏在后面的 "工具箱"（样式、脚本），<body> 是你能看到的 "客厅"（按钮、画面这些）。

第二步：在页面上放个 "显示器" 和 "开关"

在 <body> 里，我们需要两个东西：

一个显示摄像头画面的地方（就像个小屏幕）
一个停止摄像头的按钮（就像开关）

代码是这样的：

xml 复制代码

<!-- 标题 -->
<h3>前置摄像头画面</h3>

<!-- 显示摄像头画面的"小屏幕" -->
<video id="cameraView" autoplay playsinline></video>

<!-- 停止按钮 -->
<button id="stopBtn" class="control-btn">停止摄像头</button>

<h3> 就是个标题，告诉用户这是啥
<video> 是关键！它就像一个 "显示器"，专门用来显示视频。id="cameraView" 是给它起个名字，方便后面控制；autoplay 表示摄像头画面出来后自动播放；playsinline 是照顾手机用户，避免画面突然全屏
<button> 就是按钮啦，点一下能关掉摄像头，id="stopBtn" 也是给它起名字，方便控制

第三步：给页面 "穿件好看的衣服"

光有内容还不够，得让它好看点。这部分叫 CSS，就像给页面穿衣服：

css 复制代码

/* 给"显示器"设个大小和边框 */
video {
  width: 640px;    /* 宽640像素 */
  height: 480px;   /* 高480像素 */
  border: 1px solid #ccc;  /* 加个灰色边框 */
}

/* 给按钮设计样式 */
.control-btn {
  margin-top: 10px;      /* 按钮和显示器之间留点空隙 */
  padding: 8px 16px;     /* 按钮里面的空间，让它别太挤 */
  background-color: #4CAF50;  /* 绿色背景，看着舒服 */
  color: white;          /* 白色文字 */
  border-radius: 4px;    /* 边角圆一点，不扎手 */
  cursor: pointer;       /* 鼠标放上去变成小手，提示能点 */
}

简单说，就是让 "显示器" 有个合适的大小，按钮长得好看点，点起来有感觉～

第四步：让页面 "动起来"（核心代码）

前面都是 "死" 的，真正让摄像头工作的是 JavaScript 代码，它就像个 "指挥家"，告诉浏览器该做啥。

先 "找到" 页面上的元素

ini 复制代码

// 找到"显示器"和"开关"
const video = document.getElementById('cameraView');
const stopBtn = document.getElementById('stopBtn');
let mediaStream = null; // 这个变量专门存摄像头的"数据流"，后面有用

就像你在家里找东西：getElementById 就是 "按名字找东西"，找到刚才起了名字的 cameraView（显示器）和 stopBtn（按钮）。

告诉浏览器："我要调用前置摄像头！"

csharp 复制代码

// 配置摄像头参数：用前置，不录声音
const constraints = {
  video: { facingMode: 'user' }, // 'user' 就是前置摄像头，换成 'environment' 是后置（手机上可用）
  audio: false  // 不开启麦克风
};

// 启动摄像头的函数
async function startCamera() {
  try {
    // 向浏览器要摄像头权限
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    mediaStream = stream; // 把拿到的"数据流"存起来
    video.srcObject = stream; // 把数据流"接到"显示器上，画面就出来了
  } catch (err) {
    // 如果失败（比如用户拒绝权限），就提示错误
    alert('调用摄像头失败：' + err.message);
  }
}

这里有几个关键点：

constraints 是告诉浏览器 "我要啥"：前置摄像头、不要声音
getUserMedia 是个 "魔法命令"，会让浏览器弹框问用户 "允许用摄像头吗？"。用户点允许，就会返回一个 "数据流"（就像水管里的水，源源不断送画面）
await 是说 "等浏览器处理完再继续"，因为请求权限需要时间
如果用户点了 "拒绝"，或者没摄像头，就会触发 catch，弹出错误提示

给按钮加个 "停止" 功能

ini 复制代码

// 停止摄像头的函数
function stopCamera() {
  if (mediaStream) {
    // 关掉所有"数据流"（就像关掉水管总闸）
    mediaStream.getTracks().forEach(track => track.stop());
    video.srcObject = null; // 显示器断开连接，画面消失
    mediaStream = null; // 清空数据流，释放资源
  }
}

为什么要停止？如果不关掉，摄像头会一直工作，费电又占资源。这个函数就是 "关总闸"：找到所有在流动的 "数据轨道"，一个个停掉，再把显示器断开。

最后：页面加载完就自动启动摄像头

ini 复制代码

// 页面打开后，自动启动摄像头
window.onload = startCamera;

// 给按钮绑定"点击事件"：点一下就执行stopCamera
stopBtn.addEventListener('click', stopCamera);

window.onload 意思是 "页面加载完了就做某事"，这里就是自动启动摄像头
按钮默认是死的，addEventListener 就是给它加个 "功能"：点一下，就执行 stopCamera 函数

怎么自己试试？

把上面的代码复制下来，用记事本保存，文件名改成 camera.html（注意后缀是 .html，不是 .txt）
双击这个文件，用浏览器打开（推荐 Chrome、Edge 这些现代浏览器）
浏览器会弹框问 "是否允许使用摄像头"，点 "允许"，就能看到画面啦！

小拓展：试试改改参数？

想在手机上调用后置摄像头？把 facingMode: 'user' 改成 facingMode: 'environment' 试试
想让视频小点 / 大点？改 CSS 里 video 的 width 和 height 数值

是不是很简单？其实网页调用摄像头的核心就是 getUserMedia 这个 "魔法命令"，剩下的就是把画面显示出来、加个开关。动手试试吧，你也能做出自己的摄像头小工具～

完整代码

xml 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 设置页面标题 -->
  <title>调用前置摄像头</title>
  <!-- CSS样式定义，用于设置页面元素的外观 -->
  <style>
    /* 视频元素样式：设置视频播放器的尺寸和边框 */
    video {
      width: 640px;    /* 视频宽度 */
      height: 480px;   /* 视频高度 */
      border: 1px solid #ccc;  /* 1像素灰色边框 */
    }
    
    /* 控制按钮样式 */
    .control-btn {
      margin-top: 10px;      /* 按钮与视频之间的上边距 */
      padding: 8px 16px;     /* 按钮内边距：上下8px，左右16px */
      font-size: 14px;       /* 字体大小 */
      cursor: pointer;       /* 鼠标悬停时显示手型光标 */
      background-color: #4CAF50;  /* 按钮背景色：绿色 */
      color: white;          /* 文字颜色：白色 */
      border: none;          /* 无边框 */
      border-radius: 4px;    /* 4px圆角 */
    }
    
    /* 按钮悬停效果 */
    .control-btn:hover {
      background-color: #45a049;  /* 悬停时背景色变深 */
    }
  </style>
</head>
<body>
  <!-- 页面标题 -->
  <h3>前置摄像头画面</h3>
  
  <!-- 用于显示摄像头画面的video标签
       - id: 用于JavaScript获取该元素
       - autoplay: 自动播放视频流
       - playsinline: 允许视频在页面内播放而不是全屏播放(iOS设备兼容性)
  -->
  <video id="cameraView" autoplay playsinline></video>
  
  <!-- 停止摄像头按钮
       - id: 用于JavaScript获取该元素
       - class: 应用CSS样式
  -->
  <button id="stopBtn" class="control-btn">停止摄像头</button>

  <!-- JavaScript代码块，实现摄像头的调用和控制逻辑 -->
  <script>
    // 获取DOM元素引用
    const video = document.getElementById('cameraView');  // 视频元素
    const stopBtn = document.getElementById('stopBtn');  // 停止按钮
    let mediaStream = null; // 全局变量，用于保存媒体流对象，初始值为null

    // 调用前置摄像头的配置参数
    const constraints = {
      video: {
        facingMode: 'user'  // 'user' 表示前置摄像头，'environment'表示后置摄像头
      },
      audio: false  // 不启用音频捕获
    };

    /**
     * 启动摄像头函数
     * 使用async/await处理异步操作
     */
    async function startCamera() {
      try {
        // 调用navigator.mediaDevices.getUserMedia API请求用户媒体权限
        // 该API会弹出权限请求对话框，用户允许后返回媒体流
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        
        // 保存媒体流对象到全局变量，以便后续操作（如停止摄像头）
        mediaStream = stream;
        
        // 将媒体流赋值给video元素的srcObject属性，开始显示摄像头画面
        video.srcObject = stream;
        
      } catch (err) {
        // 捕获可能的错误，如用户拒绝权限、设备无摄像头等
        console.error('无法访问摄像头:', err);  // 在控制台输出错误信息
        alert('调用摄像头失败：' + err.message);  // 向用户显示错误提示
      }
    }

    /**
     * 停止摄像头函数
     */
    function stopCamera() {
      // 检查是否存在有效的媒体流对象
      if (mediaStream) {
        // 获取媒体流中的所有轨道（视频轨道）并遍历停止
        mediaStream.getTracks().forEach(track => {
          track.stop(); // 停止单个媒体轨道
        });
        
        // 解除video元素与媒体流的绑定，停止显示画面
        video.srcObject = null;
        
        // 清空媒体流对象，释放资源
        mediaStream = null;
        
        // 在控制台记录操作日志
        console.log('摄像头已停止');
      }
    }

    // 页面加载完成后自动启动摄像头
    window.onload = startCamera;
    
    // 为停止按钮绑定点击事件监听器，点击时调用stopCamera函数
    stopBtn.addEventListener('click', stopCamera);
  </script>
</body>
</html>