- 博客(185)
- 收藏
- 关注
RSS订阅原创 webRTC指定设备加自定义用户头像
音视频业务开发中设备管理的关键问题与解决方案 摘要：本文针对音视频业务开发中的设备管理复杂性问题，提出了两种典型场景的解决方案。场景1处理轨道切换时的设备重建逻辑，建议就近切换而非默认设备；场景2解决多设备管理问题，强调严格模式优先的设备匹配策略。文章详细介绍了强制指定麦克风和摄像头的实现方法，通过'exact'模式精确匹配设备，失败后回退到系统默认模式。同时指出了权限查询的兼容性问题，并提供可视化错误提示方案，避免用户忽视问题。代码示例展示了Promise封装的设备管理逻辑，包括错误处理和空轨道创建，为音
2025-12-24 14:11:17
304
原创 electron-vite报错Unexpected end of JSON input
一个用vite启动浏览器脚手架；另一个用electron-vite启动时；报错Unexpected end of JSON input。错误的核心根源：端口冲突引发的通信数据污染。：vite 默认启动端口号都是。要放在renderer里面。
2025-12-11 18:00:24
308
原创 音视频开发远端未发布视频占位图2
音视频开发中占位图方案：解决黑屏问题的Canvas头像占位实现 摘要： 本文介绍了一种基于Canvas的头像占位方案，用于解决音视频开发中流未发布、网络中断或设备故障时的黑屏问题。通过创建自适应布局的Canvas背景图，在中心位置绘制蓝色圆角方框和用户姓名首字母，下方显示完整姓名（超长自动截断）。该方案采用1280×720画布，支持动态更新用户名，并自动转换为背景图避免布局冲突。相比直接使用视频元素或黑屏处理，这种占位图方案提供了更好的用户体验，特别适用于音视频会议、直播等场景的异常状态处理。核心API包括
2025-10-27 11:23:44
258
原创 音视频开发本地端摄像头不可用时发布占位视频流
音视频开发中摄像头占用的优雅处理方案 在Web音视频开发中，当摄像头被占用或不可用时，会导致远端订阅成功却显示黑屏。本文提出一种解决方案：通过创建带有提示信息的虚拟视频流，替代黑屏状态。该方案封装了CreateEmptyVideoCanvasStream类，可生成包含灰色摄像头图标和背景的画布流，同时保持15fps的帧率。开发者可单独使用该虚拟流，或与麦克风音频流合并为完整媒体流。实现中采用定时器（而非requestAnimationFrame）确保后台持续运行，并使用createImageBitmap优化
2025-10-21 15:35:14
470
原创 音视频开发远端未发布视频占位图1
音视频开发中，当对方未发布视频或停止发送流时，使用占位图能有效避免黑屏问题。本文提供了一个头像占位工具类AvatarCameraSpace，支持两种占位方式：1）Canvas绘制蓝色圆角矩形+用户姓名首字；2）Video元素占位。核心功能包括：初始化占位元素、更新用户名、清除重复创建和销毁实例。通过Canvas绘制自适应父容器的占位图，包含用户姓名首字母和完整姓名（超长截断），比单纯黑屏更具可读性和美观性。该方案适用于视频会议、直播等需要用户视频占位的场景。
2025-10-21 15:34:20
249
原创 electron-vite_20外部依赖包上线后如何更新
Electron 项目中使用 electron-vite(Vite的Electron 构建工具)时的配置文件，告诉 Vite哪些依赖(包)在打包时不用一起打包，而是运行时让Electron去外部加载;什么场景会用,比方说你依赖一个声网做音视频能力,然后你业务层本身没啥更新,只是这个SDK有Bug需要修复,这个时候你差量更新声网这个依赖就行了;为什么有些模块需要被外部化?举例：dingrtc-electron-sdk；
2025-08-22 10:41:09
370
原创 electron-vite_20配置依赖包运行时区外部加载commonjsExternals_vite-plugin-commonjs-externals
本文介绍了在Electron项目中使用electron-vite构建工具时，如何通过vite-plugin-commonjs-externals插件配置外部依赖。步骤包括：安装插件(v0.1.4)、在配置文件中引入插件、定义需要外部加载的依赖包列表(如dingrtc-electron-sdk)，并在renderer配置中添加插件。打包后，这些依赖将保留在node_modules目录而非被打包进应用。适用于需要运行时动态加载特定依赖的场景，可有效控制最终包体积。
2025-08-22 10:40:22
193
原创 electron-vite_19配置环境变量
前端配置环境变量的两种方案：1）直接在根目录创建.env文件，通过import.meta.env访问变量，并在package.json中指定运行模式；2）在vite配置中指定envDir目录，将环境变量文件统一存放。两种方式都支持通过--mode参数切换环境，变量通过import.meta.env访问。方案2更便于管理多环境配置文件，适合复杂项目结构。
2025-08-21 14:08:36
364
原创 electron-vite_18Less和Sass共用样式指定
本文介绍了在Electron项目中配置Less预处理器的方法。主要内容包括：1.在electron.vite.config.ts中设置别名路径和additionalData全局引入样式；2.必须手动引入一个Less文件才能使配置生效；3.配置Less参数如禁用charset、启用JavaScript表达式等；4.支持通过modifyVars修改主题变量。同时提供了在Vue组件中使用<style lang="scss">的替代方案。配置完成后可实现Less公用样式和方法的全局封
2025-08-21 13:47:08
535
原创 高德地图2.0适配
本文总结了高德地图API 2.0版本在使用过程中遇到的几个问题及解决方案：1）聚合功能需使用AMap.Adaptor适配器，且每次更新需重建MarkerCluster对象；2）Marker标签显示问题，可通过renderMarker回调或鼠标事件监听重新定位；3）划线工具无法通过双击和右键结束的问题，需手动监听地图事件处理。文章提供了详细的代码示例，帮助开发者从1.4.15版本平滑过渡到2.0版本。
2025-07-07 14:21:00
416
原创 浏览器绿屏仅关闭关video硬件加速
因为关闭硬件加速是全局的，这样一些基于WebGL或者一些需要GPU体验的页面将无法正常使用，或严重卡顿，比方说2.0的高德地图技术选型上是基于WebGL的，关闭后很多用户会有明显卡顿;
2025-07-03 11:53:23
562
原创 支持TypeScript并打包为ESM/CommonJS/UMD三种格式的脚手架项目
这是一个支持TypeScript的多格式JavaScript打包脚手架项目，采用Rollup构建工具，可生成ESM、CommonJS和UMD三种模块格式。项目配置了TypeScript、ESLint、Prettier和Terser，确保代码质量与风格统一。主要特性包括：自动生成类型声明文件、开发和生产环境区分、代码压缩优化。项目结构清晰，包含完整的配置文件（rollup.config.js、tsconfig.json等），支持npm脚本一键构建和代码格式化。适用于需要跨平台兼容的JS库开发，要求Node v
2025-06-03 16:50:38
538
原创 electron-vite_18桌面共享
摘要：Electron默认不支持桌面共享功能，需配置desktopCapturer模块。在main.js中，通过设置displayMediaRequestHandler处理程序，使用desktopCapturer.getSources获取屏幕源（types: ['screen']），并在回调中返回视频源和音频配置。该方案适用于Electron 31.0.2及以上版本，实现桌面音视频捕获功能。
2025-06-03 16:49:36
542
原创 webRtc之指定摄像头设备绿屏问题
最近发现，在使用navigator.mediaDevices.getUserMedia({ deviceId: ‘xxx’}),指定设备的时候，video播放总是绿屏，发现关闭浏览器硬件加速不会出现，但显然这不是一个最好的方案;
2025-05-07 14:46:13
631
原创 天地图Marker跳一跳动画
天地图的Marker点终于也能实现“跳一跳”啦！虽然天地图官方API目前没有直接提供Marker点跳动的现成方法，但我们可以借助一些技术手段来实现这一效果。
2025-03-26 10:48:47
412
原创 天地图Label文字居中
在使用自定义Label的时候，我们有文字居中显示的需求，但是天地图4.0截止2025年3月26日，官方并没有提供api方式；
2025-03-26 10:48:16
499
原创 天地图监听多边形是否改变
天地图4.0截止2025年3月24日，并没有提供多边形改变后的回调函数，其实多边形的应用在地图GIS系统中有很多用处，比方说点子围栏编辑告警；离不开多边形的绘制和编辑能力;
2025-03-25 13:37:27
297
原创 天地图监听圆是否改变
天地图4.0截至2025年3月24日还不支持编辑监听改变，但是不妨碍我们使用技术手段进行实现，达到监听半径和圆点是否改变的方法;
2025-03-25 13:36:59
253
原创 天地图编辑支持删除编辑点
截至2025年3月21日天地图4.0线编辑，只支持添加点，不支持删除编辑点，后续只能通过绑定地图事件曲线救国，虽然没有高德丝滑，但至少可以使用；
2025-03-21 10:11:09
303
原创 vite调试node_modules下面插件
在使用vite进行开发的时候,我们可能想要修改node_modules中插件的源码.特别是集成一个SDK，需要调试去判断问题时，或者研究第三方源码时后;vite默认是走缓存的，所以当修改后不会看到你打印的日志，这个时候有几种方法可以选择;
2025-02-19 14:58:14
556
原创 地图坐标系转换JS库
支持转换坐标数组和GeoJSON数据，无外部依赖，能在nodejs、所有现代浏览器（IE8+）和ReactNative等环境中运行，gzip后仅3kb。gcoord(geographiccoordinates)是一个处理地理坐标系的JS库，用来修正百度地图、高德地图及其它互联网地图坐标系不统一的问题。
2025-01-20 14:59:50
797
原创 天地图SVG主题滤镜在线编辑
目前天地图商用暂时不收费，但是后续可能会收费，高德、百度、腾讯目前是5万1年，截至2025年1月2日官方只提供了2个主题色，目前已经调好几个主题色可以使用；
2025-01-02 15:49:13
623
原创 天地图svg滤镜自定义主题色
要使用SVG Gradient Map Filter自定义天地图的主题颜色，并将其应用到天地图的图片上，本文自己调了几个常用主题，你也可以自己尝试调配自己的主题。
2025-01-02 15:28:48
1923
原创 electron-vite_17设置系统音量loudness报错
loudness是一款控制系统音量输出的一款 Node.js 库；但是在electron-vite中直接使用编译的时候会报错；这个时候需要单独处理；
2024-12-26 16:05:50
377
原创 webrtc-internals调试工具
Google 的 Chrome（87 或更高版本）WebRTC 内部工具是一套内置于 Chrome 浏览器中的调试工具;webrtc-internals 能够查看有关视频和音频轨道、使用的编解码器以及流的一般质量的详细信息。这些知识对于解决音频和视频质量差的问题非常有帮助。webrtc-internals 还提供有关 WebRTC 调用中使用的网络配置的详细信息，例如 STUN/ TURN服务器和 ICE 候选者。
2024-12-26 16:05:16
1848
原创 electron-vite_16 electron音频自动播放
自动播放设置的存在具有一定的合理性和实用性。最近的项目是开发类似腾讯会议终端产品，开机自启动，扫码入会，全程用户不会与界面产生交互，那就意味着入会后无法听到声音；好在有办法解决。虽然有解决方案，也要考虑好取舍，毕竟如果不加以合理设置和管理，也可能会给用户带来困扰。可能会影响你产品的推广和市场占有率;
2024-12-19 18:15:11
539
原创 radash工具类
radash 库是一个现代的 JavaScript 工具库，旨在提供一系列实用的函数，以简化常见的编程任务。它受到 lodash 和 ramda 等库的启发，但旨在提供更简洁和现代的 API。GitHubradash官方文档,得翻墙radash镜像。
2024-12-13 11:33:59
928
原创 用户引导Driver.js
Driver.js 是一个轻量级的、无依赖的JavaScript库，用于引导用户的注意力到页面上的特定元素，可以用来实现页面导览、功能介绍等场景。GigHub官方文档。
2024-12-12 10:39:32
592
原创 拖拽FormKit
FormKit的拖放是一个小库，用于添加数据-首先在你的应用程序中拖放排序和传输列表。它简单、灵活、不受框架限制，并且只有大约4Kb的gzipped。
2024-12-12 10:39:04
469
原创 加密crypto-js
crypto-js 是一个著名的 JavaScript 加密库，它提供了一系列的加密算法，包括哈希算法（如 SHA-1、SHA-256）、消息认证码（如 HMAC）、对称加密算法（如 AES）等。它允许开发者在浏览器和 Node.js 环境中执行加密和解密操作。GitHub。
2024-12-11 10:09:57
734
原创 图片提取文字工具Tesseractjs
Tesseract.js 是一个基于 Tesseract OCR 引擎的开源 JavaScript 库，用于在浏览器和 Node.js 环境中执行光学字符识别 (OCR)。它的特点是无需依赖服务器端支持，完全在客户端执行 OCR 操作。跨平台支持：支持 100 多种语言的纯 JavaScript OCR 库;GitHub地址;
2024-12-11 10:09:38
1085
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人