反应原生 Skia 视频

视频编码/解码支持 反应原生 Skia

这个库仍然处于非常不稳定的状态

安装

npm install @azzapp/react-native-skia-video

使用量

视频显示器

这个 useVideoPlayer 是视频播放器组件上下文中使用的自定义回放钩. 这种钩子封装了游戏,挖掘,控制视频回放的逻辑. 它返回一个 重新动画 共享值,该值持有当前播放视频的框架.

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 (
    <Canvas style={{ width, height }}>
      <Image image={videoImage} width={width} height={height}  />
    </Canvas>
  );
}

视频组合

这个库提供了一个从其他视频中通过堆肥框架创建的视频的预览和导出机制,使用React Industrial Skia required API.

要预览一个构成,请使用 useVideoCompositionPlayer 钩:

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 (
    <Canvas style={{ width, height }}>
      <Image image={currentFrame} x={0} y={0} width={width} height={height} />
    </Canvas>
  );
}

要导出成分,请使用 exportVideoComposition 函数 :

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 选项 :

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 配置( 宽: 数, 高: 数, 帧: 数, 位: 数)

此函数将返回关于您设备编码能力的有效配置列表, 并带有相应的编码器 . 如果不支持所提供的参数,返回的配置将会被有效参数所覆盖(通过降低、分辨率、帧率或比特率),同时保持相同的宽比.

捐款

见 贡献指南 学习如何为储存库和发展工作流程作出贡献.

许可证

麻省理工学院

制造的 创建- 反应- 本土- 图书馆