麦子的博客

JS MediaStream格式转换背景在 Web 应用开发中，实时音频通信越来越普遍，比如在线语音聊天、实时音频直播等场景。Opus 作为一种高效的音频编码格式，以其出色的音质和较低的带宽消耗，成为了众多音频应用的首选编码方案。本文将深入探讨如何使用 JavaScript 在浏览器中实现音频流的 Opus 编码数据传输，让你能够快速将这一技术集成到自己的 Web 项目中。 Opus 编码简介Opus 是一种完全开放、免专利费的音频编码格式，由互联网工程任务组（IETF）开发。它可以在非常低的比特率下，提供高质量的音频，适用于从语音到全带宽音频的各种应用场景。相较于其他音频编码格式，Opus 在编码效率和音质之间达到了很好的平衡，因此被广泛应用于实时通信、音频录制和流媒体传输等领域。 实现步骤1. 编写一个一个简单的音频流传输服务首先，我们需要一个简单的音频流传输服务，用于模拟音频数据的传输过程。在这个例子中，我们将使用 WebSocket 来实现音频流的传输。 12345678910111213141516171819202122232425262728293031323334353 ...

1392b2da79a7da20ae679e815d65e13d2922d55df2f416ee7782665fe8539a175bc35750b34df30ee5711a6ee5b21ecc2d66afcb99e1d67a883ab88dde0f4276399b33bd65a38498d5582ec0fc80371c576d633bdd470f3d10f163814daf92dc249a907fbe7fb1843a5431f53eb83e91f34a4adf5221d98f18e27d2ddad990cafc0108ca314826c6c9d3193997bcacc4ca3ee8b37058ce1911e7f7be6e20286d005ff461258b55296d22ccb0b72fd047aec1e5bab59aadeef61e3ea56887a2e2a49cc6cc3d11b81718c08717a10bc05a2d4ae0e0ab7753321214a9b77a9937b8ab2ebd4128761abc5a26e1a6dc0dfa1d69d240bc5a3e233e2 ...

封装 websocket创建websocket类 你是一个软件研发助理,你可以根据我提供的需求描述为我生成高质量的代码.代码风格和性能优秀,达到工程线上使用要求.请使用 typescript 语言,帮助封装一个 websocket 类,这个类需要有心跳检测,并支持断开重连功能,还需要对外开放消息监听事件,支持添加多个监听函数,移除监听函数. 123456789101112131415161718192021222324252627嗯，用户让我用TypeScript封装一个WebSocket类，需要有心跳检测、断开重连，还要支持消息监听和多个监听函数的添加移除。首先，我得理清楚这些功能点该怎么实现。首先，心跳检测。通常的做法是定时发送一个ping消息，如果对方没有响应pong，就判断为断开。所以需要两个定时器，一个用于定期发送心跳，另一个检测是否超时。如果超时了，就触发重连。然后是断开重连。当连接关闭或出错时，应该尝试重新连接。这里需要设置一个重连的间隔，可能还要有最大重试次数，避免无限重连。重连的时候可能需要指数退避算法，但用户没特别说明，先简单用固定间隔吧。消息监听部分，需要维护一 ...

TypeScript+leafletjs 自定义 MarkerLeaflet 的 Marker 类通常是通过扩展 L.Marker 来实现的，要支持角度设置，关键点在于如何让 Marker 的图标能够旋转。在 Leaflet 中，可以通过修改图标的 CSS 属性来实现旋转。因此，自定义的 arker 类需要有一个设置角度的方法，并在内部更新图标的样式。以下是一个示例代码，展示了如何创建一个支持角度设置的 Marker 类(大部分代码来自于 deepseek R1)： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879import type { MarkerOptions, Point, LatLngExpression } from 'leaflet'import * as L from 'l ...

1. 构建镜像可以通过dockerfile文件构建镜像 123456789101112131415161718192021# 使用 Node.js 16 作为基础镜像FROM node:16.14.2# 将当前工作目录设置为/appWORKDIR /app# 将 package.json 和 package-lock.json 复制到 /app 目录下COPY package*.json ./# 运行 npm install 安装依赖RUN yarn config set registry https://registry.npmmirror.com/RUN yarn install# 将源代码复制到 /app 目录下COPY . .# 打包构建RUN yarn build# 将构建后的代码复制到 nginx 镜像中FROM nginx:latestCOPY --from=0 /app/index.html /usr/share/nginx/html# 复制自定义的Nginx配置到镜像中，覆盖默认配置COPY nginx.conf /etc/nginx/conf.d/default.c ...

由于公司的破Windows电脑安装Docker以后，一直提示WSL在执行的时候有异常，所以回来在虚拟机里折腾一下Docker的安装。打开Docker官网文档看了下，Ubuntu版本必须要>=22.04才可以安装，而我虚拟机里还是几年前安装的elementary OS5.0（Ubuntu 18.04）,显然需要升级系统。 一. 5.0升级到6.01234# 修改源 将以下文件中的 bionic 替换为 focalsudo vim /etc/apt/sources.listsudo vim /etc/apt/sources.list.d/patches.listsudo vim /etc/apt/sources.list.d/elementary.list 修改后sources.list的内容为： 123456deb http://mirrors.163.com/ubuntu/ focal main restricted multiversedeb http://mirrors.163.com/ubuntu/ focal-updates main restricteddeb htt ...

CSS优惠券打孔样式 .box { background: #fff; padding-top: 100px; padding-bottom: 100px; border: 1px solid #f2f2f2; width: 400px; } .hole { padding-bottom: 25px; background: #f2f2f2; margin-bottom: 20px; overflow: hidden; position: relative; width: 100%; height: 50px; box-sizing: border-box; } .hole::before { z-index: 1; position: absolute; content: ''; border: calc(200px - 18px) solid #fff; width: 40px; height: 40px; border-radius: 50%; top: 50%; left: -50%; ...

CSS 绘制信封形状的几种写法 .card{ background: #fff; width: 375px; height: 300px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); margin-bottom: 20px; } .radius { border-radius: 0 0 200px 200px; background: #f2f2f2; height: 178px; width: auto; margin: 0 -20px; overflow: hidden; position: relative; } .radius::after { content: ''; border-radius: 0 0 200px 200px; box-shadow: inset 0 -10px 10px rgba(0, 0, 0, 0.3); position: ...

1392b2da79a7da20ae679e815d65e13d2922d55df2f416ee7782665fe8539a175bc35750b34df30ee5711a6ee5b21ecc2d66afcb99e1d67a883ab88dde0f4276399b33bd65a38498d5582ec0fc80371c576d633bdd470f3d10f163814daf92dc249a907fbe7fb1843a5431f53eb83e91f34a4adf5221d98f18e27d2ddad990cafc0108ca314826c6c9d3193997bcacc4ca3ee8b37058ce1911e7f7be6e20286d005ff461258b55296d22ccb0b72fd047aec1e5bab59aadeef61e3ea56887a2e2a49cc6cc3d11b81718c08717a10bc05a2d4ae0e0ab7753321214a9b77a9937b8ab2ebd4128761abc5a26e1a6dc0dfa1d69d240bc5a3e233e2 ...

ElementUI 设置 Table 的行间距ElementUI 的 Table 组件默认的是行与行挨着，需要更改组件的样式 123456789::v-deep .el-table { &::before { height: 0; } .el-table__body { //-webkit-border-horizontal-spacing: 13px; // 水平间距 -webkit-border-vertical-spacing: 13px; // 垂直间距 }} .table-wrap { margin: 0; overflow: hidden; } .el-table::before { height: 0; } .el-table .el-table__body { -webkit-border-vertical-spacing: 13px; } .el-table .warning-row { background: oldlace; } .el ...