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

使用 Vue3 实现摄像头拍照功能

news 来源：原创 2025/5/26 9:13:18

参考资料:MediaDevices.getUserMedia() - Web API | MDN

重要: navigator.mediaDevices.getUserMedia 需要在安全的上下文中运行。现代浏览器要求摄像头和麦克风的访问必须通过 HTTPS 或 localhost（被视为安全的本地环境）进行,如果上传服务器地址是http开头的，而不是https，可以使用免费的Let's Encrypt打开,例子：进入宝塔-点击网络-点击自己的的链接-点击ssl-选择Let's Encrypt配置就好

模板部分

<video> 标签：
- 作用：用于显示摄像头捕获的视频流。
- 属性：
  - ref="videoRef"：通过 ref 获取该 DOM 元素的引用，以便在脚本中操作。
  - autoplay：自动播放视频流，无需用户手动点击播放。
  - playsinline：在移动设备上防止视频自动全屏播放，保持在页面内嵌显示。
拍摄按钮：
- 使用一个 <div> 元素作为按钮，并绑定 @click="shoot" 事件，当用户点击按钮时触发 shoot 方法。
- 内部嵌套一个小的 <div class="shoot_buttons"></div>，用于实现按钮的视觉效果
显示捕获的图片：
- 使用一个 <div class="images"> 容器包裹所有捕获的图片。
- 通过 v-for="(img, index) in images" 指令遍历 images 数组，为每个图片生成一个 <img> 元素。
- :key="index"：为每个循环生成的元素提供唯一的键值，优化渲染性能。
- :src="img"：绑定图片的来源为数组中的每个 Data URL。

<template><div class="container"><!-- 视频元素，用于显示摄像头捕获的视频流 --><video ref="videoRef" autoplay playsinline></video><!-- 拍摄按钮 --><div @click="shoot" class="shoot_button"><div class="shoot_buttons"></div></div><!-- 循环显示所有捕获的图片 --><div class="images"><img v-for="(img, index) in images" :key="index" :src="img" /></div></div>
</template>

js部分

引入 Vue 的响应式 API：
- ref：用于创建响应式的数据引用。
- onMounted：生命周期钩子，在组件挂载完成后执行相应的操作。
获取视频 DOM 元素的引用：
- const videoRef = ref(null);：通过 ref 获取 <video> 元素，以便在脚本中操作其 srcObject 属性，显示视频流。
定义存储图片的数组：
- const images = ref([]);：创建一个响应式数组，用于存储所有拍摄的图片的 Data URL。
计数器限制拍摄数量：
- let count = 0;：定义一个计数器，限制用户最多只能拍摄 10 张照片。
- 在 shoot 方法中，每拍摄一张照片，计数器加一，当计数器超过 9 时，弹出警告并停止拍摄。
启动摄像头：
- startCamera 函数使用 navigator.mediaDevices.getUserMedia 请求用户的摄像头权限。
- 请求成功后，将获取到的 MediaStream 赋值给视频元素的 srcObject，从而在页面上显示视频流。
- 捕获异常并在控制台输出错误信息，以便调试和提示用户。
组件挂载后启动摄像头：
- onMounted 钩子确保在组件挂载完成后立即调用 startCamera，启动摄像头。
实现拍摄功能：
- shoot 方法在用户点击拍摄按钮时触发。
- 检查拍摄次数是否超过限制，若超过则弹出警告并返回。
- 获取当前视频流的帧，通过创建一个 <canvas> 元素，将视频帧绘制到 canvas 上。
- 使用 canvas.toDataURL("image/png") 将 canvas 内容转换为 Base64 编码的图片 URL。
- 将生成的 Data URL 推入 images 数组，触发页面上图片的循环显示。

<script setup>
import { ref, onMounted } from "vue";// 获取存储的DOM节点
const videoRef = ref(null);// 定义 images 用于存储捕获的图片数组
const images = ref([]);// 计数器，用于限制拍摄的图片数量
let count = 0;// 定义一个函数来请求用户的摄像头权限并在成功后设置视频流
const startCamera = async () => {try {// 请求用户媒体（仅视频）const stream = await navigator.mediaDevices.getUserMedia({video: true,audio: false,});// 将获取到的 MediaStream 赋值给视频元素的 srcObjectvideoRef.value.srcObject = stream;} catch (error) {console.error("无法访问摄像头", error);}
};// 当组件挂载完成后启动摄像头
onMounted(() => {startCamera();
});// 点击拍摄
const shoot = () => {if (count > 9) {alert("最多只能拍摄10张照片");return;}count++;const video = videoRef.value;if (!video) return;// 创建一个canvas元素const canvas = document.createElement("canvas");canvas.width = video.videoWidth;canvas.height = video.videoHeight;// 在canvas上绘制当前的视频帧const ctx = canvas.getContext("2d");ctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 将canvas内容转换为Data URL并推入 images 数组const dataURL = canvas.toDataURL("image/png");images.value.push(dataURL);
};
</script>

样式部分

<style scoped>
/* 容器样式 */
.container {font-family: Arial, sans-serif; /* 设置字体 */text-align: center; /* 文本居中 */margin-top: 50px; /* 顶部外边距 */
}/* 视频元素样式 */
video {width: 300px; /* 宽度 */height: auto; /* 高度自动调整以保持视频的原始比例 */background-color: #000; /* 背景颜色为黑色，防止视频加载前显示空白 */border: 1px solid #ccc; /* 灰色边框 */
}/* 拍摄按钮样式 */
.shoot_button {margin-top: 10px;width: 60px;height: 60px;border: 4px solid red;border-radius: 50%;display: flex;align-items: center;justify-content: center;position: fixed;left: 50%;transform: translateX(-50%);cursor: pointer;background-color: white;
}.shoot_buttons {width: 30px;height: 30px;background-color: red;border-radius: 50%;
}/* 图片容器样式 */
.images {width: 850px;height: auto;display: flex;flex-wrap: wrap;justify-content: center;margin-top: 20px;border: 2px gray solid;padding: 10px;box-sizing: border-box;position: fixed;left: 50%;transform: translateX(-50%);bottom: 20px;background-color: rgba(255, 255, 255, 0.8);
}/* 图片样式 */
img {width: 70px;height: 80px;margin: 10px;border: 1px solid #ccc;object-fit: cover;
}
</style>

代码功能总结

摄像头访问与视频流显示：
- 通过 navigator.mediaDevices.getUserMedia 请求用户的摄像头权限。
- 成功后，将获取到的 MediaStream 赋值给 <video> 元素的 srcObject，实时显示摄像头捕获的视频流。
拍摄照片：
- 用户点击拍摄按钮时，触发 shoot 方法。
- 方法内部创建一个 <canvas> 元素，将当前视频帧绘制到 canvas 上。
- 将 canvas 内容转换为 Base64 编码的 Data URL，并推入 images 数组中。
图片展示与数量限制：
- images 数组存储所有拍摄的照片，通过 v-for 循环在页面上显示。
- 使用计数器 count 限制最多拍摄 10 张照片，防止内存占用过高。
界面样式与布局：
- 使用 CSS 样式美化视频、按钮和图片的展示。
- 确保界面在不同设备上有良好的用户体验，特别是在移动设备上的布局调整。

完整代码

<template><div class="container"><!-- 视频元素，用于显示摄像头捕获的视频流 --><video ref="videoRef" autoplay playsinline></video><!-- 按钮 --><div @click="shoot" class="shoot_button"><div class="shoot_buttons"></div></div><!-- 循环显示所有捕获的图片 --><div class="images"><img v-for="(img, index) in images" :key="index" :src="img" /></div></div>
</template><script setup>
import { ref, onMounted } from "vue";
// 获取存储的DOM节点
const videoRef = ref(null);
// 定义 images 用于存储捕获的图片数组
const images = ref([]);
// 计数
let count = 0;
// 定义一个函数来请求用户的摄像头权限并在成功后设置视频流
const startCamera = async () => {try {// 请求用户媒体（仅视频）const stream = await navigator.mediaDevices.getUserMedia({video: true,audio: false,});videoRef.value.srcObject = stream;} catch (error) {console.error("无法访问摄像头", error);}
};// 当组件挂载完成后启动摄像头
onMounted(() => {startCamera();
});// 点击拍摄
const shoot = () => {if (count > 9) {alert("最多只能拍摄10张照片");return;}count++;const video = videoRef.value;if (!video) return;// 创建一个canvas元素const canvas = document.createElement("canvas");canvas.width = video.videoWidth;canvas.height = video.videoHeight;// 在canvas上绘制当前的视频帧const ctx = canvas.getContext("2d");ctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 将canvas内容转换为Data URL并推入 images 数组const dataURL = canvas.toDataURL("image/png");images.value.push(dataURL);
};
</script><style scoped>
/* 容器样式 */
.container {font-family: Arial, sans-serif; /* 设置字体 */text-align: center; /* 文本居中 */margin-top: 50px; /* 顶部外边距 */
}/* 视频元素样式 */
video {width: 300px; /* 宽度 */height: auto; /* 高度自动调整以保持视频的原始比例 */background-color: #000; /* 背景颜色为黑色，防止视频加载前显示空白 */border: 1px solid #ccc; /* 灰色边框 */
}/* 按钮样式 */
.shoot_button {margin-top: 10px;width: 30px;height: 30px;border: 2px solid red;border-radius: 50%;display: flex;align-items: center;justify-content: center;position: fixed;left: 50%;transform: translateX(-50%);
}
.shoot_buttons{width: 20px;height: 20px;background-color: red;border-radius: 50%;
}
/* 图片容器样式 */
.images {width: 850px;height: 100px;display: flex;flex-wrap: wrap;justify-content: center;margin-top: 200px;border: 2px gray solid;position: fixed;left: 50%;transform: translateX(-50%);
}/* 图片样式 */
img {width: 70px;height: 80px;margin-right: 10px;margin-top: 10px;
}
</style>

效果图

使用 Vue3 实现摄像头拍照功能

参考资料:MediaDevices.getUserMedia() - Web API | MDN 重要: navigator.mediaDevices.getUserMedia 需要在安全的上下文中运行。现代浏览器要求摄像头和麦克风的访问必须通过 HTTPS 或 localhost（被视为安全的本地环境）进行,如果上传服务器地址是http…...

编程日记 2025/5/26 9:13:18

ARM学习（38）多进程多线程之间的通信方式

ARM学习（38）ARM学习（38）多进程多线程之间的通信方式一、问题背景笔者在调试模拟器的时候，碰到进程间通信的问题，一个进程在等另外一个进程ready的时候，迟迟等不到，然后通过调试发现，另外一个进程变量已经变化了，但是当前进程变量没变化，需要了解进程间通信的方式…...

编程日记 2025/5/25 18:15:24

CEF127 编译指南 MacOS 篇 - 拉取 CEF 源码(五)

1. 引言在完成了所有必要工具的安装和配置后，我们进入到获取 CEF 源码的阶段。对于 macOS 平台，CEF 的源码获取过程需要特别注意不同芯片架构（Intel 和 Apple Silicon）的区别以及版本管理。本文将详细介绍如何在 macOS 系统上获…...

编程日记 2025/5/26 8:58:54

网络安全笔记

#### 网络各层安全协议链路层：链路隧道协议、加密技术网络层：包过滤机制、NAT、IPsec协议、 VPN 传输层/会话层 ：SSL/TLS 协议应用层：SHTTP、HTTPS、PGP、S/MIME等 ### 网络安全技术第二代安全技术 - 保护 - 响应 - 检测…...

编程日记 2025/5/20 10:26:23

LNMP+discuz论坛

0.准备文章目录 0.准备1.nginx2.mysql2.1 mysql82.2 mysql5.7 3.php4.测试php访问mysql5.部署 Discuz6.其他 yum源： # 没有wget，用这个 # curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo[rootlocalhost ~]#…...

编程日记 2025/5/23 22:52:38

python 曲线拟合，曲线拟合交点

目录效果图：源代码：效果图：源代码： import json import os import shutilimport cv2 import numpy as npfrom numpy.polynomial.polynomial import Polynomialdef calculate_distance(x1, y1, x2, y2):return np.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)def get_new_g…...

编程日记 2025/5/26 9:11:36

【2025最新计算机毕业设计】基于SSM框架的宠物领养系统【提供源码+答辩PPT+文档+项目部署】

作者简介：✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容：🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...

编程日记 2025/5/26 9:08:16

C语言经典100例

文章目录前言123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525355565859606162636465 前言以下题目大部分来自于C语言经典100例 1 题目：有1、2、3、4个数字，能组成多少个互不相同且无重复数字的…...

编程日记 2025/5/26 9:06:43

利用 Jsoup 进行高效 Web 抓取与 HTML 处理

Jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 JQuery 的操作方法来取出和操作数据。官网：https://jsoup.org/ 中文文档：Jsou…...

编程日记 2025/5/22 16:45:47

线上问题——频繁 Full GC 问题的排查思路

文章目录一、查看 GC 日志二、分析内存泄漏三、检查对象生命周期四、优化代码五、调整垃圾回收策略六、使用监控工具一、查看 GC 日志启用 GC 日志在 Java 应用中，需要在启动参数中添加适当的参数来启用 GC 日志记录。可以使用-XX:PrintGCDetails、-XX:PrintGCD…...

编程日记 2025/5/22 3:40:59

ParrotOS，一个与kali类似的渗透测试操作系统

介绍 Parrot Security（ParrotOS，Parrot）是一个基于 Debian Stable 的免费开源 GNU/Linux 发行版，专为安全专家、开发人员和注重隐私的人设计。它包括一个完整的便携式武器库，用于 IT 安全和数字取证操作。它还包括开…...

编程日记 2025/5/22 20:21:07

网络视频监控平台/安防监控/视频综合管理Liveweb视频汇聚平台解决方案

一、当前现状分析当前视频资源面临以下问题： 1）不同单位在视频平台建设中以所属领域为单位，设备品牌众多，存在的标准不一，各系统之间也没有统一标准； 2）各单位视频平台建设分散、统筹性差&am…...

编程日记 2025/5/22 8:29:54

《Java核心技术I》Swing选择组件中的复选框

选择组件除了输入，也需要选择组件，接下来介绍，复选框、单选按钮、选项列表以及滑块。复选框需要紧邻标签来说明其用途。 bold new JCheckBox("Bold"); 调用setSelected方法来选中或取消复选框 bold.setSelected(true); isSelec…...

编程日记 2025/5/25 8:29:18

ES6学习Generator 函数（生成器）(八)

这里写目录标题一、基本概念二、代码三、Generator 函数的异步应用三级目录一、基本概念 Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同，Generator 函数有多种理解角度。语法上，首先可以把它理解成&#x…...

编程日记 2025/5/26 5:08:23

练习题最小栈

最小栈最小栈 class MinStack {private Stack<Integer> stack;private Stack<Integer> minstack;public MinStack() {stacknew Stack<>();minstacknew Stack<>();}public void push(int val) {stack.push(val);if(minstack.empty()){minstack.push(…...

编程日记 2025/5/21 17:23:11

windows环境下pytorch安装踩坑

目录 1 前言2 安装Anaconda3 安装CUDA4 创建Python3.9环境5 安装Pytorch环境5.1 conda方式5.2 pip方式 6 验证是否安装成功7 注意事项7.1 no module named torch问题7.12 torch.cuda.is_available()返回False问题 8 最佳实践9 总结 1 前言这两天由于要使用Genesis，…...

编程日记 2025/5/25 12:33:13

从图纸泄密到全面安全防护 —— 域智盾软件在设计公司的应用

从图纸泄密到全面安全防护 —— 域智盾软件在设计公司的应用作为一家设计公司的老板，我深知设计图纸对公司来说有多么重要。每一份设计图纸不仅凝聚着我们团队的智慧和辛勤劳动，也代表着公司的技术创新和核心竞争力。然而，前段时间的一次…...

编程日记 2025/5/24 14:23:59

【ELK】Filebeat采集Docker容器日志

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录介绍filebeat是如何工作的使用部署filebeat 介绍 Filebeat 是一个用于转发和集中日志数据的轻量级传送器。 Filebeat 作为agent安装在服务器上，监视指…...

编程日记 2025/5/22 10:06:55

基于java web在线商城购物系统源码+论文

一、环境信息开发语言：JAVA JDK版本：JDK8及以上数据库：MySql5.6及以上 Maven版本：任意版本操作系统：Windows、macOS 开发工具：Idea、Eclipse、MyEclipse 开发框架：SpringbootHTMLjQueryMysq…...

编程日记 2025/5/22 13:33:03

MONI后台管理系统-swagger3(springdoc-openapi)集成

springdoc-openapi Java 库有助于使用 Spring Boot 项目自动生成 API 文档。springdoc-openapi 通过在运行时检查应用程序来根据 Spring 配置、类结构和各种注释推断 API 语义。该库会自动生成 JSON/YAML 和 HTML 格式的页面文档。生成的文档可以使用swagger-api注释进行补充。…...

编程日记 2025/5/21 23:51:02

常见八股文04

63.索引的优缺点优点 1.提高了查询性能 2.支持唯一性约束，避免插入重复数据 3.支持唯一性约束：在多表连接时，索引能够减少连接所需的时间和资源缺点 1.占用额外存储空间:特别是在大型数据表中，索引可能会占用大量的空间 …...

编程日记 2025/5/21 8:05:05

php各个版本的特性以及绕过方式

一.php各个版本的特性二.绕过正则匹配的常见方式 1.绕过空格 a.空变量$ l$s b.环境变量IFS（默认情况下IFS为空格、制表符和换行符） l${IFS}s c.重定向符（<,>） cat < file.txt //把file.txt的内容给cat命令&…...

编程日记 2025/5/26 6:04:07

允许某段网络访问Linux服务器上的MariaDB

在Linux服务器上安装了MariaDB，默认情况下，只允许本机访问。在某些特殊的情况下，要允许外部访问。具体操作流程如下： 1 修改服务器配置 vi /etc/my.cnf.d/server.cnf取消下面的注释，以便允许外来的主机访问。 bind-…...

编程日记 2025/5/25 1:46:50

【C语言】信号

【C语言】信号信号1. 信号状态2. 信号处理方式3. 信号注册相关函数4. 信号集相关函数信号 1. 信号状态信号有三种状态：产生、未决和递达信号产生方式： 按键产生，ctrlc 产生中断信号SIGINT，ctrl \ 产生退出信号 SIGQUIT并…...

编程日记 2025/5/26 8:36:47

2023年下半年软考信息安全工程师案例分析及答案解析

试题一（16分）回答问题1至问题6，将解答填入答题纸对应的解答栏内。问题1（4分）已知DES算法S盒如下，请补全S盒空缺的数据（1）、（2）、（3）、（4）。【参考答案】3、13、15、0 问题2（2分）已知S盒的输入为110011，请计算经过S盒变换之后的二进制输出。【参考…...

编程日记 2025/5/22 16:23:02

攻防世界easyphp

<?php highlight_file(__FILE__); $key1 0; $key2 0;$a $_GET[a]; $b $_GET[b];if(isset($a) && intval($a) > 6000000 && strlen($a) < 3){if(isset($b) && 8b184b substr(md5($b),-6,6)){$key1 1;}else{die("Emmm...再想想&quo…...

编程日记 2025/5/25 4:41:35

【WRF教程第3.6期】预处理系统 WPS 详解：以4.5版本为例

预处理系统 WPS 详解：以4.5版本为例 Geogrid/Metgrid 插值选项详解1. 插值方法的工作机制2. 插值方法的详细说明2.1 四点双线性插值（four_pt）2.2 十六点重叠抛物线插值（sixteen_pt）2.3 简单四点平均插值（av…...

编程日记 2025/5/26 4:30:30

图解HTTP-HTTP协议

HTTP HTTP是一种不保存状态，即无状态的协议。HTTP协议自身不对请求和响应之间的通信进行保存。为了保存状态因此后面也有一些技术产生比如Cookies技术。 HTTP是通过URI定位网上的资源，理论上将URI可以访问互联网上的任意资源。如果不是访问特定的资源…...

编程日记 2025/5/22 13:34:59

Linux基本命令

Linux基本命令一条Linux命令由：命令本身 [可选项] [参数] ls 展示 ls命令的选项: -a 选项，可以展示出隐藏的内容以 . 开头的文件或文件夹默认被隐藏，需要-a才能显示出来 **-l **选项,以列表的形式展示内容,并展示更多细节-h 选项&…...

编程日记 2025/5/23 19:34:07

【win10+RAGFlow+Ollama】搭建本地大模型助手（教程+源码）

一、RAGFlow简介 RAGFlow是一个基于对文档深入理解的开源RAG（Retrieval-augmented Generation，检索增强生成）引擎。主要作用： 让用户创建自有知识库，根据设定的参数对知识库中的文件进行切块处理，用户向大…...

编程日记 2025/5/22 10:29:11

.ejs 后缀文件 - 嵌入式JavaScript模板

嵌入式JavaScript模板（Embedded JavaScript templates）文件是以.ejs 后缀。它是一种模板引擎，它允许你在你的HTML文件中直接嵌入JavaScript代码。EJS模板可以包含HTML代码、JavaScript表达式、控制结构（如if语句和循环&#xff09…...

编程日记 2025/5/24 1:59:09

springboot461学生成绩分析和弱项辅助系统设计(论文+源码)_kaic

摘要传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，在计算机上安装学生成绩分析和弱项辅助系统软件来发挥其高效地信息处理的作…...

编程日记 2025/5/26 8:45:28

【从零开始入门unity游戏开发之——C#篇23】C#面向对象继承——`as`类型转化和`is`类型检查、向上转型和向下转型、里氏替换原则（LSP）

文章目录一、as类型转化和is类型检查1、as 关键字使用场景：语法：示例：特点： 2、is 关键字使用场景：语法：示例：特点： 3、总结二、向上转型和向下转型1、向上转型示例： 2…...

编程日记 2025/5/22 18:51:12

“魔法糖果盒的秘密：用朴素贝叶斯算法猜糖果颜色”

想象一下，你有一个神奇的糖果盒，这个糖果盒里有两种糖果：红色的和蓝色的。你闭上眼睛，从盒子里拿出一个糖果，然后尝一尝，你想知道这个糖果是红色的还是蓝色的。朴素贝叶斯算法就像是一个魔法规则&#xff0…...

编程日记 2025/5/26 8:24:03

使用“NodeMCU”、“红外模块”实现空调控制

项目思路空调遥控器之所以能够实现对空调的控制，是因为它能够向空调发射出特定的红外信号。从理论上来说，任何能够发射出这种相同红外信号的红外发射器，都可以充当空调遥控器（这也正是手机能够控制多种不同品牌空调的原因所在&a…...

编程日记 2025/5/26 6:25:58

了解cuda的统一内存

1. CUDA 6中的统一内存在CUDA 6中，从Kepler GPU架构（计算能力3.0或更高）开始，在64位Windows 7、8和Linux操作系统（内核2.6.18）上开始支持统一内存. 从CUDA 6开始，NVIDIA推出了CUDA平台历史上…...

编程日记 2025/5/24 9:11:30

MySQL索引

2.1 索引概述 2.1.1 介绍索引（index）是帮助MySQL高效获取数据的数据结构(有序)。在数据之外，数据库系统还维护着满足特定查找算法的数据结构，这些数据结构以某种方式引用（指向）数据， 这样就…...

编程日记 2025/5/24 22:21:39

会话控制（cookie、session 和 token）

1. 介绍所谓会话控制就是对会话进行控制HTTP 是一种无状态的协议，它没有办法区分多次的请求是否来自于同一个客户端， 无法区分用户，而产品中又大量存在的这样的需求，所以我们需要通过会话控制来解决该问题。常见的会话控制…...

编程日记 2025/5/26 8:31:12

stm32 rtc 详解

目录 L151 RTC 唤醒代码方式一通过 RTC Alarm Interrupt：(基本和F1系列一样)： L151 RTC 唤醒代码方式二通过 RTC WakeUp Interrupt F103VE RTC 闹钟唤醒代码 （103RC 没有闹钟中断）： RTC（real time…...

编程日记 2025/5/23 23:52:44

D 咖智能饮品机器人：开启商业新篇

在科技迅猛发展的当下，智能机器人正逐步渗透到各个商业领域，D 咖智能饮品机器人便是其中的佼佼者，它的出现为饮品行业带来全新的发展契机，有望开启商业新篇。从大环境来看，消费者对于饮品的需求日益多元化和个性化。他…...

编程日记 2025/5/22 22:57:06

使用FakeSMTP创建本地SMTP服务器接收邮件具体实现。

以下代码来自Let’s Go further节选。具体说明均为作者本人理解。编辑邮件模版主要包含三个template: subject：主题plainBody： 纯文本正文htmlBody：超文本语言正文 {{define "subject"}}Welcome to Greenlight!{{end}} {{def…...

编程日记 2025/5/23 10:49:55

重拾设计模式--模板方法模式

文章目录一、模板方法模式概述二、模板方法模式UML图三、优点1代码复用性高2可维护性好3扩展性强四、缺点五、使用场景六、C 代码示例1七、 C 代码示例2 一、模板方法模式概述定义：定义一个操作中的算法骨架，而降一些步骤延迟到子类中。模板方法使得…...

编程日记 2025/5/24 2:43:29

二、windows环境下vscode使用wsl教程

本篇文件介绍了在windows系统使用vscode如何连接使用wsl，方便wsl在vscode进行开发。 1、插件安装双击桌面vscode，按快捷键CtrlShiftX打开插件市场，搜索【WSL】点击安装即可。 2、开启WSL的linux子系统点击左下方图标【Open a Remote Win…...

编程日记 2025/5/24 5:06:37

我们的电视Our tv 3.6.0安卓+TV 一款全新电视直播软件-内置稳定直播源

应用简介我们的电视（ourtv）是一款完全无广告的电视直播软件，清晰度可选择高清，超清，蓝光等播放。安装即可使用，再也不用费劲去找各种不稳定的直播源了。 “我们的电视”播放线路（直播源&…...

编程日记 2025/5/24 8:45:11

批处理理解

初识批处理如何批处理： 命名：.bat 方法：创建一个记事本文件，然后将其扩展改为.bat 批处理作用：自上而下成批处理每一条DOS命令，直到执行到最后一条。运行环境：当然是我们cmd了回归我学过的…...

编程日记 2025/5/23 2:42:27

高效准确的PDF解析工具，赋能企业非结构化数据治理

目录准确性高：还原复杂版面元素使用便捷：灵活适配场景贴心服务：快速响应机制在数据为王的时代浪潮中，企业数据治理已成为组织优化运营、提高竞争力的关键。随着数字化进程的加速，企业所积累的数据量呈爆炸式增长…...

编程日记 2025/5/25 19:48:28

Go框架比较：goframe、beego、iris和gin

由于工作需要，这些年来也接触了不少的开发框架，Golang的开发框架比较多，不过基本都是Web"框架"为主。这里稍微打了个引号，因为大部分"框架"从设计和功能定位上来讲，充其量都只能算是一个组件&…...

编程日记 2025/5/25 13:20:04

【ETCD】【实操篇（三）】【ETCDCTL】如何向集群中写入数据

在分布式系统中，etcd 是一个高可用的键值存储，用于存储和共享配置信息、服务发现、协调等。向 etcd 写入数据可以通过多种方式进行，常见的方式是使用 etcd 提供的 HTTP API 或者通过客户端库来进行操作。目录一、使用EtcdCtl工具来写入数据…...

编程日记 2025/5/24 15:24:50

2025年春节档的《哪吒2》，光线传媒动画梦的关键一战

没想到《哪吒之魔童闹海》会以这种形式重回大众视野。距离2025年春节还有不到两个月，春节档电影大战已经打响，原本市场还在猜测2024年频频“胎动”的《哪吒之魔童闹海》（以下简称《哪吒2》）会不会参与这场“神仙打架”&#xff…...

编程日记 2025/5/22 23:30:14

windows C#-实例构造函数

声明一个实例构造函数，以指定在使用 new 表达式创建某个类型的新实例时所执行的代码。要初始化静态类或非静态类中的静态变量，可以定义静态构造函数。如以下示例所示，可以在一种类型中声明多个实例构造函数： class Coords {pu…...

编程日记 2025/5/26 0:31:43

模板部分

js部分

样式部分

代码功能总结

完整代码

效果图

相关文章：