Video playing speed is not matching with Audio ,Video is behind compare to ongoing audio progress.

[kdpadhiyar]

I am using "@shopify/react-native-skia": "^1.10.2" ,i am developing feature like instagram where i have to do editing with video also same as Image have,
But when i play any video with skia using frames its so behind from actual playing speed ,audio being played naturally but video dose not match with it.
My source is below I do not know what is wrong with it.
playbackspeed is no more exist then what to do not getting.

I am using this first time

import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { View, StyleSheet, PixelRatio, Dimensions } from 'react-native';
import { Canvas, Image as SkiaImage, useImage, ColorMatrix, Path, useCanvasRef, useVideo } from '@shopify/react-native-skia';
import { ScreenHeight, ScreenWidth } from '../utils/Constants/dimensionUtils';
import EditImages from './EditImage';
import StickerItem from './StickerHandler/StickerItem';
import { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';

const { width, height } = Dimensions.get('screen');

interface CanvasEditorProps {
  backgroundImage: string | null;
  selectedFilter: number[];
  images: { uri: string; stickers?: { uri: string }[]; additionalImages?: any[] };
  itemDragging: (value: boolean) => boolean;
  isDeletable: (id: number, type: string, value: boolean) => boolean;
  capture: (data: any) => void;
  type: string;
}

interface IPath {
  segments: string[];
  color?: string;
  isComplete?: boolean;
}

export interface CanvasEditorHandle {
  handleCapture: () => Promise<void>;
}

const CanvasEditor = forwardRef<CanvasEditorHandle, CanvasEditorProps>(
  ({ backgroundImage, itemDragging, isDeletable, selectedFilter, images, capture, type }, ref) => {
    const [paths, setPaths] = useState<IPath[]>([]);
    const image = useImage(backgroundImage);
    
    const paused = useSharedValue(false);
    const seek = useSharedValue(1);
    const looping = useSharedValue(true);
    const volume = useSharedValue(1);
    const volume = useSharedValue(1);
    
    const { currentFrame, size } = useVideo(backgroundImage, {
      paused,
      seek,
      looping,
      volume,
    },
  );

    const canvasRef = useCanvasRef();
    const pixelRatio = PixelRatio.get();

    useEffect(() => {
      if (!backgroundImage) {
        setPaths([]);
      }
    }, [backgroundImage]);

    useEffect(() => {
      if (backgroundImage) {
        paused.value = false;
        seek.value = withTiming(0, { duration: 300 });
      }
    }, [backgroundImage]);

    const handleCapture = async () => {
      if (canvasRef?.current) {
        const imageSnapshot = await canvasRef.current.makeImageSnapshot();
        capture(imageSnapshot);
      }
    };

    useImperativeHandle(ref, () => ({ handleCapture }));

    return (
      <View style={styles.canvasContainer}>
        <Canvas ref={canvasRef} key={backgroundImage || 'empty'} style={{ width: ScreenWidth, height: ScreenHeight + 110 }}>
          {backgroundImage && image && (
            <SkiaImage x={0} y={0} width={ScreenWidth} height={ScreenHeight} image={image} fit={'contain'}>
              {paths.map((p, index) => (
                <Path key={index} path={p.segments.join(' ')} strokeWidth={5} style="stroke" color={p.color} />
              ))}
              {images?.matrix?.length > 0 && <ColorMatrix matrix={images.matrix} />}
            </SkiaImage>
          )}
        </Canvas>
        {backgroundImage && currentFrame && (
          <Canvas style={StyleSheet.absoluteFill}>
            <SkiaImage image={currentFrame} x={0} y={0} width={ScreenWidth} height={ScreenHeight} fit="cover" />
          </Canvas>
        )}
        <EditImages matrix={images?.matrix} imagesFiles={images?.additionalImages} itemDragging={itemDragging} isDeletable={isDeletable} />
      </View>
    );
  }
);

const styles = StyleSheet.create({
  canvasContainer: {
    width: '100%',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default CanvasEditor;

[wcandillon]

here we really recommend using react-native-skia-video instead, it will do wonders