js 如何调用摄像头-js教程-PHP中文网

js 如何调用摄像头

星降

发布： 2025-08-17 14:02:01

原创

820人浏览过

javascript调用摄像头需先通过navigator.mediadevices.getusermedia请求用户授权，获取视频流并显示在video标签中；2. 优化体验时应在请求前提示用户目的，提供取消选项，并引导用户手动开启权限以防浏览器不再弹出请求框；3. 兼容性问题可通过引入adapter.js库统一处理不同浏览器的api差异；4. 录制视频可使用mediarecorder api，将录制的数据存入数组，停止后合并为blob对象并生成下载链接；5. 图像处理可通过canvas api将视频帧绘制到canvas上，利用getimagedata和putimagedata进行像素级操作，实现人脸识别等高级功能；以上步骤完整实现了网页中调用摄像头、录制视频及图像处理的核心流程。

js 如何调用摄像头

直接点说，JavaScript调用摄像头，就是让你在网页上能直接用用户的摄像头拍照片、录视频，或者做一些更高级的视觉处理。

解决方案：

首先，你需要理解浏览器的安全策略。现代浏览器为了保护用户隐私，不允许网页直接访问摄像头，必须经过用户的明确授权。所以，第一步是请求用户授权。

navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(function(stream) {
    // 获取到视频流
    const video = document.querySelector('video');
    video.srcObject = stream;
    video.play();
  })
  .catch(function(err) {
    // 处理错误，例如用户拒绝授权
    console.error("发生错误: " + err);
  });

登录后复制

这段代码会弹出一个权限请求框，询问用户是否允许网页访问摄像头。

getUserMedia

登录后复制

方法返回一个 Promise，成功时会得到一个 MediaStream 对象，这个对象包含了视频流。然后，我们将这个视频流赋值给一个

<video>

登录后复制

标签的

srcObject

登录后复制

属性，这样就能在网页上看到摄像头的画面了。

当然，如果用户拒绝授权，

catch

登录后复制

块里的代码会被执行，你需要处理这个错误，比如显示一个友好的提示信息。

如何优化摄像头调用的用户体验？

用户体验这块很重要。想象一下，用户点了一下按钮，啥反应都没有，心里肯定犯嘀咕。所以，在请求权限之前，最好先给用户一个提示，告诉他们为什么要访问摄像头，以及访问之后能做什么。

另外，权限请求框弹出来的时候，用户可能会犹豫，甚至不小心点错。所以，你可以在页面上提供一个“取消”按钮，让用户随时停止访问摄像头。

还有，如果用户第一次拒绝了权限，下次再请求权限的时候，浏览器可能会直接拒绝，不再弹出请求框。这时候，你需要引导用户到浏览器设置里手动开启摄像头权限。

如何处理不同浏览器的兼容性问题？

浏览器兼容性是个老生常谈的问题。不同的浏览器，对

getUserMedia

登录后复制

方法的支持程度可能不一样。有些浏览器可能需要加上前缀，比如

webkitGetUserMedia

登录后复制

或者

mozGetUserMedia

登录后复制

。

为了解决这个问题，你可以使用一个polyfill库，比如 adapter.js。这个库可以帮你处理不同浏览器的兼容性问题，让你只需要写一套代码，就能在所有浏览器上正常运行。

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

// 引入 adapter.js
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

// 使用 getUserMedia
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(function(stream) {
    // ...
  })
  .catch(function(err) {
    // ...
  });

登录后复制

如何录制摄像头视频？

光是显示画面还不够，有时候我们需要录制视频。这就要用到 MediaRecorder API 了。

let mediaRecorder;
let recordedBlobs;

navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(function(stream) {
    const video = document.querySelector('video');
    video.srcObject = stream;
    video.play();

    recordedBlobs = [];
    mediaRecorder = new MediaRecorder(stream);

    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.onstop = handleStop;

    // 开始录制
    mediaRecorder.start();
  })
  .catch(function(err) {
    console.error("发生错误: " + err);
  });

function handleDataAvailable(event) {
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}

function handleStop(event) {
  const blob = new Blob(recordedBlobs, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'recorded-video.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
}

登录后复制

这段代码创建了一个

MediaRecorder

登录后复制

对象，并监听了

dataavailable

登录后复制

和

stop

登录后复制

事件。

dataavailable

登录后复制

事件会在每次录制完一段数据后触发，我们将这些数据存储在

recordedBlobs

登录后复制

数组里。

stop

登录后复制

事件会在停止录制时触发，我们将

recordedBlobs

登录后复制

数组里的数据合并成一个 Blob 对象，然后创建一个下载链接，让用户可以下载录制的视频。

注意，

MediaRecorder

登录后复制

的构造函数需要传入一个 MediaStream 对象，也就是

getUserMedia

登录后复制

方法返回的视频流。

如何使用摄像头进行图像处理？

摄像头不仅仅可以用来拍照录像，还可以用来进行图像处理，比如人脸识别、物体检测等等。这就要用到 Canvas API 了。

首先，我们需要创建一个

<canvas>

登录后复制

元素，并将摄像头的画面绘制到 Canvas 上。

const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

function drawFrame() {
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  requestAnimationFrame(drawFrame);
}

video.addEventListener('play', function() {
  drawFrame();
});

登录后复制

这段代码会在视频播放时，不断地将视频的当前帧绘制到 Canvas 上。然后，我们就可以使用 Canvas API 对图像进行处理了。

比如，我们可以使用