Merge pull request #36 from hughfenghen/feat/doc-site

Feat/doc site

.github/workflows/deploy-demo.yml

@@ -3,7 +3,7 @@ name: Deploy demo to GitHub Pages
 on:
   push:
     branches:
-      - main  # 或者您要触发部署的分支名称
+      - main # 或者您要触发部署的分支名称
 
     # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -17,7 +17,7 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 jobs:
@@ -30,22 +30,25 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 14  # 或者您需要的 Node.js 版本
+          node-version: 14 # 或者您需要的 Node.js 版本
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile
+        working-directory: ./doc-site
 
       - name: Build
-        run: yarn build:demo  # 或者使用 yarn: yarn build
+        run: yarn build
+        working-directory: ./doc-site
 
       - name: Setup Pages
         uses: actions/configure-pages@v3
+        working-directory: ./doc-site
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          # Upload entire repository
-          path: ./demo-dist  # 或者您的构建输出目录
+          path: ./dist
+        working-directory: ./doc-site
 
       - name: Deploy to GitHub Pages
         id: deployment

.vscode/settings.json

@@ -2,5 +2,8 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "files.trimTrailingWhitespace": true,
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "numso.prettier-standard-vscode"
+  "editor.defaultFormatter": "numso.prettier-standard-vscode",
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

doc-site/.dumirc.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  themeConfig: {
+    name: 'WebAV',
+    logo: false,
+  },
+  ...(process.env.NODE_ENV === 'development' ? {
+    base: '/',
+    publicPath: '/',
+  } : {
+    base: '/WebAV/',
+    publicPath: '/WebAV/',
+  }),
+});

doc-site/.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

doc-site/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+/dist
+.dumi/tmp
+.dumi/tmp-production
+.DS_Store

doc-site/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx commitlint --edit "${1}"

doc-site/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

doc-site/.prettierignore

@@ -0,0 +1,3 @@
+.dumi/tmp
+.dumi/tmp-production
+*.yaml

doc-site/.prettierrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  printWidth: 80,
+  proseWrap: 'never',
+  singleQuote: true,
+  trailingComma: 'all',
+  overrides: [
+    {
+      files: '*.md',
+      options: {
+        proseWrap: 'preserve',
+      },
+    },
+  ],
+};

doc-site/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [email protected]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

doc-site/README.md

@@ -0,0 +1,22 @@
+# WebAV Doc Site
+
+A static site base on [dumi](https://d.umijs.org).
+
+## Development
+
+```bash
+# install dependencies
+$ yarn install
+
+# start dev server
+$ yarn start
+
+# build docs
+$ yarn run build
+```
+
+## TODO
+
+[ ] AVCanvs DOM 位置错误
+[ ] DEMO 兼容性提醒组件
+[ ] Guide 介绍，概念、核心 API，贡献

doc-site/docs/api/av-canvas.md

@@ -0,0 +1,10 @@
+---
+nav:
+  title: API
+  order: 1
+order: 3
+---
+
+# av-canvas
+
+_建设中..._

doc-site/docs/api/av-cliper.md

@@ -0,0 +1,8 @@
+---
+nav: API
+order: 1
+---
+
+# av-cliper
+
+_建设中..._

doc-site/docs/api/av-recorder.md

@@ -0,0 +1,8 @@
+---
+nav: API
+order: 2
+---
+
+# av-recorder
+
+_建设中..._

doc-site/docs/demo/1_1-decode-video.md

@@ -0,0 +1,13 @@
+---
+nav:
+  title: DEMO
+  order: 2
+group:
+  title: 解码
+  order: 1
+order: 1
+---
+
+# 解码视频
+
+<code src="./decode-video.tsx"></code>

doc-site/docs/demo/1_2-decode-audio.md

@@ -0,0 +1,9 @@
+---
+nav: DEMO
+group: 解码
+order: 2
+---
+
+# 解码音频
+
+<code src="./decode-audio.tsx"></code>

doc-site/docs/demo/1_3-decode-image.md

@@ -0,0 +1,9 @@
+---
+nav: DEMO
+group: 解码
+order: 3
+---
+
+# 解码图片
+
+<code src="./decode-image.tsx"></code>

doc-site/docs/demo/2_1-concat-video.md

@@ -0,0 +1,30 @@
+---
+nav: DEMO
+group:
+  title: 合成
+  order: 2
+
+order: 1
+---
+
+# 视频合成
+
+在视频上叠加一个其他素材（图片、文字、视频），可用于在视频中嵌入水印，或合成两个视频文件。
+
+**下面是一个视频添加水印的示例**  
+原理是在视频上方绘制一张图片（水印），然后给图片设置动画。  
+`renderTxt2ImgBitmap` 将水印文字转换成图片，是因为 css 能轻松实现复杂的文字样式效果。
+
+<code src="./watermark.tsx"></code>
+
+:::warning
+`renderTxt2ImgBitmap` 依赖 DOM，所以不能在 WebWorker 中使用。
+:::
+
+如果你想在视频中绘制普通图片，可参考以下方式创建 `ImgClip` 实例，再添加到 `Combinator`
+
+```js
+new ImgClip(await createImageBitmap(await (await fetch('<img url>')).blob()));
+```
+
+如果你想在视频上方再叠加另一个视频，参考 DEMO：“绿幕抠图 - 视频背景”

doc-site/docs/demo/2_2-video-add-audio.md

@@ -0,0 +1,99 @@
+---
+nav: DEMO
+group:
+  title: 合成
+
+order: 2
+---
+
+# 视频配音
+
+```tsx
+import {
+  AudioClip,
+  Combinator,
+  MP4Clip,
+  OffscreenSprite,
+} from '@webav/av-cliper';
+import React, { useState } from 'react';
+import { CombinatorPlay } from './combinator-player';
+
+const resList = ['/video/webav1.mp4', '/audio/44.1kHz-2chan.mp3'];
+
+async function start() {
+  const videoSpr = new OffscreenSprite(
+    'videoSpr',
+    new MP4Clip((await fetch(resList[0])).body!),
+  );
+
+  const audioSpr = new OffscreenSprite(
+    'audioSpr',
+    new AudioClip((await fetch(resList[1])).body!, {
+      loop: true,
+    }),
+  );
+  const com = new Combinator({
+    width: 1280,
+    height: 720,
+  });
+  await com.add(videoSpr, { duration: 10, main: true });
+  await com.add(audioSpr);
+  return com;
+}
+
+export default function UI() {
+  const [com, setCom] = useState<null | Combinator>(null);
+  return (
+    <CombinatorPlay
+      list={resList}
+      onStart={async () => setCom(await start())}
+      com={com}
+    ></CombinatorPlay>
+  );
+}
+```
+
+:::warning
+`AudioClip` 内部使用了 `AudioContext` 解码音频文件，所以无法在 WebWorker 中工作。
+:::
+
+**动图配音生成视频**
+
+```tsx
+import {
+  AudioClip,
+  Combinator,
+  ImgClip,
+  OffscreenSprite,
+} from '@webav/av-cliper';
+import React, { useState } from 'react';
+import { CombinatorPlay } from './combinator-player';
+
+const resList = ['/img/animated.gif', '/audio/44.1kHz-2chan.m4a'];
+
+async function start() {
+  const gifSpr = new OffscreenSprite(
+    'gifSpr',
+    new ImgClip({ type: 'image/gif', stream: (await fetch(resList[0])).body! }),
+  );
+  const audioSpr = new OffscreenSprite(
+    's2',
+    new AudioClip((await fetch(resList[1])).body!),
+  );
+  const com = new Combinator({ width: 1280, height: 720 });
+  await com.add(gifSpr, { duration: 10, offset: 0 });
+  await com.add(audioSpr, { duration: 10, offset: 0 });
+  return com;
+}
+
+export default function UI() {
+  const [com, setCom] = useState<null | Combinator>(null);
+  return (
+    <CombinatorPlay
+      list={resList}
+      onStart={async () => setCom(await start())}
+      com={com}
+    ></CombinatorPlay>
+  );
+}
+```