maitrungduc1410 / react-native-video-trim

Video trimmer for React Native App
MIT License
37 stars 14 forks source link

The audio in the output video lags behind the video #31

Closed ahmadhannan-ammag closed 2 weeks ago

ahmadhannan-ammag commented 3 months ago

Trimmed video; the audio in the output video lags behind the video. I've checked multiple video files with subtitles.

here is my code

// Online Javascript Editor for free // Write, Edit and Run your Javascript code using JS Online Compiler

useEffect(() => { const eventEmitter = new NativeEventEmitter(NativeModules.VideoTrim); const subscription = eventEmitter.addListener('VideoTrim', event => { switch (event.name) { case 'onShow': {

      break;
    }
    case 'onHide': {
      break;
    }
    case 'onStartTrimming': {
      break;
    }
    case 'onFinishTrimming': {
        updatePostAftertrimREEL(event.outputPath);
        break;
    }
    case 'onCancelTrimming': {
      setisReel(null);
      deleteFiles(reelDimension.current.path)
      break;
    }
    case 'onError': {
      setisReel(null);
      console.log('onError', event);
      deleteFiles(reelDimension.current.path)
      break;
    }
  }
});

return () => {
  subscription.remove();
};

}, [postImages]);

// showing editor showEditor(${path}, { maxDuration: 200, trimmingText: 'Processing video...', saveToPhoto: false, });

https://github.com/maitrungduc1410/react-native-video-trim/assets/106084516/0161748f-8f91-4709-be47-faba5b033ea2

https://github.com/maitrungduc1410/react-native-video-trim/assets/106084516/b6d7a827-86c6-430d-8503-fb5385d766e6

maitrungduc1410 commented 3 months ago

Hi, can you provide your input video, I'll try to reproduce from my end

And which platform (iOS or Android) you're facing the issue?

ahmadhannan-ammag commented 3 months ago

I'm facing issue in both platforms (android and ios)

input video :

https://github.com/maitrungduc1410/react-native-video-trim/assets/106084516/b4ff87d0-bfd0-4c4e-bf73-567df449fc2d

ahmadhannan-ammag commented 3 months ago

@maitrungduc1410 I am also facing same issue in timmer preview on ios , here is my video

https://we.tl/t-o5FMRVwGyB

ahmadhannan-ammag commented 3 months ago

Google drive link

https://drive.google.com/file/d/1nRR1d5mtNQKCvxnzmbfE50RkmhUHmQ9b/view?usp=sharing

maitrungduc1410 commented 3 months ago

@ahmadhannan-ammag I'm still checking on this, give me some more time

maitrungduc1410 commented 2 months ago

hi @ahmadhannan-ammag I tried with your input video, but can't reproduce, it's working really fine.

You can take a look at my native code:

let cmd = "-i \(inputFile) -ss \(startTime * 1000)ms -to \(endTime * 1000)ms -c copy \(outputFile)";

What it does is simply copy the stream in input file to output file without changing anything

Please try again, maybe you can try on other machine to see

ahmadhannan-ammag commented 2 months ago

@maitrungduc1410 I have checked on both (android & IOS), The Android issue is resolved, but in iOS voice is distorted at first and the video lags behind the audio (in some videos). I am attaching my videos here.

Google Drive Link : https://drive.google.com/drive/folders/17E_H-OHCskbowcAb22kFLYlSelGtdlWY?usp=drive_link

maitrungduc1410 commented 2 months ago

Can u show me exact code you're using?

And on which device+ ios version are you using?

ahmadhannan-ammag commented 2 months ago

@maitrungduc1410 i have checked on iphone X, Version 16.1

  useEffect(() => {
    const eventEmitter = new NativeEventEmitter(NativeModules.VideoTrim);
    const subscription = eventEmitter.addListener('VideoTrim', event => {
      switch (event.name) {
        case 'onShow': {
          break;
        }
        case 'onHide': {
          break;
        }
        case 'onStartTrimming': {
          break;
        }
        case 'onFinishTrimming': {

            setPost(event.outputPath);

            break;
          }

        case 'onCancelTrimming': {

          break;
        }
        case 'onError': {

          break;
        }
      }
    });

    return () => {
      subscription.remove();
    };
  }, [postImages]);

      showEditor(`${path}`, {
          maxDuration: 90,
          trimmingText: 'Processing video...',
          saveToPhoto: false,
        });
ahmadhannan-ammag commented 2 months ago

here are my trimmed video results

https://drive.google.com/drive/folders/1p47YUPHWMYIwKKTDiHjYmI85LUT_WDeH?usp=sharing

original videos before trim

https://drive.google.com/drive/folders/17E_H-OHCskbowcAb22kFLYlSelGtdlWY?usp=drive_link

maitrungduc1410 commented 2 months ago

I'll check it, in the mean time, please try on other devices to confirm the issue

ahmadhannan-ammag commented 2 months ago

Okay, I'll.

ahmadhannan-ammag commented 2 months ago

@maitrungduc1410 I'v checked on 13 pro version 17.1.2 , facing same issue , video trimmed result here

https://drive.google.com/drive/folders/1ECrH9x_EF8uifa4U7mNZRCux3d81XH2N?usp=sharing

ahmadhannan-ammag commented 2 months ago

on moving video forward or backward by the seek bar, the video in the trimmer preview also lags,

check the same video https://drive.google.com/file/d/1GkJnzGMyODU12Jq81KDA5kO4mIR0-NQT/view?usp=sharing

lags in the preview corrected on moving the trimmer fork

maitrungduc1410 commented 1 month ago

Hi @ahmadhannan-ammag , I have checked both of your original files, use same code as yours, no issue at all. You should try saveToPhoto=true to see the result.

Maybe the process of uploading the file to your server has some problem. Can you try on other ios devices?

ahmadhannan-ammag commented 1 month ago

Ok, I'm checking

ahmadhannan-ammag commented 2 weeks ago

issue resolved, thanks