浏览器调用摄像头（【浏览器硬件交互篇】浏览器js调用摄像头拍照「建议收藏」）

发布时间：2025-12-10 19:19:34 浏览次数：4

【浏览器硬件交互篇】浏览器js调用摄像头拍照「建议收藏」-谷歌浏览器调用摄像头

【浏览器硬件交互篇】浏览器js调用摄像头拍照「建议收藏」如何使用浏览器来调用相机进行拍照

一、写在前面

调用外部摄像头需要找到浏览器支持的api才行.

navigator 对象里就包含有 MediaDevices属性.其中就有个getUserMedia() 的方法。

语法

var promise = navigator.mediaDevices.getUserMedia(constraints);

是否还在为Ide开发工具频繁失效而烦恼，来吧关注以下公众号获取最新激活方式。亲测可用！

为防止网络爬虫，请关注公众号回复”口令”

激活idea 激活CLion DataGrip DataSpell dotCover dotMemory dotTrace GoLand PhpStorm PyCharm ReSharper ReShaC++ Rider RubyMine WebStorm 全家桶刷新

【正版授权，激活自己账号】：Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】：官方授权正版激活自己使用，支持Jetbrains家族下所有IDE…

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

文档在这里: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

浏览器调用USB硬件系列

关注公众号“笔优站长”可阅读全部文章哟。

二、直接上代码

上面的小节拿到了浏览器的媒体设备列表了,下面就需要展示输出的mediaStream了.

需要用到video对象的 srcObject属性了.

HTMLMediaElement 接口的 srcObject 属性设定或返回一个对象，这个对象提供了一个与HTMLMediaElement关联的媒体源，这个对象通常是 MediaStream ，但根据规范可以是 MediaSource， Blob 或者 File。

需要注意: 截至 2020 年 3 月, 只有Safari 支持设置 MediaStream 之外的对象。在其他浏览器跟上之前, 对MediaSource, Blob 和 File, 请考虑返回创建具有{domxref(“URL.createObjectURL()”)}} 的 URL，并将其赋值给HTMLMediaElement.src 有关示例，请参阅下文。

文档在这里 :https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/srcObject

代码如下:

插上相机测试

完整的代码在这里,只需要新建一个.html后缀的文件,把下面的代码完整的复制进去就可以了.

<!DOCTYPE html><html lang="en"><head><title>相机测试</title><style> * {  padding: 0; margin: 0; } .btn {  width: 100px; padding: 10px 0; border-radius: 4px; background: #ff5415; text-align: center; color: #fff; cursor: pointer; border: none; font-size: 16px; } video, canvas {  width: 500px; height: 500px; border: 1px solid #ff5415; border-radius: 4px; margin-left: 5px; } .camera-warpper {  padding: 20px 0; width: 100%; } .video-container {  display: flex; align-items: center; justify-content: center; } .btns {  padding: 20px 0; display: flex; align-items: center; justify-content: center; } button+button {  margin-left: 10px; } </style></head><body><p ><p ><video ></video><canvas  width="500" height="500"></canvas></p><p ><button  onclick="openCamera()">开启摄像<button><button  onclick="takePicture()">拍照<button><button  onclick="downPhoto()">下载</button></p></p></body><script> const config = {  // video属性设置 video: {  width: 500, height: 500 }, // audio属性设置 audio: true } const video = document.getElementById('camera-video'); const canvas = document.getElementById("camera-canvas"); /** * 开启摄像 */ function openCamera() {  navigator.mediaDevices.getUserMedia(config).then(mediaStream => {  //接收一个mediaStream参数与video标签进行对接 console.log(mediaStream); video.srcObject = mediaStream; video.play(); }).catch((err) => {  console.error(err); }); } /** * 拍照、canvas绘制 */ function takePicture() {  let ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, config.video.width, config.video.height); } /** * canvas下载图片 */ function downPhoto() {  const MIME_TYPE = "image/png"; const dlLink = document.createElement('a'); dlLink.download = '测试照片'; dlLink.href = canvas.toDataURL(MIME_TYPE); dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':'); document.body.appendChild(dlLink); dlLink.click(); document.body.removeChild(dlLink); } </script></html>

三、总结

上面的代码不是百分百完美的,需要有个兼容性写法,判断getUserMedia方法是否存在,这部分自行去看, 本文目的是快速测试相机.

留个彩蛋

历经2年多的时间,本站有新应用,即将上线.

四、写在后面

参考文档

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/srcObject

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

上面就是一个简单的浏览器调用相机使用场景的全部内容了，你学废了吗？

有问题请留言或者@博主,谢谢支持o(￣︶￣)o~

感谢您的阅读,如果此文章或项目对您有帮助，请扫个二维码点个关注吧，若可以的话再给个一键三连吧！

公众号阅读的朋友可以点一下右下角的在看和分享哦。

GitHub有开源项目,需要的小伙伴可以顺手star一下！

GitHub: https://github.com/langyuxiansheng

更多信息请关注公众号: “笔优站长”

扫码关注“笔优站长”，支持站长

上一篇：制作网页的基本步骤有哪些？一起来看看吧！下一篇：si5324（任意频率时钟发生器Si5324配置小结「建议收藏」）

综合百科