maitrungduc1410 / react-native-video-trim

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

[IOS] What should be the correct video path format? #35

Closed anonymousDog12 closed 3 months ago

anonymousDog12 commented 3 months ago

I am currently testing on my IOS iPhone 15 Pro Max simulator, but isValidVideo always returns false right now. Could you please give me a sample video uri string?

Simulator Screenshot - iPhone 15 Pro Max - 2024-02-10 at 21 48 25

Simulator Screenshot - iPhone 15 Pro Max - 2024-02-10 at 21 48 29

After selecting one of the videos above, nothing gets shown on the screen, and on the terminal, I see:

Log:

 LOG  file:///Users/erin/Library/Developer/CoreSimulator/Devices/F00131DA-539E-49AA-9735-FD367017BAFA/data/Containers/Data/Application/21E80D52-3F65-4649-A9DA-C92193589794/tmp/XqmHjm7K-FD451CCB-4366-4838-8BAB-D13EF5C2164F.mp4
 LOG  Selected file is not a valid video.

Code:

import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, NativeEventEmitter, NativeModules } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';
import { isValidVideo, showEditor } from 'react-native-video-trim';

const App = () => {
  useEffect(() => {
    const eventEmitter = new NativeEventEmitter(NativeModules.VideoTrim);
    const subscription = eventEmitter.addListener('VideoTrim', (event) => {
      console.log('VideoTrim Event:', event);
    });

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

  const handleSelectAndEditVideo = async () => {
    const result = await launchImageLibrary({
      mediaType: 'video',
      assetRepresentationMode: 'current',
    });

    if (result.assets && result.assets.length > 0) {
      const videoUri = result.assets[0].uri;
      console.log(videoUri)
      isValidVideo(videoUri).then((isValid) => {
        if (isValid) {
          showEditor(videoUri, { maxDuration: 20 });
        } else {
          console.log('Selected file is not a valid video.');
        }
      });
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={handleSelectAndEditVideo}
        style={styles.button}
      >
        <Text style={styles.buttonText}>Select and Edit Video</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
  },
});

export default App;
maitrungduc1410 commented 3 months ago

Hi, on iOS you have to try on real device

Pls follow README

anonymousDog12 commented 3 months ago

Thank you very much for the prompt reply! And sorry for missing that. I just tried on a real device and it did work!

Thank you~

(closing this issue now)