JavaScript 调用设备摄像头实现指南

作者：木棉

时间：2026-10-22

本文介绍如何使用 JavaScript 的 getUserMedia API 获取设备摄像头权限并播放视频流。示例代码展示了配置音频和视频参数的方法，重点说明了 Chrome 需在 HTTPS 协议下运行，且 iOS 设备存在兼容性问题，建议开发者在测试时注意浏览器选择及协议要求。

文章目录

JavaScript 调用摄像头概述

本文分享一段 JavaScript 调用设备摄像头的具体实现代码，供开发者参考。

核心功能依赖于 getUserMedia API 来获取摄像头的访问权限。该方案在 Chrome 和 Firefox 浏览器中兼容良好，但在 iOS 系统上不支持。

摄像头调用代码实现

以下是完整的源代码示例。


<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
 </head>
 <body>
  <video src=""></video>
  <script type="text/javascript">
   var opt = {
    audio: true,
    video: {
     width: 375,
     height: 603
    }
   };
   navigator.mediaDevices.getUserMedia(opt)
    .then(function(mediaStream) {
     var video = document.querySelector('video');
     video.srcObject = mediaStream;
     video.onloadedmetadata = function(e) {
      video.play();
     };
    })
    .catch(function(err) {
     console.log(err.name + ": " + err.message);
    }); // always check for errors at the end.
  </script>
 </body>
</html>