# @azzapp/react-native-skia-video 中文文档
规范地址：https://npmcn.com/package/%40azzapp/react-native-skia-video/
版本：0\.10\.1
npm 元数据更新时间：2026-08-04T21:45:45.717Z
中文译文更新时间：2026-11-07T13:52:02.498Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40azzapp/react-native-skia-video
原文对照：https://npmcn.com/package/%40azzapp/react-native-skia-video/?lang=original
项目主页：https://github.com/AzzappApp/react-native-skia-video.git#readme
源码仓库：https://github.com/AzzappApp/react-native-skia-video
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：408 kB，121 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@shopify/react-native-skia \>= 2\.0\.0，react \*，react-native \*，react-native-reanimated \>= 4\.0\.0，react-native-worklets \>= 0\.10\.0
- 首次发布：2024-05-20T12:47:39.190Z
- 最新版本发布：2026-08-04T21:45:45.515Z
- 近 30 天下载量：49511（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：30（近 12 个月 3 个）
## 中文简介
对反应的视频支持- native-skia
## 安装
```sh
npm install @azzapp/react-native-skia-video
```
也可以使用：`pnpm add @azzapp/react-native-skia-video`、`yarn add @azzapp/react-native-skia-video`、`bun add @azzapp/react-native-skia-video`
## README
# 反应原生 Skia 视频
视频编码/解码支持 [反应原生 Skia](https://github.com/Shopify/react-native-skia)
> 这个库仍然处于非常不稳定的状态
## 安装
```sh
npm install @azzapp/react-native-skia-video
```
## 使用量
### 视频显示器
这个 `useVideoPlayer` 是视频播放器组件上下文中使用的自定义回放钩. 这种钩子封装了游戏,挖掘,控制视频回放的逻辑. 它返回一个 [重新动画](https://docs.swmansion.com/react-native-reanimated/) 共享值,该值持有当前播放视频的框架.
```js
import { Canvas, Image, Skia } from '@shopify/react-native-skia';
import { useVideoPlayer } from '@azzapp/react-native-skia-video';
const MyVideoPlayer = ({ uri, width, height }) =>{
const { currentFrame } = useVideoPlayer({ uri })
const videoImage = useDerivedValue(() => {
const frame = currentFrame.value;
if (!frame) {
return null;
}
return Skia.Image.MakeImageFromNativeTextureUnstable(
frame.texture,
frame.width,
frame.height
);
});
return (
);
}
```
### 视频组合
这个库提供了一个从其他视频中通过堆肥框架创建的视频的预览和导出机制,使用React Industrial Skia required API.
要预览一个构成,请使用 `useVideoCompositionPlayer` 钩:
```js
import { Canvas, Picture, Skia } from '@shopify/react-native-skia';
import { useVideoCompositionPlayer } from '@azzapp/react-native-skia-video'
const videoComposition = {
duration: 10,
items: [{
id: 'video1',
path: '/local/path/to/video.mp4',
compositionStartTime: 0,
startTime: 0,
duration: 5
}, {
id: 'video2',
path: '/local/path/to/video2.mp4',
compositionStartTime: 5,
startTime: 5,
duration: 5
}]
}
const drawFrame: FrameDrawer = ({
videoComposition,
canvas,
currentTime,
frames,
height,
width,
}) => {
'worklet';
const frame = frames[currentTime < 5 ? 'video1' : 'video2'];
const image = Skia.Image.MakeImageFromNativeTextureUnstable(
frame.texture,
width,
height,
);
const paint = Skia.Paint();
canvas.drawImage(image, 0, 0, paint)
}
const MyVideoCompositionPlayer = ({ width, height }) =>{
const { currentFrame } = useVideoCompositionPlayer({
composition: videoComposition,
autoPlay: true,
drawFrame,
width,
height,
});
return (
);
}
```
要导出成分,请使用 `exportVideoComposition` 函数 :
```js
import { exportVideoComposition } from '@azzapp/react-native-skia-video'
exportVideoComposition({
videoComposition,
drawFrame,
outPath: '/path/to/output',
bitRate: 3500000,
frameRate: 60,
width: 1920,
height: 1080,
}).then(() => {
console.log('Video exported successfully!')
})
```
#### 音频
视频项目默认为无声. 要播放视频项目的音频音轨 (在播放和输出期间)设定其 `audio` 选项 :
```js
const videoComposition = {
duration: 10,
items: [
{
id: 'video1',
path: 'path/to/video.mp4',
compositionStartTime: 0,
startTime: 0,
duration: 10,
// plays the audio track of video.mp4, in sync with its frames
audio: { volume: 0.8 }, // or simply `audio: true`
},
// additional audio (music, voice over...) can be added with an audio
// item; the source can be an audio file or the audio track of any
// video file
{
id: 'music',
kind: 'audio',
path: 'path/to/music.mp3',
compositionStartTime: 0,
startTime: 12,
duration: 10,
volume: 0.3,
},
],
};
```
音频项目从未出现在 `frames` 传送到 `drawFrame`。 。 。 . 重叠的音频是混合在一起的。 回放时, 音频在 与组成同步; 在导出时将其编码为( AAC) 输出 文档。 导出音频可以通过 `audioBitRate` (默认 128kbps), `audioSampleRate` (违约44100Hz)和 `audioChannelCount` (默认 2) 导出选项 .
### 视频能力(仅限Android)
在Android上,您可能需要检查您的设备的视频能力 然后再输出视频。 这个库为此提供2 android的特定功能:
#### 获得解析能力For( MIME 类型: 字符串)
此函数将返回给定的 MIME 类型的设备的解码能力( 大部分时间您应该检查 ) `video/avc`) (中文(简体) ).
#### 获得Valid Encoder 配置( 宽: 数, 高: 数, 帧: 数, 位: 数)
此函数将返回关于您设备编码能力的有效配置列表, 并带有相应的编码器 . 如果不支持所提供的参数,返回的配置将会被有效参数所覆盖(通过降低、分辨率、帧率或比特率),同时保持相同的宽比.
## 捐款
见 [贡献指南](https://npmcn.com/package/%40azzapp/react-native-skia-video/CONTRIBUTING.md) 学习如何为储存库和发展工作流程作出贡献.
## 许可证
麻省理工学院
* * *
制造的 [创建- 反应- 本土- 图书馆](https://github.com/callstack/react-native-builder-bob)
## 常见问题
### @azzapp/react-native-skia-video 是什么？
对反应的视频支持- native-skia
### 如何安装 @azzapp/react-native-skia-video？
在项目目录运行 npm install @azzapp/react-native-skia-video，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@shopify/react-native-skia（\>= 2\.0\.0）、react（\*）、react-native（\*）、react-native-reanimated（\>= 4\.0\.0）、react-native-worklets（\>= 0\.10\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @azzapp/react-native-skia-video 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @azzapp/react-native-skia-video 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @azzapp/react-native-skia-video 可以商用吗？
@azzapp/react-native-skia-video 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @azzapp/react-native-skia-video 的下载量有多少？
根据 npm 官方下载统计，@azzapp/react-native-skia-video 在 2026/10/08 – 2026/11/06 这 30 天内被下载 49,511 次，日均约 1,650 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @azzapp/react-native-skia-video 还在维护吗？
最新版本 0\.10\.1 发布于 2026/08/05（3 个月前）；至今共发布 30 个版本，其中过去 12 个月发布了 3 个；首次发布于 2024/05/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。