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

自定义webIpad证件相机(webRTC)

news 文章来源：https://blog.csdn.net/zarek_jiamu/article/details/140654972 2024/9/20 8:00:55

该技术方案可用于各浏览器自定义相机开发

相机UI（index.html）

<!DOCTYPE html>
<html lang="zh" prew="-1"><head><meta charset="UTF-8"><meta name="viewport"content="user-scalable=no, initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width" /><title>自定义相机</title><link rel="stylesheet" href="./style.css"><script src="./tools.js"></script><script src="./index.js"></script>
</head><body><div class="errTip"><p>Failed to obtain the rear camera of the device. Please try another solution to obtain resources!</p><button class="errBtn">GO Back</button></div><div class="takeOffTip"></div><div class="imgBoxDom"><div class="imgBox"><img src="./center.png" style="width: 4vw;"></div></div><div class="rightBtnBox"><div class="takeBtn"></div><div class="cancleBtn btn"></div></div><div class="bottomBtnBox"><div class="reTakeBtn btn bottonSize"></div><div class="nextBtn btn bottonSize"></div></div><div class="loading-css">Loading...</div>
</body></html>

相机UI样式(style.css)

* {margin: 0;padding: 0;box-sizing: border-box;border: 0;
}html,
body {width: 100%;height: 100%;overflow: hidden;background-color: #000;color: #fff;
}.cancleBtn {padding: 2vw 0;width: 100%;
}.takeOffTip {position: fixed;padding-top: 2vw;top: 0;left: 0;width: 100%;font-size: 1.8vw;text-align: center;color: #fff;
}.bottonSize {height: 100%;line-height: 6vw;line-height: 6dvw;padding: 0 1.5vw;
}.bottomBtnBox,
.rightBtnBox {position: fixed;right: 0;display: flex;justify-content: space-between;align-items: center;background-color: #000;z-index: 10;
}.bottomBtnBox {bottom: 0;width: 100%;height: 6vw;height: 6dvw;
}.rightBtnBox {flex-direction: column;top: 0;height: 100%;width: 6vw;width: 6dvw;
}html[prew='-1'] .bottomBtnBox,
html[prew='0'] .bottomBtnBox,
html[prew='-1'] .rightBtnBox,
html[prew='1'] .rightBtnBox,
html[prew='1'] .customer_carema {display: none;
}html[prew='1'] .imgBox {border: 0;font-size: 0;opacity: 0;
}.takeBtn {padding: 4px;width: 5vw;width: 5dvw;height: 5vw;height: 5dvw;background-color: #fff;border-radius: 50%;
}.takeBtn::before {content: '';display: block;width: 100%;height: 100%;border: 5px solid #000;background-color: #fff;border-radius: 50%;box-sizing: border-box;
}.rightBtnBox::before {content: '';display: block;
}.btn {background-color: #000;text-align: center;font-size: 1.5vw;color: #fff;
}.customer_video,
.carema_img,
.cuteImg {width: 100%;height: 100%;object-fit: cover;
}.imgBoxDom {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;z-index: 9;
}.imgBox {width: var(--carema-box-width);height: var(--carema-box-height);border: 2px solid #fff;display: flex;justify-content: center;align-items: center;font-size: 10vw;z-index: 10;border-radius: 2vw;
}.errTip {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 8888;display: none;flex-direction: column;justify-content: center;align-items: center;background-color: #000;
}.errTip>p {padding-bottom: 20px;color: #fff;
}.errTip button {padding: 10px 30px;
}html[prew='2'] .errTip {display: flex;
}html[loaded='1'] .loading-css {display: none;
}.loading-css {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #000;z-index: 9999;
}.loading-css::before {margin-bottom: 10px;content: '';width: 50px;height: 50px;display: inline-block;border: 3px solid #f3f3f3;border-top: 3px solid rgb(160, 155, 155);border-radius: 50%;animation: loading-360 0.8s infinite linear;
}@keyframes loading-360 {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}

调试UI(carema.html)

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport"content="user-scalable=no, initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width" /><title>调试相机</title><style>* {margin: 0;padding: 0;box-sizing: border-box;border: 0;}img {max-width: 100%;}.btnList {padding: 10px;}label[type='file'],button {padding: 0 10px;height: 32px;line-height: 32px;display: inline-block;font-size: 14px;appearance: auto;border: 1px solid #999;background-color: #dcdcdc;}label>input {font-size: 0;width: 0;height: 0;overflow: hidden;}.showImg {padding: 5px;display: flex;flex-wrap: wrap;}.showImg>.box {width: 33.33%;padding: 5px;}.showImg>.box>.img {width: 100%;height: 20vw;overflow: hidden;border-radius: 10px;border: 2px solid #888;}.showImg>.box>.img>img {width: 100%;height: 100%;object-fit: cover;}html,body {height: 100%;height: 100%;}body {display: flex;flex-direction: column;}.showImg {flex: 1;overflow-x: hidden;}</style>
</head><body><div class="btnList"><button onclick="openCarema('HK_ID')">COMM_ID_IMG</button><button onclick="openCarema('LANDING')">LANDING_IMG</button><label name="upload" type="file">LOCAL_IMG<input type="file" id="upload"></label></div><div class="showImg" id="showImg"></div>
</body>
<script>function fileToBase64(file) {return new Promise((resolve, reject) => {// 创建一个新的 FileReader 对象var reader = new FileReader();// 读取 File 对象reader.readAsDataURL(file);// 加载完成后reader.onload = function () {// 将读取的数据转换为 base64 编码的字符串var base64String = reader.result.split(",")[1];// 解析为 Promise 对象，并返回 base64 编码的字符串resolve(base64String);};// 加载失败时reader.onerror = function () {reject(new Error("Failed to load file"));};});}function showImg(url) {var showImgDom = document.getElementById('showImg');var img = document.createElement('img');img.src = `data:image/jpeg;base64,${url}`;var div = document.createElement('div');var cDiv = document.createElement('div');div.append(cDiv);cDiv.append(img);div.className = 'box';cDiv.className = "img";showImgDom.insertBefore(div, showImgDom.firstChild);}document.getElementById('upload').addEventListener('change', function ($event) {var file = $event.target.files[0];fileToBase64(file).then(showImg);})function openCarema(idType) {var openId = Date.now() + '';window.open(`./index.html?openId=${openId}&idType=${idType}&isDev=1`);window.addEventListener('message', function (res) {var resOpenId = res.data.openId;var mothod = res.data.mothod;var file = res.data.imgUrl;console.log(resOpenId, mothod, file);if (mothod === "success_file" && openId === resOpenId) fileToBase64(file).then(showImg);})}
</script></html>

相机逻辑基础(index.js)

function WbCRM() {this.body = document.body;this.html = document.documentElement;this.takeBtn = document.querySelector('.takeBtn');this.imgBox = document.querySelector('.imgBox');this.reTakeBtn = document.querySelector('.reTakeBtn');this.cancleBtn = document.querySelector('.cancleBtn');this.nextBtn = document.querySelector('.nextBtn');var errBtn = document.querySelector('.errBtn');this.video = null;this.err = null;this.fullImg = null;this.file = '';this.idType = '';this.isDev = false;this.stream = null;this.openId = '';this.ratio = window.devicePixelRatio || 1;this.videoWidth = this.body.clientWidth * this.ratio;this.videoHeight = this.body.clientHeight * this.ratio;this.html.setAttribute('prew', '-1');var isMp3 = !(navigator.userAgent.match(/Firefox/));var audio = new Audio();audio.autoplay = isMp3 ? './shutter.mp3' : './shutter.ogg';this.audio = audio;console.log(isMp3,audio);this.mediaDevices = (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ?navigator.mediaDevices : ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {getUserMedia: function (c) {return new Promise(function (y, n) {(navigator.mozGetUserMedia ||navigator.webkitGetUserMedia).call(navigator, c, y, n);});}} : null);this.setDom();this.setCarema();this.takeBtn.addEventListener('click', this.takePhoto.bind(this));this.nextBtn.addEventListener('click', this.next.bind(this));this.reTakeBtn.addEventListener('click', this.reTake.bind(this));this.cancleBtn.addEventListener('click', this.cancle.bind(this));errBtn.addEventListener('click', this.openErro.bind(this));
}
WbCRM.prototype.openErro = function () {this.sendMsg('open_erro');
}
WbCRM.prototype.cancle = function () {this.removeStream();this.sendMsg('off_carema');
}
WbCRM.prototype.next = function () {if (this.fullImg) this.fullImg.remove();this.removeStream();this.sendMsg('success_file');
}
WbCRM.prototype.reTake = function () {this.file = null;this.err = null;if (this.fullImg) this.fullImg.remove();this.html.setAttribute('loaded', 0);this.removeStream();this.setCarema();
}
WbCRM.prototype.cutImage = function () {var boxWidth = this.imgBox.clientWidth * this.ratio;var boxHeight = this.imgBox.clientHeight * this.ratio;var vLeft = (this.videoWidth - boxWidth) / 2;var vTop = (this.videoHeight - boxHeight) / 2;var nCanvas = wbCRMTools.drawHighDefinitionImg(boxWidth, boxHeight);var nCtx = nCanvas.getContext('2d');nCtx.drawImage(this.fullImg, -vLeft, -vTop);var cutImage = nCtx.getImageData(0, 0, boxWidth, boxHeight);wbCRMTools.changeImgData(cutImage?.data || [], this.idType || '');nCtx.putImageData(cutImage, 0, 0);reImgUrl = nCanvas.toDataURL('image/jpeg');var cImg = document.createElement('img');cImg.src = reImgUrl;this.file = wbCRMTools.canvas2File(reImgUrl);wbCRMTools.clearCanvas(nCtx, nCanvas);cImg.className = "cuteImg";this.imgBox.append(cImg);this.html.setAttribute('prew', '1');this.removeStream();
}
WbCRM.prototype.takePhoto = function () {var gCanvas = wbCRMTools.drawHighDefinitionImg(this.videoWidth, this.videoHeight);var originalCtx = gCanvas.getContext('2d');originalCtx.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight);var imgUrl = gCanvas.toDataURL('image/jpeg');var fullImg = document.createElement("img");fullImg.className = "carema_img";fullImg.src = imgUrl;this.fullImg = fullImg;this.body.append(fullImg);wbCRMTools.clearCanvas(originalCtx, gCanvas);this.audio.play();fullImg.onload = this.cutImage.bind(this);
}WbCRM.prototype.sendMsg = function (mothod) {this.audio.remove();const origin = this.isDev ? undefined : window.location.origin;window.opener.postMessage({ mothod: mothod, file: this.file, openId: this.openId, error: this.err }, origin);window.close();
}WbCRM.prototype.removeStream = function () {var self = this;if (self.stream) {self.stream.getTracks().forEach(function (track) {if (track.readyState === 'live') track.stop();self.stream.removeTrack(track);});}if (this.video) this.video.remove();var cuteImgList = document.querySelectorAll('.cuteImg');cuteImgList.forEach(function (dom) {dom.remove();})
}WbCRM.prototype.setDom = function () {this.openId = wbCRMTools.getUrlParam('openId');var okText = wbCRMTools.getUrlParam('continue');var cancelText = wbCRMTools.getUrlParam('cancel');var retakeText = wbCRMTools.getUrlParam('retake');var idType = wbCRMTools.getUrlParam('idType') || '';var takeOffTip = wbCRMTools.getUrlParam('takeOffTip');const isDev = wbCRMTools.getUrlParam('isDev');this.isDev = isDev === '1';this.nextBtn.innerText = okText || 'Cuntinue';this.cancleBtn.innerText = cancelText || 'Cancel';this.reTakeBtn.innerText = retakeText || 'Retake';document.querySelector('.takeOffTip').innerHTML = takeOffTip;this.html.setAttribute('loaded', 0);this.html.style.setProperty('--carema-box-width', '64.512vw');this.html.style.setProperty('--carema-box-height', '40.6789vw');if (idType === "LANDING") {this.html.style.setProperty('--carema-box-width', '51.2vw');this.html.style.setProperty('--carema-box-height', '44.5935vw');}this.idType = idType;
}WbCRM.prototype.setVideo = function (stream) {var video = document.createElement('video');video.setAttribute('autoplay', 'autoplay');video.setAttribute('playsinline', 'playsinline');video.className = 'customer_video';this.video = video;this.stream = stream;this.body.append(video);var self = this;video.onloadedmetadata = function (e) {self.stream = stream;self.loaded = true;self.html.setAttribute('loaded', 1);};video.onplay = function () {self.html.setAttribute('prew', '0');}// as window.URL.createObjectURL() is deprecated, adding a check so that it works in Safari.// older browsers may not have srcObjectif ("srcObject" in video) {video.srcObject = stream;} else {// using URL.createObjectURL() as fallback for old browsersvideo.src = window.URL.createObjectURL(stream);}
}WbCRM.prototype.setCarema = function () {const videoConf = this.isDev ? {} : {width: { min: 1024, ideal: 2360, max: 2732 },height: { min: 776, ideal: 1640, max: 2048 },facingMode: { exact: "environment" }}var self = this;this.mediaDevices.getUserMedia({audio: false,video: videoConf}).then(this.setVideo.bind(this)).catch(function (error) {self.err = error.toString();self.html.setAttribute('prew', '2');self.html.setAttribute('loaded', '1');})
}window.addEventListener('load', function () {var wbCRM = new WbCRM();window.addEventListener('visibilitychange', function () {wbCRM.removeStream();window.close();});
});

图片出路和文件生成工具(tools.js)

var wbCRMTools = {drawHighDefinitionImg: function (width, height) {const canvas = document.createElement('canvas');canvas.style.width = width + 'px';canvas.style.height = height + 'px';canvas.width = width;canvas.height = height;return canvas;},clearCanvas: function (ctx, canvas) {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.beginPath();canvas.height = 0;canvas.width = 0;canvas.remove();canvas.parentNode?.removeChild(canvas);},changeImgData: function (data, idType) {const isGrayscale = ['PASSPORT', 'LANDING', 'ENTRYPERMIT', 'SUP_LEGAL_ID'].some(imgType => idType.indexOf(imgType) !== -1);let contrast = 35;const thereshold = 20;if ('LANDING' === idType) contrast = 45;// gaussBlur will use in the feature, cancel this fun now, don`t delete please// this.gaussBlur(imageData, 1);// If MacId and HK-LANDING change cavans-img-code.const factor = (255 + contrast) / (255.01 - contrast);  //add .1 to avoid /0 errorconst denominator = 1 / (1 - contrast / 255) - 1;const setCV = cv => cv + (cv - thereshold) * denominator;const setCTV = cv => cv + (cv - thereshold) * contrast / 255;const getRGB = cv => factor * (cv - 128) + 128;// Data array data-length.const len = data?.length || 0;// loop value to change cavans imgData;for (let index = 0; index < len; index += 4) {let R = data[index];     //r valuelet G = data[index + 1]; //g valuelet B = data[index + 2] //b valueif (contrast || thereshold) {R = getRGB(R); //r valueG = getRGB(G); //g valueB = getRGB(B); //b value}const isColorNum = index % 4 === 0;if (isColorNum) {R = contrast ? setCV(R) : setCTV(R);G = contrast ? setCV(G) : setCTV(G);B = contrast ? setCV(B) : setCTV(B);if (isGrayscale) {const vNum = Math.round((R + G + B) / 3);R = vNum;G = vNum;B = vNum;data[index + 3] = 255;}data[index] = R;data[index + 1] = G;data[index + 2] = B;}}},getUrlParam: function (urlKey) {var url = window.location.search;var reg = new RegExp("(^|&)" + urlKey + "=([^&]*)(&|$)");var result = url.substring(1).match(reg);return result ? decodeURIComponent(result[2]) : null;},canvas2File: function (dataUrl) {let arr = dataUrl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}const nowId = Date.now();const fileName = `takePhoto_${nowId}.jpeg`;const blob = new Blob([u8arr], { type: mime, name: fileName });blob.lastModifiedDate = new Date();return new File([blob], fileName, { type: "image/jpeg" });}
}

文件目录

效果图

自定义webIpad证件相机(webRTC)

该技术方案可用于各浏览器自定义相机开发相机UI（index.html） <!DOCTYPE html> <html lang"zh" prew"-1"><head><meta charset"UTF-8"><meta name"viewport"content"user-sc…...

编程日记 2024/7/29 11:02:26

GO发票真伪批量查验方法、数电票查验接口

“教”给机器标注数据的正确率就决定了人工智能判断的正确率。翔云人工智能开放平台的OCR产品经过我们的开发人员精心调“教”，识别率高、识别速度快。发票，是发生的成本、费用或收入的原始凭证。于公司来说，发票主要是公司做账的依据&…...

编程日记 2024/7/29 10:59:20

【Go系列】Go的UI框架Fyne

前言总有人说Go语言是一门后端编程语言。 Go虽然能够很好地处理后端开发，但是者不代表它没有UI库，不能做GUI，我们一起来看看Go怎么来画UI吧。正文 Go语言由于其简洁的语法、高效的性能和跨平台的编译能力，非常适合用于开发GUI…...

编程日记 2024/7/29 10:58:19

.NET MAUI：跨平台开发的未来

常用资源 （1）.NET MAUI8构建应用文档。 Build your first .NET MAUI app - .NET MAUI | Microsoft Learn 一、什么是 .NET MAUI？ .NET Multi-platform App UI (.NET MAUI) 是微软推出的一款跨平台开发框架。作为 Xamarin.Forms 的下一代产…...

编程日记 2024/7/29 10:56:17

VSCode切换默认终端

我的VSCode默认终端为PowerShell，每次新建都会自动打开PowerShell。但是我想让每次都变为cmd，也就是Command Prompt 更改默认终端的操作方法如下： 键盘调出命令面板（CtrlShiftP）中,输入Terminal: Select Default Prof…...

编程日记 2024/7/29 10:54:14

卫星观测叶绿素的相反信号

Contrasted Trends in Chlorophyll-a Satellite Products 运用卫星产品研究Chl的长时间序列变化时需要注意 Introduction （1）研究叶绿素的长期变化，需要至少40年的长时间序列； （2）Tian and Zhang 2023报告…...

编程日记 2024/7/29 10:50:09

2024年最新NVIDIA T4价格表及行业趋势！

英伟达（NVIDIA）作为目前全球T0级别的GPU制造商，其T4系列显卡以其卓越的计算性能和能效比，在数据中心、云计算及AI领域占据重要地位。一、NVIDIA T4价格表概览在探讨NVIDIA T4显卡的价格时，我们需要从直接购买和租赁…...

编程日记 2024/7/29 10:49:07

HTML + CSS编程规范

编程规范 HTML CSS 命名规范 HTML CSS 命名规范 1. 命名需要是具备语义性的单词，不能用数字拼音数字,符号开头正确示范 ： wrap description title content错误示范 : aaaa a1 $we 4tdds 2. 命名需要多个单词连接的情况下, 标记语言中可以使用 …...

编程日记 2024/7/29 10:48:06

机器学习之人脸识别-使用 scikit-learn 和人工神经网络进行高效人脸识别

文章摘要本文将介绍如何使用 Python 的 scikit-learn 库和人工神经网络（ANN）来识别人脸。我们将使用 LFW 数据集（Labeled Faces in the Wild），这是一个广泛用于人脸识别基准测试的大型人脸数据库。我们将展示如何准备…...

编程日记 2024/7/29 10:47:04

【虚拟化】KVM概念和架构

目录一、什么是KVM？ 二、KVM的功能 2.1 主要的功能 2.2 其它功能三、KVM核心组件及作用四、KVM与VMware的优势五、KVM架构六、qemu介绍七、创建虚拟机流程一、什么是KVM？ Kernel-based Virtual Machine的简称，KVM 是基于虚拟…...

编程日记 2024/7/29 10:45:01

【Linux】权限2

Linux文件要被执行满足两个条件: ①必须要具备可执行权限 x ②真的是一个可执行程序 1.权限的修改,文件强行给别人权限就是拦住一批人,不让他做特定的一件事情 a.更改人,更改文件所隶属的人如果把文件强行给别人, chown xxx(普通用户) xxx(文件名) 会出现下面的情况很明显…...

编程日记 2024/7/29 10:40:57

汽车长翅膀：GPU 是如何加速深度学习模型的训练和推理过程的？

编者按：深度学习的飞速发展离不开硬件技术的突破，而 GPU 的崛起无疑是其中最大的推力之一。但你是否曾好奇过，为何一行简单的“.to(‘cuda’)”代码就能让模型的训练速度突飞猛进？本文正是为解答这个疑问而作。作者以独特的视角&…...

编程日记 2024/7/29 10:39:56

怀旧必玩！重返童年，扫雷游戏再度登场！

Python提供了一个标准的GUI（图形用户界面）工具包：Tkinter。它可以用来创建各种窗口、按钮、标签、文本框等图形界面组件。而且Tkinter 是 Python 自带的库，无需额外安装。 Now，让我们一起来回味一下扫雷小游戏吧扫…...

编程日记 2024/7/29 10:36:50

Avalonia中的路由事件

文章目录一、路由事件的基本概念事件路由机制事件的生命周期二、创建路由事件定义路由事件触发路由事件处理路由事件三、使用路由事件的场景用户输入控件交互动画和样式数据绑定和验证四、路由事件的优缺点优点：缺点：五、总结在Avalonia中，路由事件是处理用户交互和控件之间…...

编程日记 2024/7/29 10:33:47

ubuntu20.04安装RabbitMQ +Erlang

ubuntu20.04安装RabbitMQ 3.11.19Erlang 25.3.1_ubuntu20.04.6 安装 rabbitmq-CSDN博客 LINUX下载编译libpng_linux libpng下载-CSDN博客 Ubuntu20.04 安装 Nginx 软件报错：libgd3 缺少 libpng12-0 依赖 Ubuntu安装RabbitMq（保姆级教学，直…...

编程日记 2024/7/29 10:31:43

【word转pdf】【最新版本jar】Java使用aspose-words实现word文档转pdf

【aspose-words-22.12-jdk17.jar】word文档转pdf 前置工作1、下载依赖2、安装依赖到本地仓库项目1、配置pom.xml2、配置许可码文件（不配置会有水印）3、工具类4、效果踩坑1、pdf乱码2、word中带有图片转换前置工作 1、下载依赖通过百度网盘分享的文…...

编程日记 2024/7/29 10:25:36

分布式：RocketMQ/Kafka总结(附下载链接)

文章目录下载链接思维导图本文总结的是关于消息队列的常见知识总结。消息队列和分布式系统息息相关，因此这里就将消息队列放到分布式中一并进行处理关联下载链接链接: https://pan.baidu.com/s/1hRTh7rSesikisgRUO2GBpA?pwdutgp 提取码: utgp 思维导图...

编程日记 2024/7/29 10:24:35

Air780EP模块 LuatOS开发-MQTT接入阿里云应用指南

简介本文简单讲述了利用LuatOS-Air进行二次开发，采用一型一密、一机一密两种方式认证方式连接阿里云。整体结构如图关联文档和使用工具：LuatOS库阿里云平台准备工作 Air780EP_全IO开发板一套，包括天线SIM卡，USB线 PC电脑&…...

编程日记 2024/7/29 10:22:33

【算法】插入区间

难度：中等题目： 给你一个无重叠的 ，按照区间起始端点排序的区间列表 intervals，其中 intervals[i] [starti, endi] 表示第 i 个区间的开始和结束，并且 intervals 按照 starti 升序排列。同样给定一个区间 newInte…...

编程日记 2024/7/29 10:16:27

C++ 代码实现socket 类使用TCP/IP进行通信（windows 系统）

C 代码实现socket 类使用TCP/IP进行通信 （windows 系统） TCP客户端通信常规步骤： 1.初始换socket环境 2.socket()创建TCP套接字。 3.connect()建立到达服务器的连接。 4.与客户端进行通信，recv()/send()接受/发送信息&#xff0…...

编程日记 2024/7/29 10:15:26

前后端分离项目部署，vue--nagix发布部署，.net--API发布部署。

目录 Nginx免安装部署文件包准备一、vue前端部署1、修改http.js2、npm run build 编译项目3、解压Nginx免安装，修改nginx.conf二、.net后端发布部署1、编辑appsetting.json，配置跨域请求2、配置WebApi，点击发布3、配置文件发布到那个文件夹4、配置发布相关选项5、点击保存，…...

编程日记 2024/7/29 10:09:18

【BUG】已解决：UnicodeDecodeError: ‘utf-8’ codec can’t decode bytes in position 10

UnicodeDecodeError: ‘utf-8’ codec can’t decode bytes in position 10 目录 UnicodeDecodeError: ‘utf-8’ codec can’t decode bytes in position 10 【常见模块错误】【解决方案】欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#x…...

编程日记 2024/7/29 10:08:16

C++ | QQ后端暑期实习面试

tcp三次握手，四次挥手断点续传文件断点续传是一种机制，允许在网络传输中的文件传输过程中出现断开连接或传输中断的情况下，能够恢复传输并继续传输未完成的部分。其原理如下： 检测支持：首先，服务器端和…...

编程日记 2024/7/29 10:07:14

实用网站推荐

学习前端精简CSS格式 Font Awesome 图标库 BootCDN 加速服务合集 AI工具集动漫、音乐娱乐嗷呜动漫奈飞同步视频下载 B站视频解析下载文件操作 ioDraw制作图 Convertio — 文件转换器 PDF处理 LOGO...

编程日记 2024/7/29 9:59:02

Linux ｜Nethogs 监控网络使用情况

引言互联网上为 Linux 系统提供了许多开源的网络监控工具。例如，你可以利用 iftop 命令来监测网络带宽的消耗，使用 netstat 或 ss 命令来获取网络接口的统计信息，或者通过 top 命令来查看系统中正在运行的进程。然而，如果你真正…...

编程日记 2024/7/29 9:58:01

大语言模型训练过程中，怎么实现算力共享，采用什么分片规则和共享策略

目录大语言模型训练过程中，怎么实现算力共享，采用什么分片规则和共享策略一、算力共享的实现二、分片规则与共享策略三、总结 DeepSpeed、Megatron-LM是什么 DeepSpeed ZeRO技术一般不实现调参的 ZeRO技术的实现方式 ZeRO与调参的关系 NCCL是什么一、NCCL概…...

编程日记 2024/7/29 9:55:59

JCR一区级 | Matlab实现TTAO-Transformer-LSTM多变量回归预测

JCR一区级 | Matlab实现TTAO-Transformer-LSTM多变量回归预测目录 JCR一区级 | Matlab实现TTAO-Transformer-LSTM多变量回归预测效果一览基本介绍程序设计参考资料效果一览基本介绍 1.【JCR一区级】Matlab实现TTAO-Transformer-LSTM多变量回归预测，三角拓扑聚合…...

编程日记 2024/7/29 9:53:56

斐波那契数列（Fibonacci）数列 c++详解

Fibonacci数列是一个在数学和计算机科学中非常著名的数列。这个数列以其特殊的递推关系而闻名，也因其在自然界中的多次出现而引人注目。定义： Fibonacci数列的定义如下： F(0) 0F(1) 1对于 n > 1，F(n) F(n-1) F(n-2) 也就…...

编程日记 2024/7/29 9:52:55

第三届人工智能、物联网和云计算技术国际会议（AIoTC 2024，9月13-15）

第三届人工智能、物联网与云计算技术国际会议(AIoTC 2024)将于2024年9月13日-15日在中国武汉举行。本次会议由华中师范大学伍伦贡联合研究院与南京大学联合主办、江苏省大数据区块链与智能信息专委会承办、江苏省概率统计学会、江苏省应用统计学会、Sir Forum、南京理工大学、…...

编程日记 2024/7/29 9:49:52

家具购物小程序的设计

管理员账户功能包括：系统首页，个人中心，用户管理，家具分类管理，家具新品管理，订单管理，系统管理微信端账号功能包括：系统首页，家具新品，家具公告&#xff0…...

编程日记 2024/7/29 9:48:50

测试面试宝典（三十四）—— token是做什么用的？

Token 在软件系统中通常具有多种重要用途。首先，它用于身份验证和授权。用户登录成功后，系统会生成一个唯一的 token 并返回给客户端，客户端后续的请求携带这个 token 来证明其身份和访问权限，避免了每次请求都需要重新输入用户…...

编程日记 2024/7/29 9:47:48

计算机网络基础：4.HTTP与HTTPS

一、回顾设定想象你在经营一家繁忙的餐厅，顾客们通过点餐系统（网卡）下单，订单被前台（路由器）接收并分发到各个厨房区域（网络设备）。光猫像是食材供应商，通过高效的物流系…...

编程日记 2024/7/29 9:46:46

【深度学习入门】安装conda/miniconda、所需包类、CUDA与conda/Miniconda间的关系

深度学习入门须知本教程跟随李沐老师课程随笔，课程链接点击此处。 CUDA和Anaconda的关系 CUDA Toolkit是由Nvidia官方提供的完整工具包，其中提供了Nvidia驱动程序、开发CUDA程序相关的开发工具包等。 Anaconda在安装Pytorch等会用到的CUDA的框架时…...

编程日记 2024/7/29 9:43:43

0725，进程间传递文件描述符，socketpair + sendmsg/recvmsg

我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎掉了我要碎…...

编程日记 2024/7/29 9:41:39

放大电路总结

补充: 只有直流移动时才有Rbe动态等效电阻从RsUs看进去,实际上不管接了什么东西都能够看成是一个Ri(输入电阻) Ri Ui/Ii Rb//Rbe Ui/Us Ri/(RiRs) Aus (Uo/Ui)*(Ui/Us) Au *Ri/(RiRs) 当前面是一个电压源的信号我们就需要输入电阻更大 Ro--->输出电阻--->将…...

编程日记 2024/7/29 9:37:36

深度学习1-简介

人工智能（AI）旨在打造模仿智能行为的系统。它覆盖了众多方法，涵盖了基于逻辑、搜索和概率推理的技术。机器学习是 AI 的一个分支，它通过对观测数据进行数学模型拟合来学习决策制定。这个领域近年来迅猛发展，现在几乎&a…...

编程日记 2024/7/29 9:35:32

Java基础语法（基础介绍二）

目录 Java 基础语法第一个Java程序基本语法 Java标识符 Java修饰符 Java变量 Java关键字 Java注释 Java 空行 Java 对象和类 Java中的对象 Java中的类构造方法创建对象访问实例变量和方法实例源文件声明规则 Java包 Import语句一个简单的例子 Java…...

编程日记 2024/7/29 9:31:28

SAPUI5基础知识18 - 自定义CSS和主题色

1. 背景在上一篇博客中，我们通过使用SAPUI5提供的CSS类实现元素间距的调整。在本篇博客中，让我们看一下如何实现自定义的CSS样式。 2. 背景知识 2.1 CSS基础语法 CSS，全称为级联样式表（Cascading Style Sheets）&a…...

编程日记 2024/7/29 9:29:25

Postman中API测试的艺术：测试用例复用的高级技巧

Postman中API测试的艺术：测试用例复用的高级技巧在API测试过程中，复用测试用例可以显著提高测试效率和一致性。Postman作为一个强大的API开发工具，提供了多种机制来实现测试用例的复用。本文将深入探讨Postman中API测试用例复用的技巧&…...

编程日记 2024/7/29 9:27:22

Flutter Geocoding插件使用指南：简化地理编码与逆地理编码

Flutter Geocoding插件使用指南：简化地理编码与逆地理编码简介 geocoding 是一个Flutter插件，提供了简便的地理编码（将地址转换为经纬度坐标）和逆地理编码（将经纬度坐标转换为地址）功能。它利用了iOS和A…...

编程日记 2024/7/29 9:26:21

“手撕”全网最细的JDBC教程（安装导入使用）

目录一、什么是JDBC 二、JDBC的安装三、JDBC如何导入四、怎么使用JDBC编写代码一、什么是JDBC JDBC由Java提供给数据库的一组通用的API。在平常的业务中，是比较少使用像cmd命令行来操作数据库的，更多的是操作代码（Python&#xff…...

编程日记 2024/7/29 9:25:20

C++指针选择题带答案

1、有如下语句int a10,b20,*p1,*p2;p1&a;p2&b;如图1所示，若要实现图2所示的存储结构，可选用的赋值语句是___________。 A)*p1*p2; B)p1p2; C）p1*p2; D)*p1p2; 2、变量的指针，其含义是该…...

编程日记 2024/7/29 9:24:18

力扣二分查找

二分查找基础篇。题目 class Solution {public int searchInsert(int[] nums, int target) {int l 0, r nums.length - 1;while(l < r) {int mid l((r-l)>>1);//(lr)/2if(nums[mid]<target)lmid1;else rmid-1;}return l;//处理边界，设定数组的左半…...

编程日记 2024/7/29 9:21:15

ADMAS-Simulink联合仿真输入设置

使用Solidworks、ADAMS、Simulink进行机电联合仿真_adams-simulink-CSDN博客RecurDynSimulink联合仿真案例演示_哔哩哔哩_bilibili# C#调用已经使用Python训练好的神经网络做图片检测_c#调用python训练好的神经网络模型-CSDN博客...

编程日记 2024/7/29 9:20:14

【NOI】C++程序设计入门三

文章目录前言一、大杂烩1.导入2.常量3.标识符4.关键字5.整型补充5.1 short：短整型5.2 long：长整型5.3 long long：长长整型二、例题讲解问题：1597. 买文具问题：1596. 火柴棒三角形问题问题：1417. 买文具问…...

编程日记 2024/7/29 9:16:10

Three.js投射光线实现三维物体交互

<template><div id"webgl"></div> </template><script setup> import * as THREE from three //导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls // 导入 dat.gui import { GUI } from thre…...

编程日记 2024/7/29 9:14:08