非你网 - 挥泪别痴心，只怨情长天未怜。盼君忆我千百世，真爱永不悔。

<div>
<label class="upload-btn" for="video">
    <span class="text">上传</span>
</label>
<input class="hidden" id="video" name="video" type="file" accept="video/mp4" @change="changeVideo" />
</div>

获取视频元信息。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

使用 createObjectURL 创建的URL是一个blob:开头的临时路径，这个路径可以在浏览器中直接访问，访问到的内容就是上传的视频文件。当页面关闭后，此路径也随之失效。

function changeVideo() {
    const fileInput: HTMLInputElement = document.getElementById('video') as HTMLInputElement
    const files: FileList = fileInput?.files as FileList
    const file = files[0]

    const video = document.createElement('video')
    video.src = URL.createObjectURL(file)
    video.addEventListener('loadedmetadata', function () {
        console.log(video.duration)
    })
}

定格到视频位置

// 设置视频自动播放
video.autoplay = true
// 设置视频播放的时间(方便截图)
video.currentTime = 1

绘制 canvas

const canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext("2d");
if (ctx) {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// document.body.appendChild(canvas);
}

将 canvas 转换成图片

canvas.toBlob((blob) => {
if (blob) {
const url = URL.createObjectURL(blob);
}
});

完整的 ts。


interface VideoInfo {
    name: string
    width: number
    height: number
    thumbnail?: string
    duration?: number
}

function getVideoInfo(file: File, maxWidth = 320) {
    return new Promise<VideoInfo>((resolve) => {
        const index = file.name.lastIndexOf('.')
        const name = index > 0 ? file.name.substring(0, index) : ''
        const videoMedia: VideoInfo = {
            name,
            width: 0,
            height: 0
        }

        const video = document.createElement('video')
        video.src = URL.createObjectURL(file)
        video.addEventListener('loadedmetadata', function () {
            videoMedia.width = video.videoWidth
            videoMedia.height = video.videoHeight
            videoMedia.duration = video.duration
        })

        // 监听视频跳转完成事件
        video.addEventListener('seeked', function () {
            // 创建画布并绘制视频帧
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')

            if (video.videoWidth > maxWidth) {
                canvas.width = maxWidth
                canvas.height = Math.round((maxWidth / video.videoWidth) * this.videoHeight)
            } else {
                canvas.width = video.videoWidth
                canvas.height = video.videoHeight
            }

            if (ctx) {
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
                canvas.toBlob((blob) => {
                    if (blob) {
                        videoMedia.thumbnail = URL.createObjectURL(blob)
                        resolve(videoMedia)
                    } else {
                        resolve(videoMedia)
                    }
                })
            } else {
                resolve(videoMedia)
            }
            // 释放创建的临时URL
            // URL.revokeObjectURL(video.src)
        })

        // 设置视频自动播放
        video.autoplay = true
        // 设置视频播放的时间(方便截图)
        video.currentTime = 1
    })
}

阅读全文 >>

1月 02

docker 部署安装 webrtc 的 stun/turn 服务

发表于 2025年1月2日 • 33 views • 没有评论!

linux

局域网内，即使不配置 stun/turn， webrtc 也是能音视频通话。如果在广域网环境，必须得有 turn 服务。那么自己构建一个 turn 服务就很有必要。不过广域网的 webrtc 对带宽的消耗也是很大。

STUN
STUN（Session Traversal Utilities for NAT，NAT 会话穿越应用程序）是一种网络协议，它允许位于NAT（或多重NAT）后的客户端找出自己的公网地址，查出自己位于哪种类型的NAT之后以及NAT为某一个本地端口所绑定的 Internet 端端口。这些信息被用来在两个同时处于 NAT 路由器之后的主机之间创建 UDP 通信。该协议由 RFC 5389 定义。(提供客户端检测自己的公共 IP 地址和端口)

STUN 并不是每次都能成功的为需要 NAT 通话设备分配 IP 地址的，P2P 在传输媒体流时，使用的本地带宽，在多人视频通话的过程中，通话质量的好坏往往需要根据使用者本地的带宽确定。

TURN
TURN 的全称为 Traversal Using Relays around NAT，是 STUN/RFC5389 的一个拓展，主要添加了 Relay 功能。如果终端在 NAT 之后，那么在特定的情景下，有可能使得终端无法和其对等端（peer）进行直接的通信，这时就需要公网的服务器作为一个中继，对来往的数据进行转发。这个转发的协议就被定义为 TURN。

在 STUN 分配公网 IP 失败后，可以通过 TURN 服务器请求公网 IP 地址作为中继地址。这种方式的带宽由服务器端承担，在多人视频聊天的时候，本地带宽压力较小，并且，根据 Google 的说明，TURN 协议可以使用在所有的环境中。（中继流量，当点对点连接不可用时，Coturn 会接管通信。）

ICE 跟 STUN 和 TURN 不一样，ICE 不是一种协议，而是一个框架（Framework），它整合了 STUN 和 TURN。coturn 开源项目集成了 STUN 和 TURN 的功能。

阅读全文 >>

12月 23

前端 js 通过 url 给 unity webgl 传参

发表于 2024年12月23日 • 50 views • 没有评论!

前端

要实现前端 js 通过 url 给 unity webgl 传参，可以通过两步来实现。第一步是 unity 调用 js 脚本。第二步是将参数给到 url。

unity webgl 和 js 交互 https://docs.unity3d.com/cn/2018.4/Manual/webgl-interactingwithbrowserscripting.html

这个是从 Unity 5.6 开始，5.6 和以后的版本可以这样使用。

步骤

unity 端在 Assets 文件夹中的 Plugins 文件夹下新建 default.jslib 文件，填入一下代码。

mergeInto(LibraryManager.library, {
  GetURLParam: function(key) {
    var params = new URLSearchParams(window.location.search)
    var returnStr = params.get(key)
    if (returnStr) {
      var bufferSize = lengthBytesUTF8(returnStr) + 1
      var buffer = _malloc(bufferSize)
      stringToUTF8(returnStr, buffer, bufferSize)
      return buffer
    }
    return null
  }
});

如果要返回字符串给 unity 用，必须要经过

      var bufferSize = lengthBytesUTF8(returnStr) + 1
      var buffer = _malloc(bufferSize)
      stringToUTF8(returnStr, buffer, bufferSize)

处理。

unity 调用。


using UnityEngine;
using System.Runtime.InteropServices;

public class NewBehaviourScript : MonoBehaviour {
[DllImport("__Internal")]
private static extern string GetURLParam(string key);

void Start() {
    string step = GetURLParam("step");
    Debug.Log(step);
}

}

阅读全文 >>

12月 15

nuxt 3 使用（1）安装

发表于 2024年12月15日 • 54 views • 没有评论!

nuxt,前端

这里使用 pnpm + vite 构建官网：https://nuxt.com/docs/getting-started/installation

安装

pnpm dlx nuxi@latest init vini123

cd vini123

pnpm install

pnpm  dev -o

配置 typescript

https://nuxt.com/docs/guide/concepts/typescript

pnpm add -D vue-tsc typescript

npx nuxi typecheck

修改 nuxt.config.ts 配置。

export default defineNuxtConfig({
  typescript: {
    typeCheck: true,
    strict: true
  }
})

ui 框架

https://primevue.org/

https://daisyui.com/

阅读全文 >>

11月 26

tauri 2 打包安装包成中文界面

发表于 2024年11月26日 • 122 views • 没有评论!

tauri,前端

tauri 2 默认打出的安装包是英文的。配置下，就可以打出中文安装包。

操作

修改 src-tauri/tauri.conf.json 文件，在 bundle 节点下追加 windows 节点（默认是没有的），然后将 wix 的 language 设置为 zh-CN 即可。

  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/icon.png",
      "icons/128x128.png",
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ],
    "windows": {
      "allowDowngrades": true,
      "certificateThumbprint": null,
      "digestAlgorithm": null,
      "nsis": null,
      "signCommand": null,
      "timestampUrl": null,
      "tsp": false,
      "webviewInstallMode": {
        "silent": true,
        "type": "downloadBootstrapper"
      },
      "wix": {
        "language": "zh-CN"
      }
    }
  }

阅读全文 >>

11月 26

tauri 2 使用系统托盘

发表于 2024年11月26日 • 130 views • 没有评论!

tauri,前端

自古以来，对于桌面应用，系统托盘是不可缺少的一部分。tauri 2 也是一样。

官网文档：https://v2.tauri.app/learn/system-tray/
参考博客：https://blog.csdn.net/xiaoyuanbaobao/article/details/143781484

对于 tarui 2，很多服务端的功能，前端也可以实现。它会提供一套 api，使得前端可以构建服务端的能力。当然，也可以在服务端去实现，然后用前端去调用。

简单记录一下

有上边的文档和博客，就可以完成基础的托盘创建。这里做以下简单的记录。

阅读全文 >>

11月 26

tauri 2 打包时错误处理

发表于 2024年11月26日 • 117 views • 没有评论!

tauri,前端

Error failed to bundle project: https://github.com/wixtoolset/wix3/releases/download/wix3141rtm/wix314-binaries.zip: Connection Failed: Connect error: 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。 (os error 10060)

执行 pnpm tauri build，然后就会遇到上边这个问题。不管你是否用了梯子，都会出现这个问题。的却是有点坑。既然上边提示下载 zip 失败，那就手动下载下来，然后解压放到对应的位置就可以。这里放在

C:\Users\{user}\AppData\Local\tauri 下，可以在终端中使用 cd ~/AppData/Local/tauri 即可达到。然后将文件夹重命名为 WixTools314 即可，这个很重要，一定要命名为 WixTools314 而不是 WixTools

Error failed to bundle project: error running light.exe: failed to run C:\Users\Windows\AppData\Local\tauri\WixTools314\light.exe

编辑 tauri.conf.json ，bundle 节点中新增以下配置。

    "windows": {
      "allowDowngrades": true,
      "certificateThumbprint": null,
      "digestAlgorithm": null,
      "nsis": null,
      "signCommand": null,
      "timestampUrl": null,
      "tsp": false,
      "webviewInstallMode": {
        "silent": true,
        "type": "downloadBootstrapper"
      },
      "wix": {
        "language": "zh-CN"
      }
    }

主要就是 wix 的 language 一定要设置成 zh-CN。这个是配置中，包名使用中文引起的。

参考

https://blog.csdn.net/qq_41614928/article/details/128145938

https://blog.csdn.net/weixin_44786530/article/details/143132166

阅读全文 >>

11月 26

tauri 2 生成 app icon

发表于 2024年11月26日 • 73 views • 没有评论!

tauri,前端

不需要额外的工具，直接使用 tauri 命令，就可以生成所有的 app icon

先准备一张宽高相同的 png 图片。最好是 1024 * 1024 宽高的。
将该图片命名为 app-icon.png,并放在项目根目录。
执行 pnpm tauri icon 即可生成所有的图片（会覆盖曾经的）。

阅读全文 >>

11月 26

tauri 2 创建 webview

发表于 2024年11月26日 • 117 views • 没有评论!

tauri,前端

tauri 2 创建 webview。这里前端使用的 vue3。需要以下两步就可以。

配置权限和安全。
编写前端逻辑。

配置权限和安全

src-tauri/capabilities/default.json

增加以下配置。

{
   ……,
  "permissions": [
    "core:default",
    "shell:allow-open",
    {
      "identifier": "http:default",
      "allow": [
        {
          "url": "https://www.yuepaibao.com/"
        }
      ],
      "deny": [
        {
          "url": "https://private.tauri.app"
        }
      ]
    },
    "core:webview:allow-create-webview",
    "core:window:allow-show",
    "core:webview:allow-create-webview-window",
    "core:webview:allow-webview-close"
  ]
}

编写前端逻辑

src/App.vue

<script setup lang="ts">
  import { WebviewWindow } from "@tauri-apps/api/webviewWindow";

  const webview = new WebviewWindow("search", {
    center: true,
    width: 540,
    height: 960,
    alwaysOnTop: true,
    skipTaskbar: true,
    decorations: true,
    closable: true,
    url: "https://www.yuepaibao.com",
  });

  webview.once("tauri://created", function () {
    console.log("webview created");
  });
  webview.once("tauri://error", function (e) {
    console.log("error creating webview", e);
  });
</script>

如果想创建 webview 后，马上进入全屏。可以这样弄。

在权限配置那里，将设置全屏的权限配置进去。
在 webview 创建成功的回调里，设置全屏。

增加配置

"core:window:allow-set-fullscreen"

编写代码，修改和编辑

  import { Window } from "@tauri-apps/api/window";

  webview.once("tauri://created", async function () {
    console.log("webview created");
    const window = await Window.getByLabel("search");
    if (window) {
      window
        .setFullscreen(true)
        .then(() => {
          console.log("Window is now fullscreen");
        })
        .catch((error) => {
          console.error("Error setting fullscreen:", error);
        });
    }
  })

阅读全文 >>

11月 21

MFA 之 TOTP

发表于 2024年11月21日 • 91 views • 没有评论!

工具

随着各个平台（github,阿里云，等）都开始使用 MFA 来增加软件使用的安全性。对软件进行 MFA 处理还是有必要。有些平台已经在强制使用了。

MFA（Multi-factor Authentication，多因素认证）是一种安全实践，它要求用户提供两种或两种以上的认证因素来验证身份，以增强账户和系统的安全性。

TOTP（Time-Based One-Time Password，基于时间的一次性密码）是一种基于时间的一次性密码算法，通常用于两步验证和多因素身份验证，以增强静态口令认证的安全性。它由互联网工程任务组（IETF）在RFC 6238中定义，是HOTP（基于哈希的消息认证码的一次性密码算法）的扩展，添加了时间因素。

TOTP 可以是 MFA 的一部分。

MFA 的工作原理

MFA的目的是建立一个多层次的防御，使未经授权的人访问计算机系统或网络更加困难，从而提高安全性。

MFA通常包括以下三个要素之一或多个的组合：

知识因素（用户知道的东西）：如密码、PIN码、答案问题。
所有权因素（用户拥有的东西）：如手机、硬件令牌、电子邮件。
生物特征因素（用户所具有的东西）：如指纹、虹膜、面部识别

实现MFA的基本步骤通常包括：

第一步验证（通常是密码）：用户输入用户名和密码，数据库对其进行验证。
第二步验证（如一次性密码 OTP）：如果第一步验证通过，用户会收到一个一次性密码（OTP），通常通过短信、电子邮件或身份验证器应用生成。用户需要输入这个OTP。
验证通过：系统验证OTP的有效性，如果正确，则允许用户访问资源。

MFA的实现方法：
MFA可以通过多种方式实现，以下是一些常见的方法：

双因素身份验证（2FA）：这是最常见的MFA形式，包括两个身份验证步骤，例如输入密码后，向用户的手机或电子邮件发送一次性密码（OTP）。
身份验证器软件：身份验证器软件会生成基于时间的一次性密码（TOTP），供用户在输入密码后使用。
硬件令牌：用户可以携带的物理设备，如安全密钥，用于生成一次性密码或提供认证响应。短信或电子邮件验证码：向用户的手机号或邮箱发送验证码，用户需要输入这个验证码来完成认证。

简要

上边这些，都是一些文字的简要介绍。真正的使用场景可以这样。

比如，先账号密码登录或扫码登录。这一步验证通过后，再进行短信验证或 TOTP 验证。毕竟短信的使用是有费用成本，使用 TOTP 来实现验证就是一个省钱的方式。只是 TOTP 也是需要客户端来做支撑。（自己开发或让用户使用市面上成熟的工具）

阅读全文 >>

2025年 1月
一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Write the Code. Change the World.

步骤

安装

配置 typescript

ui 框架

操作

简单记录一下

参考

配置权限和安全

编写前端逻辑

MFA 的工作原理

简要