ffmpeg-browser-cdn-loader 1.0.0

package/PUBLISH.md

@@ -0,0 +1,114 @@
+# 发布到 npm 指南
+
+## 前提条件
+
+1. 拥有 npm 账号（在 https://www.npmjs.com/ 注册）
+2. 已安装 Node.js 和 npm
+
+## 发布步骤
+
+### 1. 登录 npm
+
+```bash
+npm login
+```
+
+输入你的 npm 用户名、密码和邮箱。
+
+### 2. 检查包名是否可用
+
+```bash
+npm view @ilovesong/ffmpeg-browser
+```
+
+如果显示 404，说明包名可用。如果已被占用，需要修改 `package.json` 中的 `name` 字段。
+
+### 3. 进入包目录
+
+```bash
+cd ffmpeg-browser-loader
+```
+
+### 4. 发布包
+
+```bash
+npm publish --access public
+```
+
+注意：由于使用了 scoped package（@ilovesong），需要添加 `--access public` 参数。
+
+### 5. 验证发布
+
+访问 https://www.npmjs.com/package/@ilovesong/ffmpeg-browser 查看你的包。
+
+## 更新版本
+
+当需要更新包时：
+
+```bash
+# 修改代码后，更新版本号
+npm version patch  # 1.0.0 -> 1.0.1
+# 或
+npm version minor  # 1.0.0 -> 1.1.0
+# 或
+npm version major  # 1.0.0 -> 2.0.0
+
+# 发布新版本
+npm publish --access public
+```
+
+## 在项目中使用
+
+发布成功后，在你的主项目中：
+
+```bash
+npm install @ilovesong/ffmpeg-browser
+```
+
+然后修改 `libs/localMp4Generator.js`：
+
+```javascript
+import { getFFmpeg, getFetchFile, getToBlobURL } from '@ilovesong/ffmpeg-browser';
+
+export async function initFFmpeg(onProgress) {
+  if (ffmpegInstance) return ffmpegInstance;
+
+  try {
+    const FFmpeg = await getFFmpeg();
+    const fetchFile = await getFetchFile();
+    const toBlobURL = await getToBlobURL();
+    
+    const ffmpeg = new FFmpeg();
+    // ... 其余代码保持不变
+  } catch (error) {
+    // ...
+  }
+}
+```
+
+## 注意事项
+
+1. 包名必须唯一，如果 `@ilovesong/ffmpeg-browser` 已被占用，改用其他名字
+2. 确保 package.json 中的 version、description 等信息正确
+3. 首次发布 scoped package 必须使用 `--access public`
+4. 发布后无法删除，只能废弃（deprecate）
+
+## 故障排除
+
+### 包名已被占用
+
+修改 `package.json` 中的 name，例如：
+- `@your-username/ffmpeg-browser`
+- `@ilovesong/ffmpeg-loader`
+- `@ilovesong/ffmpeg-cdn`
+
+### 需要验证邮箱
+
+npm 会发送验证邮件，点击链接验证后才能发布。
+
+### 权限错误
+
+确保已正确登录：
+```bash
+npm whoami
+```

package/README.md

@@ -0,0 +1,104 @@
+# @ilovesong/ffmpeg-browser
+
+A lightweight FFmpeg loader for browsers that loads FFmpeg from CDN at runtime, avoiding the need to bundle large WASM files in your application.
+
+## Why?
+
+The official `@ffmpeg/ffmpeg` package is large and can cause issues with deployment platforms like Cloudflare Pages. This package solves that by:
+
+- Loading FFmpeg from CDN only when needed
+- Zero bundle size impact
+- Same API as the official package
+- Works in all modern browsers
+
+## Installation
+
+```bash
+npm install @ilovesong/ffmpeg-browser
+```
+
+## Usage
+
+```javascript
+import { getFFmpeg, getFetchFile, getToBlobURL } from '@ilovesong/ffmpeg-browser';
+
+async function processVideo() {
+  // Get FFmpeg class (loads from CDN on first call)
+  const FFmpeg = await getFFmpeg();
+  const fetchFile = await getFetchFile();
+  const toBlobURL = await getToBlobURL();
+  
+  // Use FFmpeg as normal
+  const ffmpeg = new FFmpeg();
+  
+  ffmpeg.on('log', ({ message }) => {
+    console.log(message);
+  });
+  
+  // Load FFmpeg core
+  const coreBase = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd';
+  await ffmpeg.load({
+    coreURL: await toBlobURL(`${coreBase}/ffmpeg-core.js`, 'text/javascript'),
+    wasmURL: await toBlobURL(`${coreBase}/ffmpeg-core.wasm`, 'application/wasm'),
+  });
+  
+  // Process video...
+  await ffmpeg.writeFile('input.mp4', await fetchFile(videoBlob));
+  await ffmpeg.exec(['-i', 'input.mp4', 'output.mp4']);
+  const data = await ffmpeg.readFile('output.mp4');
+  
+  return new Blob([data], { type: 'video/mp4' });
+}
+```
+
+## API
+
+### `getFFmpeg()`
+
+Returns the FFmpeg class. Loads from CDN on first call.
+
+```javascript
+const FFmpeg = await getFFmpeg();
+const ffmpeg = new FFmpeg();
+```
+
+### `getFetchFile()`
+
+Returns the fetchFile utility function.
+
+```javascript
+const fetchFile = await getFetchFile();
+const data = await fetchFile(url);
+```
+
+### `getToBlobURL()`
+
+Returns the toBlobURL utility function.
+
+```javascript
+const toBlobURL = await getToBlobURL();
+const blobURL = await toBlobURL(url, mimeType);
+```
+
+## How it works
+
+1. On first use, the package dynamically loads FFmpeg libraries from CDN
+2. Libraries are cached by the browser
+3. Subsequent calls use the cached version
+4. Your application bundle stays small
+
+## Browser Support
+
+- Chrome/Edge 90+
+- Firefox 89+
+- Safari 15+
+
+Requires WebAssembly and SharedArrayBuffer support.
+
+## License
+
+MIT
+
+## Credits
+
+This package is a lightweight wrapper around [@ffmpeg/ffmpeg](https://github.com/ffmpegwasm/ffmpeg.wasm).

package/index.js

@@ -0,0 +1,103 @@
+/**
+ * @ilovesong/ffmpeg-browser
+ * 
+ * A lightweight FFmpeg loader for browsers that loads FFmpeg from CDN at runtime.
+ * This avoids bundling large WASM files in your application.
+ */
+
+let FFmpegClass = null;
+let fetchFileFunc = null;
+let toBlobURLFunc = null;
+
+const CDN_BASE = 'https://cdn.jsdelivr.net/npm';
+const FFMPEG_VERSION = '0.12.10';
+const UTIL_VERSION = '0.12.1';
+
+/**
+ * Load a script dynamically
+ */
+function loadScript(src) {
+  return new Promise((resolve, reject) => {
+    if (typeof window === 'undefined') {
+      reject(new Error('This package only works in browser environments'));
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = src;
+    script.onload = resolve;
+    script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
+    document.head.appendChild(script);
+  });
+}
+
+/**
+ * Initialize FFmpeg by loading from CDN
+ */
+async function initialize() {
+  if (FFmpegClass) {
+    return; // Already initialized
+  }
+
+  if (typeof window === 'undefined') {
+    throw new Error('This package only works in browser environments');
+  }
+
+  // Load FFmpeg library
+  if (!window.FFmpegWASM) {
+    await loadScript(`${CDN_BASE}/@ffmpeg/ffmpeg@${FFMPEG_VERSION}/dist/umd/ffmpeg.js`);
+  }
+
+  // Load FFmpeg utilities
+  if (!window.FFmpegUtil) {
+    await loadScript(`${CDN_BASE}/@ffmpeg/util@${UTIL_VERSION}/dist/umd/index.js`);
+  }
+
+  // Wait a bit for scripts to fully initialize
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  if (!window.FFmpegWASM || !window.FFmpegUtil) {
+    throw new Error('Failed to load FFmpeg libraries from CDN');
+  }
+
+  FFmpegClass = window.FFmpegWASM.FFmpeg || window.FFmpegWASM;
+  fetchFileFunc = window.FFmpegUtil.fetchFile;
+  toBlobURLFunc = window.FFmpegUtil.toBlobURL;
+
+  if (!FFmpegClass || !fetchFileFunc || !toBlobURLFunc) {
+    throw new Error('FFmpeg libraries loaded but exports not found');
+  }
+}
+
+/**
+ * Get FFmpeg class (loads from CDN if needed)
+ */
+export async function getFFmpeg() {
+  await initialize();
+  return FFmpegClass;
+}
+
+/**
+ * Get fetchFile utility (loads from CDN if needed)
+ */
+export async function getFetchFile() {
+  await initialize();
+  return fetchFileFunc;
+}
+
+/**
+ * Get toBlobURL utility (loads from CDN if needed)
+ */
+export async function getToBlobURL() {
+  await initialize();
+  return toBlobURLFunc;
+}
+
+/**
+ * Export a default object with all utilities
+ */
+export default {
+  getFFmpeg,
+  getFetchFile,
+  getToBlobURL,
+};

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "ffmpeg-browser-cdn-loader",
+  "version": "1.0.0",
+  "description": "Browser-only FFmpeg loader that loads from CDN at runtime",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "prepublishOnly": "echo 'Ready to publish'"
+  },
+  "keywords": [
+    "ffmpeg",
+    "wasm",
+    "browser",
+    "video",
+    "audio"
+  ],
+  "author": "ilovesong.ai",
+  "license": "MIT",
+  "peerDependencies": {},
+  "dependencies": {}
+}