当前位置： 首页 > news >正文

前端页面展示本电脑的摄像头，并使用js获取摄像头列表

news 文章来源：https://blog.csdn.net/weixin_44786530/article/details/144819082 2025/5/20 6:25:45

可以通过 JavaScript 使用 navigator.mediaDevices.enumerateDevices() 获取电脑上的摄像头列表。以下是一个示例代码，可以展示摄像头列表并选择进行预览。

HTML + JavaScript 实现摄像头列表展示和预览

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>摄像头列表</title>
</head>
<body><h1>摄像头选择</h1><select id="cameraSelect"></select><button onclick="startCamera()">开始预览</button><video id="videoPreview" autoplay playsinline style="width: 100%; max-width: 600px;"></video><script>const videoElement = document.getElementById('videoPreview');const selectElement = document.getElementById('cameraSelect');// 获取摄像头设备列表async function getCameraDevices() {const devices = await navigator.mediaDevices.enumerateDevices();const videoDevices = devices.filter(device => device.kind === 'videoinput');selectElement.innerHTML = '';  // 清空下拉框videoDevices.forEach((device, index) => {const option = document.createElement('option');option.value = device.deviceId;option.text = device.label || `摄像头 ${index + 1}`;selectElement.appendChild(option);});}// 启动摄像头async function startCamera() {const selectedDeviceId = selectElement.value;const constraints = {video: {deviceId: selectedDeviceId ? { exact: selectedDeviceId } : undefined}};const stream = await navigator.mediaDevices.getUserMedia(constraints);videoElement.srcObject = stream;}// 页面加载时自动获取摄像头window.onload = getCameraDevices;</script>
</body>
</html>

说明

  • 核心方法:
    • navigator.mediaDevices.enumerateDevices()：列出所有音视频设备。
    • 过滤出 videoinput 类型的设备即为摄像头。
  • 下拉框动态生成：遍历摄像头设备，将其添加到 <select> 下拉框中。
  • 设备启动：调用 navigator.mediaDevices.getUserMedia()，使用选定摄像头进行视频预览。这个时候会提示访问权限，要点击允许就可以了

注意事项

  1. 浏览器权限：首次访问页面时，浏览器会请求访问摄像头权限。用户拒绝后，设备列表可能为空。
  2. HTTPS要求：getUserMedia 只能在 HTTPS 或 localhost 上使用。
  3. 标签问题：某些设备的标签只有在用户授权访问后才能显示。

运行后，你的页面会自动检测并展示摄像头设备列表，选择设备并点击“开始预览”即可看到实时摄像头画面。但是获取到的本机摄像头没有label标签，不确定外接摄像头是否有标签。

相关文章：

前端页面展示本电脑的摄像头，并使用js获取摄像头列表

可以通过 JavaScript 使用 navigator.mediaDevices.enumerateDevices() 获取电脑上的摄像头列表。以下是一个示例代码&#xff0c;可以展示摄像头列表并选择进行预览。 HTML JavaScript 实现摄像头列表展示和预览 <!DOCTYPE html> <html lang"zh-CN">…...

编程日记 2025/1/1 9:57:31

HTML5实现喜庆的新年快乐网页源码

HTML5实现喜庆的新年快乐网页源码 前言一、设计来源1.1 主界面1.2 关于新年界面1.3 新年庆祝活动界面1.4 新年活动组织界面1.5 新年祝福订阅界面1.6 联系我们界面 二、效果和源码2.1 动态效果2.2 源代码 源码下载结束语 HTML5实现喜庆的新年快乐网页源码&#xff0c;春节新年网…...

编程日记 2025/1/1 9:55:29

Excel文件恢复教程：快速找回丢失数据！

Excel文件恢复位置在哪里&#xff1f; Excel是微软开发的电子表格软件&#xff0c;它为处理数据和组织工作提供了便捷。虽然数据丢失的问题在数字时代已经司空见惯&#xff0c;但对于某些用户来说&#xff0c;恢复未保存/删除/丢失的Excel文件可能会很困难&#xff0c;更不用说…...

编程日记 2025/1/1 9:48:22

计算机网络-L2TP Over IPSec基础实验

一、概述 上次我们进行了标准L2TP的配置&#xff0c;但是在最后我们在进行业务流量访问时看到流量是没有进行加密的&#xff0c;这就导致可能得安全风险&#xff0c;所以这里其实可以退像GRE那样调用IPSec框架来进行加密保护。 拓扑 数据不加密 现在需要配置IPSec&#xff0c;然…...

编程日记 2025/1/1 9:47:20

一个最简单的ios程序(object_c)的编写

前言 如何在苹果系统MacOS创建一个简单的ios&#xff08;iphone&#xff09;程序&#xff0c;貌似非常的简单。但是&#xff0c;作为习惯了Windows开发的程序员来说&#xff0c;有时候还觉得有点麻烦&#xff0c;至少开始有点很不习惯。 本博文试着把这个过程展现一下&#xff…...

编程日记 2025/1/1 9:45:18

使用Clion在ubuntu上进行交叉编译，并在Linux上远程编译五子棋

目录 1.工具以及概念介绍 &#xff08;1&#xff09;Clion软件简介 &#xff08;2&#xff09;交叉编译 &#xff08;3&#xff09;远程编译 2.操作原理 3.详细操作步骤 &#xff08;1&#xff09;配置Clion与虚拟机ubuntu的ssh连接 CLion远程开发Ubuntu&#xff0c;并显…...

编程日记 2025/1/1 9:44:17

《QDebug 2024年12月》

一、Qt Widgets 问题交流 1. 二、Qt Quick 问题交流 1.QQuickPaintedItem 或者 QQuickItem 绘制的图片 dpi 缩放后模糊 启用 Qt 自带的缩放后&#xff0c;界面会跟随系统设置的 dpi 进行放大缩小&#xff1a; #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)QCoreApplicat…...

编程日记 2025/1/1 9:43:14

3---杭州工作三年半

2021-07-06来杭——2025-01-01元旦 1滨江2021-07-06——2022-11-25&#xff08;一年零四个月&#xff09; 2下沙2023-01-01——2023-04-27&#xff08;五个月&#xff09; 3苏州2023-06-07——2023-06-27&#xff08;一个月&#xff09;厦门2023-06-29——2023-07-06&#xff…...

编程日记 2025/1/1 9:42:13

从2024看2025前端发展趋势

前言 又至年关&#xff0c;回顾整个2024年&#xff0c;前端行业仍旧百废待兴&#xff0c;IT业界同样也未见有所起色&#xff0c;AI风潮也从狂热兴奋逐步走向了冷静稳定阶段&#xff0c;造成此形势感观并非单一行业或者某一企业之特例&#xff0c;实为政经等综合影响之结果。因…...

编程日记 2025/1/1 9:41:13

网络渗透测试实验三：SQL注入

1.实验目的和要求 实验目的：了解SQL注入的基本原理；掌握PHP脚本访问MySQL数据库的基本方法；掌握程序设计中避免出现SQL注入漏洞的基本方法；掌握网站配置。 系统环境：Kali Linux 2、Windows Server 网络环境：交换网络结构 实验工具： SqlMAP；DVWA 2.实验步骤 实验目…...

编程日记 2025/1/1 9:40:12

ElasticSearch7.8快速入门

文章目录 1.基本概念1.数据格式2.倒排索引 2.HTTP使用1.创建索引&#xff08;相当于创建数据库&#xff09;2.索引-查询 & 删除1.查询索引2.查询所有索引3.删除索引 3.创建文档1.创建文档&#xff08;不指定id&#xff09;2.创建文档&#xff08;指定id&#xff09; 4.文档…...

编程日记 2025/1/1 9:37:09

【YashanDB知识库】hive初始化崖山报错YAS-04209

本文内容来自YashanDB官网&#xff0c;原文内容请见 https://www.yashandb.com/newsinfo/7849008.html?templateId1718516 【问题分类】功能使用 【关键字】hadoop&#xff0c;hive&#xff0c;YAS-02058 【问题描述】hive初始化崖山报错&#xff1a; 0: jdbc:yasdb://192…...

编程日记 2025/1/1 9:36:08

2024年度总结：保持正念 延迟满足

总结&#xff1a; 时光荏苒&#xff0c;很快就到了年底&#xff0c;2024年也就悄悄的过去了&#xff0c;回顾这一年&#xff0c;有很多的感触&#xff0c;在此做一个总结&#xff0c;留下自己的脚印 CTF&#xff1a; 要总结的第一件事那当然是CTF&#xff0c;回顾这一年&#…...

编程日记 2025/1/1 9:34:05

VScode SSH 错误：Got bad result from install script 解決

之前vscode好好的&#xff0c;某天突然连接报错如下 尝试1. 服务器没有断开,ssh可以正常连接 2. 用管理员权限运行vscode&#xff0c;无效 3. 删除服务器上的~/.vscode-server 文件夹&#xff0c;无效 试过很多后&#xff0c;原来很可能是前一天anaconda卸载导致注册表项 步…...

编程日记 2025/1/1 9:33:04

Logo设计免费生成器工具：轻松创建独特标志

在当今的商业世界中&#xff0c;一个独特且引人注目的Logo是任何企业或品牌的身份象征。它不仅代表了公司的形象&#xff0c;还传达了公司的价值观和使命。然而&#xff0c;对于许多初创企业或小型企业来说&#xff0c;聘请专业设计师来设计一个Logo可能是一笔不小的开销。这时…...

编程日记 2025/1/1 9:30:01

[算法] [leetcode-349] 两个数组的交集

349 两个数组的交集 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的 交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,2,2,1], nums2 [2,2] 输出&#xff1a;[2] 示例 2&#xff1a; …...

编程日记 2025/1/1 9:24:55

Type c系列接口驱动电路·内置供电驱动电路使用USB2.0驱动电路！！！

目录 前言 Type c常见封装类型 Type c引脚功能详解 Type c常见驱动电路详解 Type c数据手册 ​​​​​​​ ​​​​​​​ 编写不易&#xff0c;仅供学习&#xff0c;请勿搬运&#xff0c;感谢理解 常见元器件驱动电路文章专栏连接 LM7805系列降压芯片驱动电路…...

编程日记 2025/1/1 9:23:54

第7章 程序流程控制 - 条件分支

汇编语言是一种低级编程语言&#xff0c;它与特定计算机架构的机器码有着直接对应关系。条件分支是程序流程控制的一部分&#xff0c;允许根据某些条件来决定执行哪一段代码。在汇编中&#xff0c;这通常通过比较指令和跳转指令来实现。 以下是一些经典的汇编语言源代码示例&a…...

编程日记 2025/1/1 9:22:51

Edge如何获得纯净的启动界面

启动Edge会出现快速链接&#xff0c;推广链接&#xff0c;网站导航&#xff0c;显示小组件&#xff0c;显示信息提要&#xff0c;背景 ●复杂页面 ●精简页面 点击页面设置按钮 关闭快速链接 关闭网站导航 关闭小组件 关闭信息提要 关闭背景 关闭天气提示 精简页面看起来十分舒…...

编程日记 2025/1/1 9:21:49

gitlab的搭建及使用

1、环境准备 服务器准备 CentOS Linux release 7.9.2009 (Core)&#xff0c;内存至少4G。 修改主机名和配置ip地址 hostnamectl set-hostname <hostname> 关闭主机的防火墙 # 关闭防火墙 systemctl stop firewalld #临时关闭防火墙 systemctl disable firewalld …...

编程日记 2025/1/1 9:20:47

如何逐步操作vCenter修改DNS服务器？

在vSphere 7中有一个新功能&#xff0c;它允许管理员更改vCenter Server Appliance的FQDN和IP。因此本文将介绍如何轻松让vCenter修改DNS服务器。 vCenter修改DNS以及修改vCenter IP地址 与在部署 vCenter Server Appliance 后&#xff0c;您可以根据需要修改其 DNS 设置和 IP…...

编程日记 2025/1/1 9:14:38

XIAO ESP32 S3网络摄像头——2视频获取

本文主要是使用XIAO Esp32 S3制作网络摄像头的第2步，获取摄像头图像。 1、效果如下： 2、所需硬件 3、代码实现 3.1硬件代码： #include "WiFi.h" #include "WiFiClient.h" #include "esp_camera.h" #include "camera_pins.h"// 设…...

编程日记 2025/1/1 9:13:37

使用JMeter对Linux生产服务器进行压力测试

安装 JMeter wget https://downloads.apache.org/jmeter/binaries/apache-jmeter-5.4.1.tgz tar -xzf apache-jmeter-5.4.1.tgz cd apache-jmeter-5.4.1创建 JMeter 脚本 设置中文 选择Options—>Choose Language—>选择其他语言&#xff08;例如&#xff1a;Chinese&am…...

编程日记 2025/1/1 9:11:34

spring boot 异步线程池的使用

创建Spring Boot项目 首先&#xff0c;你需要创建一个Spring Boot项目。你可以使用Spring Initializr&#xff08;https://start.spring.io/&#xff09;来快速生成项目结构。 添加异步支持依赖 在你的pom.xml文件中&#xff0c;确保你已经添加了Spring Boot的starter依赖&…...

编程日记 2025/1/1 9:09:31

风力涡轮机缺陷检测数据集，86.6％准确识别率，11921张图片，支持yolo，PASICAL VOC XML，COCO JSON格式的标注

风力涡轮机缺陷检测数据集&#xff0c;86.6&#xff05;准确识别率&#xff0c;11921张图片&#xff0c;支持yolo&#xff0c;PASICAL VOC XML&#xff0c;COCO JSON格式的标注 数据集下载 yolov11&#xff1a; https://download.csdn.net/download/pbymw8iwm/90206849 yolov…...

编程日记 2025/1/1 9:07:30

深入浅出梯度下降与反向传播

文章目录 1. 前言2. 基本概念2.1 一元函数的导数2.2 偏导数2.3 方向导数2.4 梯度2.5 均方误差 3. 梯度下降3.1 梯度下降的公式3.2 梯度下降的类型&#xff08;优化器&#xff09; 4. 反向传播4.1 反向传播的基本步骤4.2 反向传播的数学推导 5. 实战5.1 手动求导5.2 自动求导5.3…...

编程日记 2025/1/1 9:05:28

【电机控制】基于STC8H1K28的六步换向——方波驱动（硬件篇）

【电机控制】基于STC8H1K28的六步换向——方波驱动&#xff08;硬件篇&#xff09; 文章目录 [TOC](文章目录) 前言一、硬件原理图1. MCU主控电路2. LDO电路3. 驱动电路4. 过零检测电路 二、3D图三、参考资料总结 前言 【电机控制】STC8H无感方波驱动—反电动势过零检测六步换向…...

编程日记 2025/1/1 9:04:27

手搓一个ChatUI需要分几步

只关注项目代码的同学可以直接跳转目录中的正文部分&#xff0c;查看项目仓库和功能介绍。 引言 Chatbot的UI界面设计&#xff0c;是和传统软件不同的&#xff1a;都是当面一个简洁的对话框&#xff0c;框里预备着热乎的工具&#xff0c;可以随时更新。 像我这样做工的牛马&a…...

编程日记 2025/1/1 9:00:23

2024年年度总结

前言 前一段时间&#xff0c;看到网上有人发类似于年度总结的东西&#xff0c;我想我也可以写一个&#xff0c;今年的日记也是从开头一直贯彻到了结尾 回忆起一年的事情还是有些困难 一月 回忆起有点困难&#xff0c;原因是我的日记大部分都是记录我当天地感想与情绪&#x…...

编程日记 2025/1/1 8:56:19

labelme2yolov8-seg 草稿（）

简介&#xff1a; 最近做实例分割分割&#xff0c;使用Labelme生成json格式标签后&#xff0c;需要转换为txt标签&#xff0c;才能供YOLO进行训练。 在参看b站&#xff0c;github后&#xff0c;发现GitHub有相关项目&#xff1a;lableme2yolo 一个是ultralyics官方的JSON2YO…...

编程日记 2025/1/1 8:47:11