Fork me on GitHub

chrome 插件

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包.

v2版本已经逐渐不在被支持，以v3语法为基础的简单笔记

more >>

展开全文 >>

java plugins

Vosk

集成本地语音转文字服务，不依赖第三方

Vosk是言语识别工具包。Vosk最好的事情是：

  1. 支持二十+种语言 - 中文，英语，印度英语，德语，法语，西班牙语，葡萄牙语，俄语，土耳其语，越南语，意大利语，荷兰人，加泰罗尼亚语，阿拉伯, 希腊语, 波斯语, 菲律宾语，乌克兰语, 哈萨克语, 瑞典语, 日语, 世界语, 印地语, 捷克语, 波兰语, 乌兹别克语, 韩国语, 塔吉克语
  2. 移动设备上脱机工作-Raspberry Pi，Android，iOS
  3. 使用简单的 pip3 install vosk 安装
  4. 每种语言的手提式模型只有是50Mb, 但还有更大的服务器模型可用
  5. 提供流媒体API，以提供最佳用户体验（与流行的语音识别python包不同）
  6. 还有用于不同编程语言的包装器-java / csharp / javascript等
  7. 可以快速重新配置词汇以实现最佳准确性
  8. 支持说话人识别

Stirling-Tools

​ 这是一个使用 Docker 的强大的、本地托管的基于 Web 的 PDF 操作工具。它使您能够对 PDF 文件执行各种操作，包括拆分、合并、转换、重新组织、添加图像、旋转、压缩等。这个本地托管的 Web 应用程序已经发展到包含一套全面的功能，可以满足您的所有 PDF 需求。

展开全文 >>

nextjs基础

​ Next.js是一个基于React的开源JavaScript框架，旨在简化React应用程序的开发流程，并提供更好的性能和开发体验。

​ 它的诞生背景是基于开发者和企业对构建更快、更优化的Web应用程序的需求，特别是在服务端渲染（SSR）和搜索引擎优化（SEO）方面。

官方文档

more >>

展开全文 >>

h5开发

最近开发了app项目。使用的h5项目然后套壳成app。记录下过程

h5项目采用的 vite+vue3+vant

h5文档

套壳方式：

1、hbuildX 云打包

window.plus 是 HBuilderX 和 uni-app 提供的 API 对象，用于访问设备的原生功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
if(window.plus){ 
    plusReady(); 
}else{ 
    document.addEventListener( "plusready", plusReady, false ); 
} // 扩展API准备完成后要执行的操作 
function plusReady(){ 
    plus.android.requestPermissions(['android.permission.RECORD_AUDIO'], function(e) {
        if(e.deniedAlways.length>0){	//权限被永久拒绝
            // 弹出提示框解释为何需要定位权限，引导用户打开设置页面开启
            console.log('限被永久拒绝!!! '+e.deniedAlways.toString());
        }
        if(e.deniedPresent.length>0){	//权限被临时拒绝
            // 弹出提示框解释为何需要定位权限，可再次调用plus.android.requestPermissions申请权限
            console.log('权限被临时拒绝!!! '+e.deniedPresent.toString());
        }
        if(e.granted.length>0){	//权限被允许
            //调用依赖获取定位权限的代码
            console.log('权限被允许!!! '+e.granted.toString());
        }
    }, function() {

    })
    
}

2、hbuildX本地打包

3、capacitorjs + Android Studio 打包

4、cordova 打包

more >>

展开全文 >>

高性能网站建设指南

​ 性能黄金法则(Performance Golden Rule)揭示了只有10%20%的最终用户响应时间花在接收所请求的HTML文档上剩下的80%90%时间花在为HTML文档所引用的所有组件(图片、脚本、样式表Flash 等)进行的HTTP 请求上。因此，改善响应时间的最简单途径就是减少组件的数量，并由此减少 HTTP 请求的数量

减少http请求

more >>

展开全文 >>

项目中遇到的问题

在此记录一些杂七杂八的遇到的神奇的问题

跨域问题

访问阿里云oss图片文件跨域

项目中 canvas 使用 toDataURL() 方法导出图片base64信息

图片设置 img.crossOrigin = ‘Anonymous’; 【为啥图片要设置这个，canvas跨域渲染图片会导致画布污染，无法导出图片】结果报错跨域

1
Access to image at xxx from origin xxx has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因：在网上查询问题原因是由于cdn缓存问题导致。通过控制台 network中的 disabled chache 选项打开就好了，可以确定是这个问题

img

解决方法

在图片路径后边加上时间戳

1
https://rongdao.oss-cn-beijing.aliyuncs.com/2023/12/19/20231219174004_20231219094008A824.jpg?1706081125760

参考文章

环境问题

window.crypto.randomUUID 无法使用

原因是 http部署环境下不能使用这个方法，如同 拉取媒体设备，webrtc 也是同样的问题

展开全文 >>

webrtc 基础

WebRTC是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点的（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。它包括的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

理论知识

媒体协商（sdp）

​ 彼此了解对方支持的媒体格式，这是两个不同网络环境浏览器要实现语音视频通话的首要解决问题

网络协商（candidate）

​ 了解对方的网络情况

  1. 获取外网IP地址映射

  2. 通信服务器交换网络信息

实际情况是：我们电脑和电脑之间或大或小都是在某个局域网里面，需要NAT(网络地址转换)

more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。