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

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

news 2025/11/9 0:14:23

可以通过 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

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/11/7 14:07:46

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/8/21 15:41:11

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/11/8 7:49:49

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/11/8 10:17:49

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/11/7 19:35:03

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/11/7 20:00:27

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

编程新知 2025/11/7 20:08:38

前端工具库lodash与lodash-es区别详解

lodash 和 lodash-es 是同一工具库的两个不同版本&#xff0c;核心功能完全一致&#xff0c;主要区别在于模块化格式和优化方式&#xff0c;适合不同的开发环境。以下是详细对比&#xff1a; 1. 模块化格式 lodash 使用 CommonJS 模块格式&#xff08;require/module.exports&a…...

编程新知 2025/11/5 21:29:24