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

包含Javascript的HTML静态页面调取本机摄像头

article 2025/6/2 20:30:35

在实际业务开发中，需要在带有摄像头的工作机上拍摄施工现场工作过程的图片，然后上传到服务器备存。

这便需要编写可以运行在浏览器上的代码，并在代码中实现Javascript调取摄像头、截取帧保存为图片的功能。

为了使用户更快掌握JS调取摄像头的实现机制，现将其与服务器端连接的代码剥离，仅展示包念JavaScript调用摄像头的HTML代码。

JsInvokeVideo.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>摄像头访问示例</title><style>body {font-family: Arial, sans-serif;text-align: center;margin: 20px;}.container {max-width: 800px;margin: 0 auto;}video {width: 100%;max-width: 640px;background-color: #000;border-radius: 8px;}canvas {display: none;}.controls {margin-top: 20px;}button {padding: 10px 20px;margin: 5px;font-size: 16px;cursor: pointer;background-color: #4CAF50;color: white;border: none;border-radius: 4px;}button:hover {background-color: #45a049;}#captureButton {background-color: #f44336;}#captureButton:hover {background-color: #d32f2f;}#downloadLink {display: none;margin-top: 10px;text-decoration: none;color: #2196F3;}.captured-image {margin-top: 20px;max-width: 100%;border-radius: 8px;}</style>
</head>
<body><div class="container"><h1>摄像头访问示例</h1><video id="videoElement" autoplay></video><canvas id="canvasElement"></canvas><div class="controls"><button id="startButton">启动摄像头</button><button id="stopButton" disabled>停止摄像头</button><button id="captureButton" disabled>拍照</button><a id="downloadLink" href="#" download="captured-image.jpg">下载图片</a></div><img id="capturedImage" class="captured-image" src="" alt="拍摄的照片"></div><script>// 获取DOM元素const videoElement = document.getElementById('videoElement');const canvasElement = document.getElementById('canvasElement');const startButton = document.getElementById('startButton');const stopButton = document.getElementById('stopButton');const captureButton = document.getElementById('captureButton');const downloadLink = document.getElementById('downloadLink');const capturedImage = document.getElementById('capturedImage');// 存储摄像头流let stream = null;// 启动摄像头startButton.addEventListener('click', async () => {try {// 请求媒体设备stream = await navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 },audio: false});// 将流连接到视频元素videoElement.srcObject = stream;// 更新按钮状态startButton.disabled = true;stopButton.disabled = false;captureButton.disabled = false;console.log('摄像头已启动');} catch (error) {console.error('访问摄像头时出错:', error);alert('无法访问摄像头，请确保您已授予权限。');}});// 停止摄像头stopButton.addEventListener('click', () => {if (stream) {// 停止所有轨道stream.getTracks().forEach(track => {track.stop();});// 清除视频源videoElement.srcObject = null;// 更新按钮状态startButton.disabled = false;stopButton.disabled = true;captureButton.disabled = true;console.log('摄像头已停止');}});// 拍照captureButton.addEventListener('click', () => {const context = canvasElement.getContext('2d');// 设置canvas尺寸与视频相同canvasElement.width = videoElement.videoWidth;canvasElement.height = videoElement.videoHeight;// 将当前视频帧绘制到canvascontext.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);// 显示拍摄的图片const imageDataURL = canvasElement.toDataURL('image/jpeg');capturedImage.src = imageDataURL;// 启用下载链接downloadLink.href = imageDataURL;downloadLink.style.display = 'inline-block';console.log('照片已拍摄');});// 页面关闭时停止摄像头window.addEventListener('beforeunload', () => {if (stream) {stream.getTracks().forEach(track => {track.stop();});}});</script>
</body>
</html>

无须配置服务器，将上述代码保存为JsInvokeVideo.html，双击运行即可。

注意：编辑该html文件时一定要保存编码为UTF-8，否则运行时会显示乱码，如下所示：

用文本文件打开该JsInvokeVideo.html文件，点击“另存为”，选择编码为“UTF-8”，重新运行会显示正常：

相关文章：

包含Javascript的HTML静态页面调取本机摄像头

在实际业务开发中&#xff0c;需要在带有摄像头的工作机上拍摄施工现场工作过程的图片&#xff0c;然后上传到服务器备存。 这便需要编写可以运行在浏览器上的代码&#xff0c;并在代码中实现Javascript调取摄像头、截取帧保存为图片的功能。 为了使用户更快掌握JS调取摄像头…...

编程日记 2025/5/31 23:50:46

PCB设计实践(三十一）PCB设计中机械孔的合理设计与应用指南

一、机械孔的基本概念与分类 机械孔是PCB设计中用于实现机械固定、结构支撑、散热及电气连接的关键结构元件&#xff0c;其分类基于功能特性、制造工艺和应用场景的差异&#xff0c;主要分为以下几类&#xff1a; 1. 金属化机械孔 通过电镀工艺在孔内壁形成导电层&#xff0c;…...

编程日记 2025/6/2 10:52:02

deepseek问答记录：请讲解一下torch.full_like()

torch.full_like() 是 PyTorch 中的一个张量创建函数&#xff0c;用于创建一个与输入张量形状相同但所有元素值都填充为指定标量值的新张量。下面详细讲解其用法和特性&#xff1a; 1. 函数签名 torch.full_like(input, fill_value, *, dtypeNone, layoutNone, deviceNone, r…...

编程日记 2025/6/2 10:25:39

【Linux篇章】Linux 进程信号2：解锁系统高效运作的 “隐藏指令”，开启性能飞跃新征程（精讲捕捉信号及OS运行机制）

本篇文章将以一个小白视角&#xff0c;通俗易懂带你了解信号在产生&#xff0c;保存之后如何进行捕捉&#xff1b;以及在信号这个话题中&#xff1b;OS扮演的角色及背后是如何进行操作的&#xff1b;如何理解用户态内核态&#xff1b;还有一些可以引出的其他知识点&#xff1b;…...

编程日记 2025/6/2 4:15:27

多功能秒达开源工具箱源码｜完全开源的中文工具箱

源码介绍 完全开源的中文工具箱永远的自由软件轻量级运行全平台支持&#xff08;包括ARMv8&#xff09;类似GPT的智能支持高效UI高度集成提供Docker映像和便携式版本支持桌面版开源插件库 下载地址 百度网盘下载 提取码&#xff1a;p9ck ▌本文由 6v6-博客网 整理分享 ▶ 更多…...

编程日记 2025/6/2 10:51:22

如何在腾讯云 OpenCloudOS 上安装 Docker 和 Docker Compose

从你提供的 /etc/os-release 文件内容来看&#xff0c;你的服务器运行的是 OpenCloudOS 9.2。这是一个基于 CentOS 和 RHEL 的开源操作系统&#xff0c;因此它属于 CentOS/RHEL 系列。 关键信息总结 操作系统名称&#xff1a;OpenCloudOS版本&#xff1a;9.2ID&#xff1a;op…...

编程日记 2025/5/31 23:44:30

清理skywalking历史索引

import requests from datetime import datetime, timedelta import os import re# 配置参数 ES_HOST os.getenv("ES_HOST", "http://192.168.0.250:9200") # ES地址 ES_USER os.getenv("ES_USER", "") # 用户…...

编程日记 2025/6/2 7:53:03

用nz-tabel写一个合并表格

用nz-tabel写一个合并表格 <nz-table #basicTable [nzData]"tableSearchStatus.dataList" nzBordered><thead><tr><th>班级</th><th>姓名</th><th>年龄</th><th>电话</th></tr></thead&…...

编程日记 2025/6/2 10:36:03

matlab计算转子系统的固有频率、振型、不平衡响应

可以计算转子系统的固有频率、振型、不平衡响应 MatrixRiccati/code/Dichotomy_1 (2).m , 2210 MatrixRiccati/code/Dichotomy_1.m , 2210 MatrixRiccati/code/RiccatiSY_1.m , 2756 MatrixRiccati/code/Trans1x (2).m , 451 MatrixRiccati/code/Trans1x.m , 451 MatrixRiccat…...

编程日记 2025/5/31 23:41:25

leetcode hot100刷题日记——29.合并两个有序链表

解答&#xff1a; 方法一&#xff1a;递归 递归的边界条件是啥呢&#xff1f; 递归别想那么多具体步骤&#xff0c;考虑大步骤&#xff0c;小的递归自己会去做的 class Solution { public:ListNode* mergeTwoLists(ListNode* list1, ListNode* list2) {//递归比较大小//先考虑…...

编程日记 2025/6/2 10:17:46

【机器人】具身导航 VLN 最新论文汇总 | Vision-and-Language Navigation

本文汇总了具身导航的论文&#xff0c;供大家参考学习&#xff0c;涵盖2025、2024、2023等 覆盖的会议和期刊&#xff1a;CVPR、IROS、ICRA、RSS、arXiv等等 论文和方法会持续更新的&#xff5e; 一、&#x1f3e0; 中文标题版 2025 &#x1f606; [2025] WMNav&#xff1a…...

编程日记 2025/6/2 6:09:16

Windows 安装 WSL2 并运行 Ubuntu 22.04 指南

Windows 安装 WSL2 并运行 Ubuntu 22.04 指南 本文为 Windows 10 和 Windows 11 用户提供从零开始搭建 WSL2 环境的详细指南&#xff0c;涵盖安装 Ubuntu 22.04、自定义存储位置、性能优化以及常见问题排查。无论你是开发者、运维工程师还是 Linux 爱好者&#xff0c;本文将助你…...

编程日记 2025/6/2 6:05:03

AI情感陪伴在医疗领域的核心应用潜力

一、精准情绪监测与干预 多模态情感识别系统 通过整合语音语调分析&#xff08;降调与语速异常检测抑郁倾向&#xff09;、微表情捕捉&#xff08;面部肌肉运动追踪焦虑状态&#xff09;、生理指标监测&#xff08;心率变异幅度反映应激水平&#xff09;等技术&#xff0c;构建…...

编程日记 2025/5/31 23:37:07

【计算机网络】第1章：概述—分组延时、丢失和吞吐量

目录 一、分组延时、丢失 1. 节点处理延时&#xff1a; 2. 排队延时&#xff1a; 3. 传输延时: 4. 传播延时: 5. 节点延时 6. 排队延时 7. 分组丢失 二、吞吐量 三、总结 &#xff08;一&#xff09;分组延时 1. 处理延时&#xff08;Processing Delay&#xff09; …...

编程日记 2025/6/2 10:10:10

Python Day38

Task&#xff1a; 1.Dataset类的__getitem__和__len__方法&#xff08;本质是python的特殊方法&#xff09; 2.Dataloader类 3.minist手写数据集的了解 1. Dataset 类的 __getitem__ 和 __len__ 方法 在 PyTorch (或类似深度学习框架) 中&#xff0c;Dataset 是一个抽象基类&a…...

编程日记 2025/5/31 23:34:52

DeepSeek R1 模型小版本升级，DeepSeek-R1-0528都更新了哪些新特性？

DeepSeek-R1‑0528 技术剖析&#xff1a;思维链再进化&#xff0c;推理性能飙升 目录 版本概览深度思考能力再升级基准测试成绩功能与体验更新API 变动与示例模型开源与下载结语 版本概览 DeepSeek 团队今日发布 DeepSeek‑R1‑0528 —— 基于 DeepSeek V3 Base&#xff08;2…...

编程日记 2025/6/2 9:11:38

线路板厂家遇到的PCB元件放置的常见问题有哪些?

印刷电路板现在无处不在。尽管大多数人认为这是理所当然的&#xff0c;但工程师和设计师们充分意识到这些电路开发和生产背后的巨大努力。传统的PCB生产涉及复杂的机械和高昂的前期成本&#xff0c;因此必须将制造外包给专业工厂。 说到交货时间&#xff0c;你可能需要几周的时…...

编程日记 2025/6/2 7:30:49

【C/C++】无限长有序数组中查找特定元素

在无限长有序数组中查找特定元素&#xff0c;由于数组长度未知&#xff0c;需先定位搜索范围&#xff0c;再进行二分查找。以下是C实现&#xff1a; #include <iostream> #include <vector> #include <climits> using namespace std;// 假设数组访问函数&am…...

编程日记 2025/6/1 23:38:31

SQL正则表达式总结

这里写目录标题 一、元字符二、正则表达函数1、 regexp_like(x,pattern[,match_option])2、 regexp_instr(x,pattern[,start[,occurrence[,return_option[, match_option]]]]) 3、 REGEXP_SUBSTR(x,pattern[,start[,occurrence[, match_option]]]) 4、 REGEXP_REPLACE(x,patter…...

编程日记 2025/6/2 8:09:11

力扣经典算法篇-13-接雨水（较难，动态规划，加法转减法优化，双指针法）

1、题干 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3…...

编程日记 2025/6/2 2:14:39

STM32 -- USB虚拟串口通信

本篇操作: 通过CubeMX Keil&#xff0c;配置STM32作为USB设备端&#xff0c;与电脑上位机进行通信&#xff08;CDC&#xff09;&#xff1b;通用带USB功能的 STM32 芯片 &#xff08;如F1、F4等&#xff0c;系统时钟配置不同&#xff0c;代码通用&#xff09;。 目录 一、 S…...

编程日记 2025/6/2 10:40:03

uni-app开发特殊社交APP

uni-app开发特殊社交APP 目录 1.展示APP功能 2.展示项目结构 3.关于我的GitHub 引言 博主最近自己在GitHub上面上传了一个关于社交软件的项目&#xff08;该项目早已开发完毕&#xff09;, 这个社交软件比较特殊, 被称之为blind-date&#xff0c; blind-date 是基于 uni-…...

编程日记 2025/6/1 23:48:10

Linux中Shell脚本的常用命令

一、设置主机名称 1、通过修改系统文件来修改主机名称 [rootsakura1 桌面]# vim /etc/hostname sakura /etc/hostname&#xff1a;Linux 系统中存储主机名的配置文件。修改完文件后&#xff0c;在当前的shell中是不生效的&#xff0c;需要关闭当前shell后重新开启才能看到效…...

编程日记 2025/6/2 10:44:07

RabbitMQ项目实战

先参考文章&#xff1a;&#xff08;必看&#xff09; 06-MQ基础_mq服务-CSDN博客 07-MQ高级&#xff08;幂等性&#xff09;-CSDN博客 https://cloud.iocoder.cn/message-queue/rabbitmq/#_2-0-%E5%BC%95%E5%85%A5%E4%BE%9D%E8%B5%96%E4%B8%8E%E9%85%8D%E7%BD%AE 1、Rabbi…...

编程日记 2025/6/1 23:52:34

安卓开发用到的设计模式（3）行为型模式

安卓开发用到的设计模式&#xff08;3&#xff09;行为型模式 文章目录 安卓开发用到的设计模式&#xff08;3&#xff09;行为型模式1. 命令模式&#xff08;Command Pattern&#xff09;2. 策略模式&#xff08;Strategy Pattern&#xff09;3. 观察者模式&#xff08;Observ…...

编程日记 2025/6/2 10:01:09

生成模型：从数据学习到创造的 AI 新范式

一、生成模型&#xff1a;定义与核心逻辑 生成模型是一类通过学习数据潜在分布来创造新样本的机器学习模型。其核心目标是构建数据的概率分布模型 P(X)&#xff0c;使生成的样本 X^ 与真实数据 X 具有相似的统计特征。 1.1 与判别模型的本质区别 维度生成模型判别模型核心目…...

编程日记 2025/6/2 14:35:39

尚硅谷redis7 90-92 redis集群分片之集群扩容

90 redis集群分片之集群扩容 三主三从不够用了&#xff0c;进行扩容变为4主4从 问题&#xff1a;1.新建两个redis实例&#xff0c;怎么加入原有集群&#xff1f;2.原有的槽位分3段&#xff0c;又加进来一个槽位怎么算&#xff1f; 新建6387、6388两个服务实例配置文件新建后启…...

编程日记 2025/6/2 20:29:39

RabbitMQ性能调优：关键技术、技巧与最佳实践

RabbitMQ作为一款高可靠、高扩展性的消息中间件&#xff0c;其性能表现直接影响到分布式系统的吞吐量和响应延迟。本文基于RabbitMQ官方文档和最佳实践&#xff0c;结合核心性能优化方向&#xff0c;详细探讨RabbitMQ性能调优的关键技术、技巧和策略。 通过以下优化策略&#…...

编程日记 2025/6/2 17:47:39

系统架构中的组织驱动：康威定律在系统设计中的应用

康威定律&#xff08;Conway’s Law&#xff09; 是由计算机科学家 Melvin Conway 在1967年提出的理论&#xff0c;其核心观点是&#xff1a;“系统的架构设计会不可避免地反映其开发组织的沟通结构。换句话说&#xff0c;软件系统的结构会与构建它的团队的组织结构高度相似。 …...

编程日记 2025/6/2 20:12:59

TypeScript 中高级类型 keyof 与 typeof的场景剖析。

文章目录 前言一、typeof&#xff1a;从值到类型的映射1. 核心概念2. 类型推导示例3. 常见用途 二、keyof&#xff1a;从类型到键的映射1. 核心概念2. 常见用途 三、typeof keyof&#xff1a;强强联合的实战场景1. 场景一&#xff1a;对象属性的安全访问2. 场景二&#xff1a;…...

编程日记 2025/6/2 0:04:35