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

JS 利用 webcam访问摄像头 上传到服务器

webcam JS 较为详细的指南

定义标题

<!doctype html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>How to capture picture from webcam with Webcam.js</title></head>
<body>  
  • <meta> 标签用于设置页面的视口(viewport),
  • content 属性指定了视口的宽度为设备的宽度,并启用了初始缩放比例为 1.0。这样可以确保页面在不同设备上以适当的方式显示。
  • <title> 标签定义了页面的标题,显示在浏览器的标签页或标题栏上,本例中标题为 “How to capture picture from webcam with Webcam.js”。

定义my_camera样式

	<!-- CSS --><style>	<!-- 定义my_camera样式 -->#my_camera{width: 320px;height: 240px;border: 1px solid black;}</style>
  • 这段代码定义了一个样式规则,在 HTML 页面中为 id 为 “my_camera” 的元素应用了该样式。
  • 在样式规则中,width 属性设置了元素的宽度为 320 像素,height 属性设置了元素的高度为 240 像素,border 属性设置了元素的边框为 1 像素的黑色实线。
  • 这段代码可以用于定义一个相机显示区域的样式,使其具有固定的宽度和高度,并且有一个黑色的边框。

JS.div

  • HTML 的 <div> 是一个块级元素。它是一个无语义的容器元素,用于将其他元素分组在一起,以便样式和布局的目的。
  • <div> 元素没有默认的样式或行为,仅仅提供了一个空的盒子,可以通过 CSS 来自定义其外观和行为。
  • <div> 元素可以包含其他任意元素,包括文本、图片、表单等等。

define a device

	<!-- --><div id="my_camera"></div><input type=button value="Configure" onClick="configure()"><input type=button value="Take Snapshot" onClick="take_snapshot()"><input type=button value="Save Snapshot" onClick="saveSnap()"><div id="results"  ></div>
  • 这段代码是一个 HTML 页面的主体部分,包含了一个用于显示摄像头视频的容器、三个按钮和一个用于显示结果的容器。
  • <div id="my_camera"></div> 是一个空的 <div> 元素,它的 id 属性被设置为 “my_camera”。这个元素用于显示摄像头视频,后面的 JavaScript 代码会将摄像头视频渲染到这个元素中。
  • <input> 元素是用来创建按钮的,有三个按钮分别是 “Configure”、“Take Snapshot” 和 “Save Snapshot”。每个按钮都有一个 onClick 属性,用于指定按钮被点击时所触发的 JavaScript 函数。
  • 接下来的代码 <div id="results"></div> 是另一个空的 <div> 元素,它的 id 属性被设置为 “results”。这个元素用于显示操作结果,例如当用户点击 “Save Snapshot” 按钮时,JavaScript 代码会将截取的照片显示在这个元素中。

define js action

	<!-- Script --><script type="text/javascript" src="webcamjs/webcam.min.js"></script>...</script>
  • 这行代码是在 HTML 页面中引入了一个外部的 JavaScript 文件。
  • 通过使用 <script> 标签和 src 属性,可以将 webcam.min.js 文件加载到页面中。
  • 这个文件是 webcam.js 库的压缩版本,它提供了一些用于操作和控制摄像头的函数和方法,以便在网页中捕捉图像或视频。通过引入这个 JavaScript 文件,可以在后续的代码中使用这个库提供的功能。

webcam.min.js

set style of camera

	<!-- Code to handle taking the snapshot and displaying it locally --><script language="JavaScript">// Configure a few settings and attach camerafunction configure(){Webcam.set({width: 320,height: 240,image_format: 'jpeg',jpeg_quality: 90});Webcam.attach( '#my_camera' );}// A button for taking snaps

navigator

navigator 是 JavaScript 中的一个内置对象,用于提供有关浏览器环境和用户代理的信息。它包含了一系列的属性和方法,可以用来获取和操作与浏览器相关的信息。下面是一些 navigator 对象的常用属性:

  • navigator.userAgent:返回包含浏览器用户代理字符串的字符串。
  • navigator.language:返回当前浏览器环境的首选语言。
  • navigator.platform:返回运行浏览器的操作系统平台。
  • navigator.appVersion:返回浏览器的版本号和操作系统信息。

通过使用 navigator 对象,可以根据浏览器的不同特性和功能来进行相关的逻辑判断和操作,从而提供更好的用户体验或调整功能的实现方式。

		// preload shutter audio clipvar shutter = new Audio();shutter.autoplay = false;shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';

take snapshot

		function take_snapshot() {// play sound effectshutter.play();// take snapshot and get image dataWebcam.snap( function(data_uri) {// display results in pagedocument.getElementById('results').innerHTML = '<img id="imageprev" src="'+data_uri+'"/>';console.log('Capture successfully');} );Webcam.reset();}

Question what’s data_uri

在JavaScript中,data URI(Uniform Resource Identifier)是一种用来嵌入小型数据的方式。它是一种特殊的URL格式,可以将数据直接嵌入到HTML、CSS、JavaScript等文件中,而无需引用外部资源文件。* Data URI的格式如下:data:[mediatype][;base64],<data>其中,mediatype是数据的MIME类型(例如,image/jpeg表示JPEG格式的图像,text/plain表示纯文本),base64是可选的,表示是否使用base64编码,<data>是实际的数据内容。* 例如,一个包含了纯文本的data URI如下:data:text/plain,Hello%20World!* 一个包含了base64编码图像的data URI如下:data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD...(以下省略)

Display

上面的id="imageprev"的datauri如下,严格按照 😊 base64编码的图像格式 😊
在这里插入图片描述

data URI的优点是可以减少HTTP请求数量,提高网页的加载速度。但是,由于数据直接嵌入到文件中,会增加文件的大小,可能导致文件变得更大,在一些情况下可能不适用。另外,不同浏览器对data URI的限制也有所不同,需要注意兼容性问题。

savesnap

		function saveSnap(){// Get base64 value from <img id='imageprev'> sourcevar base64image =  document.getElementById("imageprev").src;Webcam.upload( base64image, 'upload.php', function(code, text) {console.log('Save successfully');//console.log(text);});}</script></body>
</html>

upload.php

<?php// new filename
$filename = 'pic_'.date('YmdHis') . '.jpeg';$url = '';
if( move_uploaded_file($_FILES['webcam'][$filename],'upload/'.$filename) ){$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/upload/' . $filename;
}// Return image url
echo $url;
?>

upload.js

  • 尚未成功
```javascript 
// 获取base64图片数据
var base64Image = document.getElementById('imageprev').src;// 将base64图片数据转换为Blob对象
var byteCharacters = atob(base64Image.split(',')[1]);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blobImage = new Blob([byteArray], { type: 'image/jpeg' });// 创建一个FormData对象
var formData = new FormData();
formData.append('webcam', blobImage, 'image.jpeg');// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();// 定义请求完成后的回调函数
xhr.onload = function() {if (xhr.status === 200) {var imageUrl = xhr.responseText;console.log('图像已上传,URL为:', imageUrl);} else {console.log('上传图像时发生错误');}
};// 发送POST请求到服务器的/upload文件夹
xhr.open('POST', '/upload', true);
xhr.send(formData);

文件上传by php

php.move_uploaded_file
在这里插入图片描述
php.$_FILES
tomcat&php&mysql

upload by js

Blob、File 、DataURL(Base64)、BlobURL 之间的类型闭环,你确定都知道?

相关文章:

JS 利用 webcam访问摄像头 上传到服务器

webcam JS 较为详细的指南 定义标题 <!doctype html> <html> <head><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>How to capture picture from webcam with Webcam.js</title></…...

【微信小程序】【小程序样式加载不出来】

微信小程序配置sass 第一步&#xff1a;找配置文件 在项目中找到 project.config.json文件&#xff0c;在setting属性中添加 useCompilerPlugins属性&#xff0c;值为sass即可&#xff0c;若是 less,将数组里面的值改为less即可 "useCompilerPlugins": ["sas…...

【THM】Exploit Vulnerabilities(利用漏洞)-

介绍 在这个房间里,我们将讨论一些识别漏洞的方法,并结合我们的研究技能来了解这些漏洞是如何被滥用的。 此外,您还会发现一些公开可用的资源,这些资源是您在执行漏洞研究和利用时的技能和工具的重要补充。然后,您将在房间的最后将所有这些应用到实际挑战中。 自动化与…...

Tomcat管理配置

Tomcat管理配置 1 host-manager项目2 manager项目 Tomcat 提供了Web版的管理控制台&#xff0c;位于webapps目录下。Tomcat 提供了用于管理Host的host-manager和用于管理Web应用的manager。 1 host-manager项目 Tomcat启动之后&#xff0c;可以通过 http://localhost:8080/ho…...

C++模版简单认识与使用

目录 前言&#xff1a; 1.泛型编程 2.函数模版 3.类模版 为什么要有类模版&#xff1f;使用typedef不行吗&#xff1f; 类模版只能显示实例化&#xff1a; 注意类名与类型的区别&#xff1a; 注意类模版最好不要声明和定义分离&#xff1a; 总结&#xff1a; 前言&…...

图解大型网站多级缓存的分层架构

前言 缓存技术存在于应用场景的方方面面。从浏览器请求&#xff0c;到反向代理服务器&#xff0c;从进程内缓存到分布式缓存&#xff0c;其中缓存策略算法也是层出不穷。 假设一个网站&#xff0c;需要提高性能&#xff0c;缓存可以放在浏览器&#xff0c;可以放在反向代理服…...

基于Vision Transformer的迁移学习在乳腺X光图像分类中的应用

乳房X线摄影(MG)在乳腺癌的早期发现中起着重要作用。MG可以在早期阶段发现乳腺癌&#xff0c;即使是感觉不到肿块的小肿瘤。基于卷积神经网络(CNN)的DL最近吸引了MG的大量关注&#xff0c;因为它有助于克服CAD系统的限制(假阳性、不必要的辐射暴露、无意义的活组织检查、高回调…...

WebGIS 地铁交通线网数据可视化监控平台

数字孪生技术在地铁线网的管理和运维中的应用是一个前沿且迅速发展的领域。随着物联网、大数据、云计算以及人工智能技术的发展&#xff0c;地铁线网数字孪生在智能交通和智慧城市建设中的作用日益凸显。 图扑软件基于 HTML5 的 2D、3D 图形渲染引擎&#xff0c;结合 GIS 地图&…...

批量导入svg文件作为图标使用(vue3)vite-plugin-svg-icons插件的具体应用

目录 需求svg使用简述插件使用简述实现安装插件1、配置vite.config.ts2、src/main.ts引入注册脚本3、写个icon组件4、使用组件 需求 在vue3项目中&#xff0c;需要批量导入某个文件夹内数量不确定的svg文件用来作为图标&#xff0c;开发完成后能够通过增减文件夹内的svg文件&a…...

X服务器远程连接问题解决:Bad displayname ““‘或Missing X server or $DISPLAY

X服务器远程连接问题 报错1 ImportError: this platform is not supported: (failed to acquire X connection: Bad displayname "", DisplayNameError()) Try one of the following resolutions: * Please make surethat you have an X server running, and that …...

matlab:五点中心差分求解Navier边界的Biharmonic方程(具有纳维尔边界的双调和方程)

我们考虑如下形式的双调和方程的数值解 其中&#xff0c;Ω是欧氏空间中的多边形或多面体域&#xff0c;在其中&#xff0c;d为维度&#xff0c;具有分段利普希茨边界&#xff0c;满足内部锥条件&#xff0c;f(x) ∈ L2(Ω)是给定的函数&#xff0c;∆是标准的拉普拉斯算子。算…...

详细介绍微信小程序app.js

这一节&#xff0c;我们详细介绍app.js 这个文件。这个文件的重要性我就不再赘述&#xff0c;前面已经介绍了。 一、app.js是项目的主控文件 任何一个程序都是需要一个入口的&#xff0c;就好比我们在学c的时候就会有一个main函数&#xff0c;其他语言基本都是一样。很明确的…...

【六 (2)机器学习-EDA探索性数据分析模板】

目录 文章导航一、EDA&#xff1a;二、导入类库三、导入数据四、查看数据类型和缺失情况五、确认目标变量和ID六、查看目标变量分布情况七、特征变量按照数据类型分成定量变量和定性变量八、查看定量变量分布情况九、查看定量变量的离散程度十、查看定量变量与目标变量关系十一…...

Java集合——Map、Set和List总结

文章目录 一、Collection二、Map、Set、List的不同三、List1、ArrayList2、LinkedList 四、Map1、HashMap2、LinkedHashMap3、TreeMap 五、Set 一、Collection Collection 的常用方法 public boolean add(E e)&#xff1a;把给定的对象添加到当前集合中 。public void clear(…...

Python TensorFlow 2.6 获取 MNIST 数据

Python TensorFlow 2.6 获取 MNIST 数据 2 Python TensorFlow 2.6 获取 MNIST 数据1.1 获取 MNIST 数据1.2 检查 MNIST 数据 2 Python 将npz数据保存为txt3 Java 获取数据并使用SVM训练4 Python 测试SVM准确度 2 Python TensorFlow 2.6 获取 MNIST 数据 1.1 获取 MNIST 数据 …...

EChart简单入门

echart的安装就细不讲了&#xff0c;直接去官网下&#xff0c;实在不会的直接用cdn,省的一番口舌。 cdn.staticfile.net/echarts/4.3.0/echarts.min.js 正入话题哈 什么是EChart&#xff1f; EChart 是一个使用 JavaScript 实现的开源可视化库&#xff0c;Echart支持多种常…...

阿里云8核32G云服务器租用优惠价格表,包括腾讯云和京东云

8核32G云服务器租用优惠价格表&#xff0c;云服务器吧yunfuwuqiba.com整理阿里云8核32G服务器、腾讯云8核32G和京东云8C32G云主机配置报价&#xff0c;腾讯云和京东云是轻量应用服务器&#xff0c;阿里云是云服务器ECS&#xff1a; 阿里云8核32G服务器 阿里云8核32G服务器价格…...

设计模式,工厂方法模式

工厂方法模式概述 工厂方法模式&#xff0c;是对简单工厂模式的进一步抽象和推广。以我个人理解&#xff0c;工厂方法模式就是对生产工厂的抽象&#xff0c;就是用一个生产工厂的工厂来进行目标对象的创建。 工厂方法模式的角色组成和简单工厂方法相比&#xff0c;创建了一个…...

WPF中嵌入3D模型通用结构

背景&#xff1a;wpf本身有提供3D的绘制&#xff0c;但是自己通过代码描绘出3D是比较困难的。3D库helix-toolkit支持调用第三方生成的模型&#xff0c;比如Blender这些&#xff0c;所以在wpf上使用3D就变得非常简单。这里是一个通过helix-toolkit库调用第三方生成的3d模型的样例…...

举个例子说明联邦学习

学习目标&#xff1a; 一周掌握 Java 入门知识 学习内容&#xff1a; 联邦学习是一种机器学习方法&#xff0c;它允许多个参与者协同训练一个共享模型&#xff0c;同时保持各自数据的隐私。 联邦学习概念&#xff08;例子&#xff09;: 假设有三家医院&#xff0c;它们都希望…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...

【实施指南】Android客户端HTTPS双向认证实施指南

&#x1f510; 一、所需准备材料 证书文件&#xff08;6类核心文件&#xff09; 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...