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

有趣且重要的JS知识合集(18)浏览器实现前端录音功能

1、主题描述

兼容多个浏览器下的前端录音功能,实现六大录音功能:

1、开始录音

2、暂停录音

3、继续录音

4、结束录音

5、播放录音

6、上传录音

2、示例功能

初始状态:

开始录音:

结束录音:

录音流程 :

示例中的三个按钮其实包含了六个上述功能,点击开始时开始录音,可以暂停/结束录音,此操作后就可以播放播音/上传录音了噢~以下是对应六大录音功能示例代码,那大家会发现HZRecorder是啥呢? 其实 HZRecorder 是录音类,我们调用的都是该类里面的方法。

那大家肯定好奇,录音是通过怎样一种形式存在呢?其实用的就是浏览器的AudioContext对象,他旨在创建一个音频dom,有输入和输出。具体想了解这对象的,可以去mdn看看

AudioContext

    /*** 录音前准备 检查录音设备是否到位*/this.readyRecording = async function() {let recorder // 表示录音类实例// 流模式下ready钩子 res 为录音类实例 或者 falseawait HZRecorder.ready().then(res => {recorder = res})return recorder}/*** 开始录音*/this.startRecording = function() {recorder.start();}/*** 结束录音*/this.stopRecording = function() {recorder.end();}/*** 播放录音*/this.playRecording = function() {recorder.play(audio);}/*** 继续录音*/this.resumeRecord = function() {recorder.again();}/*** 暂停录音*/this.pauseRecord = function() {recorder.stop();}/*** 重新录音*/this.reRecord = function() {this.startRecording()}/*** 上传录音*/this.uploadRecord = function() {// 流模式下上传recorder.upload(url, succ, fail)}

3、流模式下的录音类

大家看到这标题就好奇,啥叫流模式下的录音类呢?那还有其他模式吗?的确,我总结了下,是根据上传录音时的数据来区分的~我们常规情况下,上传录音都是流模式,也就是Content-Type为application/octem-stream,源码如下

/*** 录音类(针对content-type为application/octem-stream 的使用)* @param {*} stream * @param {*} config */
const HZRecorder = function (stream, config) {config = config || {};config.sampleBits = config.sampleBits || 8;      //采样数位 8, 16  config.sampleRate = config.sampleRate || (44100 / 6);   //采样率(1/6 44100)  //创建一个音频环境对象  audioContext = window.AudioContext || window.webkitAudioContext;var context = new audioContext();//将声音输入这个对像  var audioInput = context.createMediaStreamSource(stream);//设置音量节点  var volume = context.createGain();audioInput.connect(volume);//创建缓存,用来缓存声音  var bufferSize = 4096;// 创建声音的缓存节点,createScriptProcessor方法的  // 第二个和第三个参数指的是输入和输出都是双声道。  var recorder = context.createScriptProcessor(bufferSize, 2, 2);var audioData = {size: 0          //录音文件长度  , buffer: []     //录音缓存  , inputSampleRate: context.sampleRate    //输入采样率  , inputSampleBits: 16       //输入采样数位 8, 16  , outputSampleRate: config.sampleRate    //输出采样率  , oututSampleBits: config.sampleBits       //输出采样数位 8, 16  , input: function (data) {this.buffer.push(new Float32Array(data));this.size += data.length;}, compress: function () { //合并压缩  //合并  var data = new Float32Array(this.size);var offset = 0;for (var i = 0; i < this.buffer.length; i++) {data.set(this.buffer[i], offset);offset += this.buffer[i].length;}//压缩  var compression = parseInt(this.inputSampleRate / this.outputSampleRate);var length = data.length / compression;var result = new Float32Array(length);var index = 0, j = 0;while (index < length) {result[index] = data[j];j += compression;index++;}return result;}, encodeWAV: function () {var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);var bytes = this.compress();var dataLength = bytes.length * (sampleBits / 8);var buffer = new ArrayBuffer(44 + dataLength);var data = new DataView(buffer);var channelCount = 1;//单声道  var offset = 0;var writeString = function (str) {for (var i = 0; i < str.length; i++) {data.setUint8(offset + i, str.charCodeAt(i));}};// 资源交换文件标识符   writeString('RIFF'); offset += 4;// 下个地址开始到文件尾总字节数,即文件大小-8   data.setUint32(offset, 36 + dataLength, true); offset += 4;// WAV文件标志  writeString('WAVE'); offset += 4;// 波形格式标志   writeString('fmt '); offset += 4;// 过滤字节,一般为 0x10 = 16   data.setUint32(offset, 16, true); offset += 4;// 格式类别 (PCM形式采样数据)   data.setUint16(offset, 1, true); offset += 2;// 通道数   data.setUint16(offset, channelCount, true); offset += 2;// 采样率,每秒样本数,表示每个通道的播放速度   data.setUint32(offset, sampleRate, true); offset += 4;// 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8   data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset += 4;// 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8   data.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;// 每样本数据位数   data.setUint16(offset, sampleBits, true); offset += 2;// 数据标识符   writeString('data'); offset += 4;// 采样数据总数,即数据总大小-44   data.setUint32(offset, dataLength, true); offset += 4;// 写入采样数据   if (sampleBits === 8) {for (var i = 0; i < bytes.length; i++, offset++) {var s = Math.max(-1, Math.min(1, bytes[i]));var val = s < 0 ? s * 0x8000 : s * 0x7FFF;val = parseInt(255 / (65535 / (val + 32768)));data.setInt8(offset, val, true);}} else {for (var i = 0; i < bytes.length; i++, offset += 2) {var s = Math.max(-1, Math.min(1, bytes[i]));data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);}}return new Blob([data], { type: 'audio/wav' });}};//开始录音  this.start = function () {audioInput.connect(recorder);recorder.connect(context.destination);};//停止  this.stop = function () {recorder.disconnect();};// 结束this.end = function () {context.close();};// 继续this.again = function () {recorder.connect(context.destination);};//获取音频文件  this.getBlob = function () {this.stop();return audioData.encodeWAV();};//回放  this.play = function (audio) {audio.src = window.URL.createObjectURL(this.getBlob());};//上传  this.upload = function (url, succ, fail) {const xhr = new XMLHttpRequest();xhr.overrideMimeType("application/octet-stream")// xhr.upload.addEventListener('progress', function (e) {// }, false);xhr.addEventListener('load', function (e) {succ(xhr.response)}, false);xhr.addEventListener('error', function (e) {fail(xhr.response);}, false);xhr.addEventListener('abort', function (e) {fail(xhr.response);}, false);xhr.open('POST', url);if(xhr.sendAsBinary){xhr.sendAsBinary(this.getBlob());}else{xhr.send(this.getBlob());}};//音频采集  recorder.onaudioprocess = function (e) {audioData.input(e.inputBuffer.getChannelData(0));};
}/*** 多浏览器兼容* @param {*} videoConfig 参数配置* @param {*} succ 成功回调* @param {*} fail 失败回调* @returns promise*/
HZRecorder.compatibleMedia = async function(videoConfig) {let streamPromise // 视频promiseif (navigator.mediaDevices && navigator.mediaDevices.getUserMedia){// 最新标准APIstreamPromise = await navigator.mediaDevices.getUserMedia(videoConfig)} else if (navigator.webkitGetUserMedia){// webkit内核浏览器streamPromise = await navigator.webkitGetUserMedia(videoConfig)} else if (navigator.mozGetUserMedia){// Firefox浏览器streamPromise = await navagator.mozGetUserMedia(videoConfig)} else if (navigator.getUserMedia){// 旧版APIstreamPromise = await navigator.getUserMedia(videoConfig)}return streamPromise
}
/*** 是否支持录音* @returns 支持直接返回录音类实例 : 返回false*/
HZRecorder.ready = async function() {let instance // 录音类实例(ready ok) | false (ready no)await HZRecorder.compatibleMedia({ audio: true }).then(stream => {instance = new HZRecorder(stream);}).catch(() => {instance = false})return instance
}

4、表单模式下的录音类

和上述流模式的录音类有区别的是,表单模式下适用于上传录音时Content-Type为application/x-www-form-urlencoded噢~

// --------------------------------------------------/*** 录音类(指定content-type为application/x-www-form-urlencoded使用)* @param {*} stream 流对象*/const HZRecorderForm = function (stream) {//创建一个音频环境对象  audioContext = window.AudioContext || window.webkitAudioContext;var ac = new audioContext();var chunks = [];var mediaRecordervar blobResult//开始录音  this.start = function () {if (!mediaRecorder) {var origin = ac.createMediaStreamSource(stream)var dest = ac.createMediaStreamDestination();mediaRecorder = new MediaRecorder(dest.stream);mediaRecorder.ondataavailable = function(e) {chunks.push(e.data);}mediaRecorder.onstop = function(evt) {blobResult = new Blob(chunks, { 'type' : 'audio/mpeg' });};origin.connect(dest);}mediaRecorder.start();};// 结束录音this.end = function () {// 当录音类处于不活跃状态时,停止操作if (mediaRecorder.state === 'inactive') returnmediaRecorder.requestData()mediaRecorder.stop();};// 暂停录音this.stop = function() {// 当录音类处于不活跃状态时,停止操作if (mediaRecorder.state === 'inactive') returnmediaRecorder.pause()}// 恢复录音this.again = function() {// 当录音类处于不活跃状态时,停止操作if (mediaRecorder.state === 'inactive') returnmediaRecorder.resume()}//上传  this.upload = function (url, succ, err) {setTimeout(() => {var xhr = new XMLHttpRequest();xhr.open('POST', url);xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')xhr.send(blobResult);xhr.onload = e => {// 请求完成 && 外部状态码200 && 内部状态码1(这个内部状态码自定义)if (xhr.readyState === 4 && xhr.status === 200 && JSON.parse(xhr.response).status === 1) {succ && succ(xhr.response)} else {err && err(JSON.parse(xhr.response).message)}}})};}/*** 多浏览器兼容* @param {*} videoConfig 参数配置* @param {*} succ 成功回调* @param {*} fail 失败回调* @returns promise*/
HZRecorderForm.compatibleMedia = async function(videoConfig) {let streamPromise // 视频promiseif (navigator.mediaDevices && navigator.mediaDevices.getUserMedia){// 最新标准APIstreamPromise = await navigator.mediaDevices.getUserMedia(videoConfig)} else if (navigator.webkitGetUserMedia){// webkit内核浏览器streamPromise = await navigator.webkitGetUserMedia(videoConfig)} else if (navigator.mozGetUserMedia){// Firefox浏览器streamPromise = await navagator.mozGetUserMedia(videoConfig)} else if (navigator.getUserMedia){// 旧版APIstreamPromise = await navigator.getUserMedia(videoConfig)}return streamPromise
}
/*** 是否支持录音* @returns 支持直接返回录音类实例 : 返回false*/
HZRecorderForm.ready = async function() {let instance // 录音类实例(ready ok) | false (ready no)await HZRecorderForm.compatibleMedia({ audio: true }).then(stream => {instance = new HZRecorderForm(stream);}).catch(() => {instance = false})return instance
}

5、疑难解答

1、在录音开始前都必须调用readyRecording方法吗?

必须噢,你也可以自己实现这功能,HZRecorder.ready()方法返回的是promise对象,其值在当前有麦克风时候,返回的是录音类实例,你拿到此值就可以调用录音类的方法,无麦克风时候,返回的是false,表示当前不具备录音环境~

/*** 录音前准备 检查录音设备是否到位*/this.readyRecording = async function() {let recorder // 表示录音类实例// 流模式下ready钩子 res 为录音类实例 或者 falseawait HZRecorder.ready().then(res => {recorder = res})// 表单模式下ready钩子 res 为录音类实例 或者 falseawait HZRecorderForm.ready().then(res => {recorder = res})return recorder}

2、火狐浏览器提示 navigator.mediaDevices is undefined,找不到?

是的噢,火狐浏览器的navigator对象没有mediaDevices这个属性,所以这也是我为啥在录音类里要加入compatibleMedia方法,此方法就是用来兼容各个浏览器的噢~火狐就是用的navigator.mozGetUserMedia方法

/*** 多浏览器兼容* @param {*} videoConfig 参数配置* @param {*} succ 成功回调* @param {*} fail 失败回调* @returns promise*/
HZRecorder.compatibleMedia = async function(videoConfig) {let streamPromise // 视频promiseif (navigator.mediaDevices && navigator.mediaDevices.getUserMedia){// 最新标准APIstreamPromise = await navigator.mediaDevices.getUserMedia(videoConfig)} else if (navigator.webkitGetUserMedia){// webkit内核浏览器streamPromise = await navigator.webkitGetUserMedia(videoConfig)} else if (navigator.mozGetUserMedia){// Firefox浏览器streamPromise = await navagator.mozGetUserMedia(videoConfig)} else if (navigator.getUserMedia){// 旧版APIstreamPromise = await navigator.getUserMedia(videoConfig)}return streamPromise
}

3、录音类的ready方法,为啥要使用async/await呢?

这个就有点涉及异步的知识了,在一个异步函数里,return是属于同步逻辑噢,promise.then属于异步,所以 return 会先于 .then执行的噢,这就和我们的想法不一致了,所以要await 阻塞代码,拿到instance值了,再返回

/*** 是否支持录音* @returns 支持直接返回录音类实例 : 返回false*/
HZRecorder.ready = async function() {let instance // 录音类实例(ready ok) | false (ready no)await HZRecorder.compatibleMedia({ audio: true }).then(stream => {instance = new HZRecorder(stream);}).catch(() => {instance = false})return instance
}

4、录音类为啥要使用 XMLHttpRequest 来触发接口呢?

不一定要使用原生xhr噢,你也可以根据你需求来修改成axios/fetch/ajax等~这个不影响整体代码的使用

5、流模式和表单模式的录音类本质上有啥区别?

其实在外层是上传接口的请求头区别,但在实际上,只是由于流模式下的写法,无法将音频转成mp3格式(默认为wav格式),当然网上也有小伙伴认为引入lame库来实现wav转换mp3的操作,当然可以啦~这不影响,只是对我来说,我是能不引入第三方库就不引入。

而表单模式实际上用的浏览器支持的另一个接口 MediaRecorder

而MediaRecorder是专门来做录制的,他想转换格式的话,就简单的多,在录制完触发onstop时,将可以将二进制数据转换成任意想要的格式,audio/mpeg就是mp3的格式~

        mediaRecorder.ondataavailable = function(e) {chunks.push(e.data);}mediaRecorder.onstop = function(evt) {blobResult = new Blob(chunks, { 'type' : 'audio/mpeg' });};

6、表单模式下的录音类为啥要判断inactive状态呢?

因为 MediaRecorder 接口 有三个状态 inactive, recording, paused

这三个状态分别是设备闲置,设备使用,设备暂停,有点类似于window的未响应,当我们想要操作麦克风时,此时麦克风inactive了,那就无法响应我们的请求,所以当状态为inactive时,我们都return掉,使他不执行我们的方法。

    // 结束录音this.end = function () {// 当录音类处于不活跃状态时,停止操作if (mediaRecorder.state === 'inactive') returnmediaRecorder.requestData()mediaRecorder.stop();};// 暂停录音this.stop = function() {// 当录音类处于不活跃状态时,停止操作if (mediaRecorder.state === 'inactive') returnmediaRecorder.pause()}// 恢复录音this.again = function() {// 当录音类处于不活跃状态时,停止操作if (mediaRecorder.state === 'inactive') returnmediaRecorder.resume()}

------有不懂的可以评论区聊聊噢~------

相关文章:

有趣且重要的JS知识合集(18)浏览器实现前端录音功能

1、主题描述 兼容多个浏览器下的前端录音功能&#xff0c;实现六大录音功能&#xff1a; 1、开始录音 2、暂停录音 3、继续录音 4、结束录音 5、播放录音 6、上传录音 2、示例功能 初始状态&#xff1a; 开始录音&#xff1a; 结束录音&#xff1a; 录音流程 &#xf…...

面试官:聊聊你知道的跨域解决方案

跨域是开发中经常会遇到的一个场景&#xff0c;也是面试中经常会讨论的一个问题。掌握常见的跨域解决方案及其背后的原理&#xff0c;不仅可以提高我们的开发效率&#xff0c;还能在面试中表现的更加游刃有余。 因此今天就来和大家从前端的角度来聊聊解决跨域常见的几种方式。…...

SpringCloud五大核心组件

Consul 等&#xff0c;提供了搭建分布式系统及微服务常用的工具&#xff0c;如配置管理、服务发现、断路器、智能路由、微代理、控制总线、一次性token、全局锁、选主、分布式会话和集群状态等&#xff0c;满足了构建微服务所需的所有解决方案。 服务发现——Netflix Eureka …...

Verilog HDL语言入门(二)

强烈建议用同步设计2.在设计时总是记住时序问题3.在一个设计开始就要考虑到地电平或高电平复位、同步或异步复位、上升沿或下降沿触发等问题&#xff0c;在所有模块中都要遵守它4.在不同的情况下用if和case&#xff0c;最好少用if的多层嵌套&#xff08;1层或2层比较合适&#…...

Simpleperf详细使用

一、Simpleperf介绍 Simpleperf是一个强大的命令行工具&#xff0c;它包含在NDK中&#xff0c;可以帮助我们分析应用的CPU性能。Simpleperf可以帮助我们找到应用的热点&#xff0c;而热点往往与性能问题相关&#xff0c;这样我们就可以分析修复热点源。 如果您更喜欢使用命令…...

【算法基础】二分图(染色法 匈牙利算法)

一、二分图 1. 染色法 一个图是二分图,当且仅当,图中不含奇数环。在判别一个图是否为二分图⑩,其实相当于染色问题,每条边的两个点必须是不同的颜色,一共有两种颜色,如果染色过程中出现矛盾,则说明不是二分图。 for i = 1 to n:if i 未染色DFS(i, 1); //将i号点染色未…...

Caputo 分数阶微分方程-慢扩散方程初边值问题基于L1 逼近的空间二阶方法及其Matlab程序实现

2.3.3 Caputo 分数阶一维问题基于 L1 逼近的空间二阶方法 考虑如下时间分数阶慢扩散方程初边值问题 { 0 C D t α u ( x , t ) = u...

I.MX6ULL_Linux_驱动篇(29) GPIO驱动

Linux 下的任何外设驱动&#xff0c;最终都是要配置相应的硬件寄存器。所以本篇的 LED 灯驱动最终也是对 I.MX6ULL 的 IO 口进行配置&#xff0c;与裸机实验不同的是&#xff0c;在 Linux 下编写驱动要符合 Linux 的驱动框架。I.MX6U-ALPHA 开发板上的 LED 连接到 I.MX6ULL 的 …...

jupyter的安装和使用

目录 ❤ Jupyter Notebook是什么&#xff1f; notebook jupyter 简介 notebook jupyter 组成 网页应用 文档 主要特点 ❤ jupyter notebook的安装 notebook jupyter 安装有两种途径 1.通过Anaconda进行安装 2.通过pip进行安装 启动jupyter notebook ❤ jupyter …...

Springboot新手开发 Cloud篇

前言&#xff1a; &#x1f44f;作者简介&#xff1a;我是笑霸final&#xff0c;一名热爱技术的在校学生。 &#x1f4dd;个人主页&#xff1a;个人主页1 || 笑霸final的主页2 &#x1f4d5;系列专栏&#xff1a;后端专栏 &#x1f4e7;如果文章知识点有错误的地方&#xff0c;…...

Linux:函数指针做函数参数

#include <stdio.h> #include <stdlib.h> //创建带有函数指针做参数的函数框架api //调用者要先实现回调函数 //调用者再去调用函数框架 //所谓的回调是指 调用者去调用一个带有函数指针做参数的函数框架&#xff0c;函数框架反过来要调用调用者提供的回调函数 …...

Vue3(递归组件) + 原生Table 实现树结构复杂表格

一、递归组件 什么是递归&#xff0c;Javascript中经常能接触到递归函数。也就是函数自己调用自己。那对于组件来说也是一样的逻辑。平时工作中见得最多应该就是菜单组件&#xff0c;大部分系统里面的都是递归组件。文章中我做了按需引入的配置&#xff0c;所以看不到我引用组…...

ArrayList底层源码解析

Java源码系列&#xff1a;下方连接 http://t.csdn.cn/Nwzed 文章目录前言一、**ArrayList底层结构和源码分析**无参构造调用创建ArrayList集合无参构造总结&#xff1a;发文3个工作日后 up 会把总结放入前言部分&#xff0c;但也诚邀读者总结&#xff0c;可放入评论区有参构造…...

python:DIY字符画的程序使用说明.doc

目录开发环境要求运行方法具体的操作步骤如下&#xff1a;代码示例源码及运行程序下载地址开发环境要求 本系统的软件开发及运行环境具体如下。 操作系统&#xff1a;Windows 7、Windows 10。 Python版本&#xff1a;Python 3.7.0。 开发工具&#xff1a;Python IDLE。 …...

【Python/Opencv】图像权重加法函数:cv2.addWeighted()详解

【Python/Opencv】图像权重加法函数&#xff1a;cv2.addWeighted()详解 文章目录【Python/Opencv】图像权重加法函数&#xff1a;cv2.addWeighted()详解1. 介绍2. API3. 代码示例与效果3.1 代码3.2 效果4. 参考1. 介绍 在OpenCV图像加法cv2.add函数详解详细介绍了图像的加法运…...

容器的老祖宗LXC和Docker的关系

一、什么是LXC&#xff1f; LXC&#xff08;Linux Container的缩写&#xff09;是一个基于Linux内核的容器虚拟化技术&#xff0c;它提供了一种轻量级、快速、简便的方式来创建和管理系统容器。与传统虚拟化技术不同&#xff0c;LXC并不会模拟硬件&#xff0c;而是利用Linux内…...

Webpack迁移Rspack速攻实战教程(前瞻版)

前言 rspack 即将开源&#xff0c;但社区中不乏有已经落地的 case &#xff0c;比如 rspack-migration-showcase 、 modern.js 等。 基于此&#xff0c;本文将介绍如何迁移一个近似于 CRA&#xff08; create-react-app &#xff09; 的项目到 rspack 。 在阅读本文前&#…...

一行代码“黑”掉任意网站

文章目录只需一行代码&#xff0c;轻轻一点就可以把任意网站变成暗黑模式。 首先我们先做一个实验&#xff0c;在任意网站中&#xff0c;打开浏览器开发者工具(F12)&#xff0c;在 C1onsole 控制台输入如下代码并回车&#xff1a; document.documentElement.style.filterinve…...

51单片机入门 -驱动 8x8 LED 点阵屏

硬件型号、软件版本、以及烧录流程 操作系统&#xff1a;Windows 10 x84-64单片机&#xff1a;STC89C52RC编译器&#xff1a;SDCC烧录软件&#xff1a;stcgal 1.6开发板&#xff1a;普中51单片机开发板A2套件&#xff08;2022&#xff09; 在 VS Code 中新建项目到烧录的过程…...

Xinlinx zynq7045国产替代 FMQL45T900全国产化 ARM 核心板+扩展板

TES745D 是一款基于 FMQL45T900 的全国产化 ARM 核心板。该核心板将 FMQL45T900&#xff08;与XC7Z045-2FFG900I 兼容&#xff09;的最小系统集成在了一个 87*117mm 的核心板上&#xff0c;可以作为一个核心模块&#xff0c;进行功能性扩展&#xff0c;能够快速的搭建起一个信号…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

算术操作符与类型转换:从基础到精通

目录 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符&#xff1a;、-、*、/、% 赋值操作符&#xff1a;和复合赋值 单⽬操作符&#xff1a;、--、、- 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...