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 第一步:找配置文件 在项目中找到 project.config.json文件,在setting属性中添加 useCompilerPlugins属性,值为sass即可,若是 less,将数组里面的值改为less即可 "useCompilerPlugins": ["sas…...
【THM】Exploit Vulnerabilities(利用漏洞)-
介绍 在这个房间里,我们将讨论一些识别漏洞的方法,并结合我们的研究技能来了解这些漏洞是如何被滥用的。 此外,您还会发现一些公开可用的资源,这些资源是您在执行漏洞研究和利用时的技能和工具的重要补充。然后,您将在房间的最后将所有这些应用到实际挑战中。 自动化与…...
Tomcat管理配置
Tomcat管理配置 1 host-manager项目2 manager项目 Tomcat 提供了Web版的管理控制台,位于webapps目录下。Tomcat 提供了用于管理Host的host-manager和用于管理Web应用的manager。 1 host-manager项目 Tomcat启动之后,可以通过 http://localhost:8080/ho…...
C++模版简单认识与使用
目录 前言: 1.泛型编程 2.函数模版 3.类模版 为什么要有类模版?使用typedef不行吗? 类模版只能显示实例化: 注意类名与类型的区别: 注意类模版最好不要声明和定义分离: 总结: 前言&…...
图解大型网站多级缓存的分层架构
前言 缓存技术存在于应用场景的方方面面。从浏览器请求,到反向代理服务器,从进程内缓存到分布式缓存,其中缓存策略算法也是层出不穷。 假设一个网站,需要提高性能,缓存可以放在浏览器,可以放在反向代理服…...
基于Vision Transformer的迁移学习在乳腺X光图像分类中的应用
乳房X线摄影(MG)在乳腺癌的早期发现中起着重要作用。MG可以在早期阶段发现乳腺癌,即使是感觉不到肿块的小肿瘤。基于卷积神经网络(CNN)的DL最近吸引了MG的大量关注,因为它有助于克服CAD系统的限制(假阳性、不必要的辐射暴露、无意义的活组织检查、高回调…...
WebGIS 地铁交通线网数据可视化监控平台
数字孪生技术在地铁线网的管理和运维中的应用是一个前沿且迅速发展的领域。随着物联网、大数据、云计算以及人工智能技术的发展,地铁线网数字孪生在智能交通和智慧城市建设中的作用日益凸显。 图扑软件基于 HTML5 的 2D、3D 图形渲染引擎,结合 GIS 地图&…...
批量导入svg文件作为图标使用(vue3)vite-plugin-svg-icons插件的具体应用
目录 需求svg使用简述插件使用简述实现安装插件1、配置vite.config.ts2、src/main.ts引入注册脚本3、写个icon组件4、使用组件 需求 在vue3项目中,需要批量导入某个文件夹内数量不确定的svg文件用来作为图标,开发完成后能够通过增减文件夹内的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方程(具有纳维尔边界的双调和方程)
我们考虑如下形式的双调和方程的数值解 其中,Ω是欧氏空间中的多边形或多面体域,在其中,d为维度,具有分段利普希茨边界,满足内部锥条件,f(x) ∈ L2(Ω)是给定的函数,∆是标准的拉普拉斯算子。算…...
详细介绍微信小程序app.js
这一节,我们详细介绍app.js 这个文件。这个文件的重要性我就不再赘述,前面已经介绍了。 一、app.js是项目的主控文件 任何一个程序都是需要一个入口的,就好比我们在学c的时候就会有一个main函数,其他语言基本都是一样。很明确的…...
【六 (2)机器学习-EDA探索性数据分析模板】
目录 文章导航一、EDA:二、导入类库三、导入数据四、查看数据类型和缺失情况五、确认目标变量和ID六、查看目标变量分布情况七、特征变量按照数据类型分成定量变量和定性变量八、查看定量变量分布情况九、查看定量变量的离散程度十、查看定量变量与目标变量关系十一…...
Java集合——Map、Set和List总结
文章目录 一、Collection二、Map、Set、List的不同三、List1、ArrayList2、LinkedList 四、Map1、HashMap2、LinkedHashMap3、TreeMap 五、Set 一、Collection Collection 的常用方法 public boolean add(E e):把给定的对象添加到当前集合中 。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的安装就细不讲了,直接去官网下,实在不会的直接用cdn,省的一番口舌。 cdn.staticfile.net/echarts/4.3.0/echarts.min.js 正入话题哈 什么是EChart? EChart 是一个使用 JavaScript 实现的开源可视化库,Echart支持多种常…...
阿里云8核32G云服务器租用优惠价格表,包括腾讯云和京东云
8核32G云服务器租用优惠价格表,云服务器吧yunfuwuqiba.com整理阿里云8核32G服务器、腾讯云8核32G和京东云8C32G云主机配置报价,腾讯云和京东云是轻量应用服务器,阿里云是云服务器ECS: 阿里云8核32G服务器 阿里云8核32G服务器价格…...
设计模式,工厂方法模式
工厂方法模式概述 工厂方法模式,是对简单工厂模式的进一步抽象和推广。以我个人理解,工厂方法模式就是对生产工厂的抽象,就是用一个生产工厂的工厂来进行目标对象的创建。 工厂方法模式的角色组成和简单工厂方法相比,创建了一个…...
WPF中嵌入3D模型通用结构
背景:wpf本身有提供3D的绘制,但是自己通过代码描绘出3D是比较困难的。3D库helix-toolkit支持调用第三方生成的模型,比如Blender这些,所以在wpf上使用3D就变得非常简单。这里是一个通过helix-toolkit库调用第三方生成的3d模型的样例…...
举个例子说明联邦学习
学习目标: 一周掌握 Java 入门知识 学习内容: 联邦学习是一种机器学习方法,它允许多个参与者协同训练一个共享模型,同时保持各自数据的隐私。 联邦学习概念(例子): 假设有三家医院,它们都希望…...
【Python】免费的图片/图标网站
专栏文章索引:Python 有问题可私聊:QQ:3375119339 这里是我收集的几个免费的图片/图标网站: iconfont-阿里巴巴矢量图标库icon(.ico)INCONFINDER(.ico)...
Pytorch中的nn.Embedding()
模块的输入是一个索引列表,输出是相应的词嵌入。 Embedding.weight(Tensor)–形状模块(num_embeddings,Embedding_dim)的可学习权重,初始化自(0,1)。 也就是…...
WebSocketServer后端配置,精简版
首先需要maven配置 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>2.1.3.RELEASE</version></dependency> 然后加上配置类 这段代码是一个Spri…...
Python程序设计 多重循环(二)
1.打印数字图形 输入n(n<9),输出由数字组成的直角三角图形。例如,输入5,输出图形如下 nint(input("")) #开始 for i in range(1,n1):for j in range(1,i1):print(j,end"")print()#结束 2.打印字符图形 …...
前端面试题--CSS系列(一)
CSS系列--持续更新中 1.CSS预处理器有哪些类型,有什么区别2.盒模型是什么,有哪两种类型3.css选择器有哪些,优先级是怎样的,哪些属性可以继承4. 说说em/px/rem/vh/vw的区别5.元素实现水平垂直居中的方法有哪些,如果元素…...
VSCode好用插件
由于现在还是使用vue2,所以本文只记录vue2开发中好用的插件。 美化类插件不介绍了,那些貌似对生产力起不到什么大的帮助,纯粹的“唯心主义”罢了,但是如果你有兴趣的话可以查看上一篇博客:VSCode美化 1. vuter 简介&…...
Vue3:对ref、reactive的一个性能优化API
一、情景说明 我们知道,在Vue3中,想要创建响应式的变量,就要用到ref、reactive来包裹一下数据即可。 但是,这里有个损耗性能的地方 就是,被它包裹的数据,都会构建成响应式的,无论多少层次&…...
Python 用pygame简简单单实现一个打砖块
# -*- coding: utf-8 -*- # # # Copyright (C) 2024 , Inc. All Rights Reserved # # # Time : 2024/3/30 14:34 # Author : 赫凯 # Email : hekaiiii163.com # File : ballgame.py # Software: PyCharm import math import randomimport pygame import sys#…...
软考113-上午题-【计算机网络】-IPv6、无线网络、Windows命令
一、IPv6 IPv6 具有长达 128 位的地址空间,可以彻底解决 IPv4 地址不足的问题。由于 IPv4 地址是32 位二进制,所能表示的IP 地址个数为 2^32 4 294 967 29640 亿,因而在因特网上约有 40亿个P 地址。 由 32 位的IPv4 升级至 128 位的IPv6&am…...
深入浅出 -- 系统架构之负载均衡Nginx资源压缩
一、Nginx资源压缩 建立在动静分离的基础之上,如果一个静态资源的Size越小,那么自然传输速度会更快,同时也会更节省带宽,因此我们在部署项目时,也可以通过Nginx对于静态资源实现压缩传输,一方面可以节省带宽…...
西安米德建站/如何发布自己的广告
一、运算符 1、算术运算符 、-、*、/、%、、-- 取余一般用于判断奇偶性。一个数对2取余是0就是偶数;如果结果是1就是奇数。 和--操作 <?php echo $a5;//5 echo $a;//6 echo $a--;//6 echo $a;//5 echo --$a;//5 echo $a;//5 ?> 2、字符运算符 2.1、HP中字符…...
建设一个网站需要学习什么/最新国内新闻重大事件
Ubuntu 11.04更新源列表及正式版下载 Ubuntu 11.04已经发布了,Ubuntu 11.04 正式版搭载全新用户界面、具有里程碑意义的新版 Ubuntu 11.04 现已正式发布,此版本的开发代号为 Natty Narwhal 。新版的 Ubuntu 11.04 不再提供上网本版本,现在只区…...
定海网/搜索引擎优化的内部优化
随着人们生活水平的提高,当下越来越注重生活的品质,对护肤的要求也越来越高!受明星及网红的影响,似乎每天一片面膜称为护肤的标准,面膜可以称得上是皮肤速效急救产品,敷一片面膜,就可以大大的缓…...
最专业微网站建设价格/宁波seo优化公司排名
pip install pycryptodome然后去C:\Users\Administrator\AppData\Local\Programs\Python\Python37\Lib\site-packages把下面这个文件夹名字开头的c改成大写的C,有的可能下载下来默认就是大写问题:1、报错time out ,网速不行,要么换…...
提供电子商务网站建设外包服务的企业/中山seo推广优化
[转帖]浅析DW2.0架构 其实我也只是前些天才开始看DW2.0的内容,事实上并不是很熟悉。在这里胡乱说了一些,全当是抛砖引玉了。 在接触DW2.0之前并没有听说有个DW1.0,个人觉得Inmon提出DW2.0是针对他以前对Data Warehouse的定义而言。Inmon对数…...
小语种企业网站建设/sem优化是什么意思
shiro是我目前用的项目的一个鉴权框架,也是apache基金会的,用来处理登录,鉴权这部分。下面是官网的介绍页: Shro 官网网站,不管是了解还是学习,都是第一手资料 网上一个用XML文件配置的,这里我…...