[iOS] Error: Error Domain=AVFoundationErrorDomain Code=-11832 "Cannot Open" UserInfo={NSLocalizedFailureReason=This media cannot be used., NSLocalizedDescription=Cannot Open, NSUnderlyingError=0x600000ddeaf0 {Error Domain=NSOSStatusErrorDomain Code=-12431 "(null)"}}

[tacianoscur]

Describe the bug
Getting this error when creating thumbnail for remote MP4 video on iOS, only happens for some videos:

[Error: Error Domain=AVFoundationErrorDomain Code=-11832 "Cannot Open" UserInfo={NSLocalizedFailureReason=This media cannot be used., NSLocalizedDescription=Cannot Open, NSUnderlyingError=0x600000ddeaf0 {Error Domain=NSOSStatusErrorDomain Code=-12431 "(null)"}}]

To Reproduce
Steps to reproduce the behavior:

1. Call createThumbnail with a remote url for an mp4 video (I can send you the url if needed)

Version
react native 0.72.11
react-native-create-thumbnail ^2.0.0

Expected Results
Should create the thumbnail like with all the other videos.

Snack, code example, screenshot, or link to a repository

import { createThumbnail } from 'react-native-create-thumbnail';
const createdThumbnail = await createThumbnail({
      url: video.url,
});

[LianVyv]

@tacianoscur I believe you missing a timestamp

const createdThumbnail = await createThumbnail({
      url: video.url,
      timeStamp: 0, // capture the thumbnail at the beginning of the video
});

[oneeb-asad]

I'm also facing this issue have you find any solution for this?

P.S: adding timestamp didn't resolved my problem

[tacianoscur]

@LianVyv I have added many timestamps but same error every time.

[Satyajeetsinh-9]

Hello ,
i am facing same issue on IOS with mp4 file plus adding timestamp also did not resolve this.

So anyone with any solution?

[tacianoscur]

@souvik-ghosh any idea when you pretend to tackle this?

[Satyajeetsinh-9]

FYI : in my case I'm not receiving Accept-Ranges in a header from the server, which is generally required for IOS. Because when tried with a different server in API It started working.

[ngunarola]

const createVideoThumbnail = () => {
createThumbnail({
url: '',
timeStamp:100,
format:'png'
})
.then(response => console.log({ response }))
.catch(err => console.log({ err }));
}

I have tried timeStamp:100. It worked for me !!

[usmansalimLM]

const createVideoThumbnail = () => { createThumbnail({ url: '', timeStamp:100, format:'png' }) .then(response => console.log({ response })) .catch(err => console.log({ err })); }

I have tried timeStamp:100. It worked for me !!

Worked for me, eariler this actually used to work when i had the timestamp set to 10000, idk what went wrong afterwards,
changing it to 100 fixed it.
Here are my versions for reference

    "react": "18.2.0",
    "react-native": "0.71.1",
    "react-native-create-thumbnail": "2.0.0"

[bradydowling]

Bummer, this seems like it would be a majority of cases for us (I'd guess the same is true for others). Has anyone found a good workaround?

I wonder if expo-video-thumbnails works well or if uploading and then running this on the remote file would work.

[hipolitotata]

I solved the problem in iOS doing it:

const uri = Platform.select({
  ios: result?.assets[0]?.uri.replace('file://', ''),
  android: result?.assets[0]?.uri,
});

const thumbanail = await createThumbnail({
  url: uri,
  timeStamp: 100,
});

[jesus-lopez-complexity]

I was recently testing and think this could be due to the video name containing unusual characters. In my case, the name of the video I was trying to upload included emojis, so I renamed the file and the problem was resolved.

[pleerock]

1. make sure file exists by a given path
2. make sure it's a supported video format
3. make sure file isn't corrupted
4. make sure file doesn't contain redundant things in paths, e.g.:

const path = `file:///Users/pleerock/Library/Developer/CoreSimulator/Devices/04ADD4F8-E3B5-43A1-B49F-FDDDDA27BA8D/data/Media/DCIM/100APPLE/IMG_0068.MP4#YnBsaXN0MDDRAQJfEBtSZWNvbW1lbmRlZEZvckltbWVyc2l2ZU1vZGUQAAgLKQAAAAAAAAEBAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAr`
const normalizedPath = file.url.replace("file://", "").replace(/#.*$/, "")
const thumbnail = await createThumbnail({ url: normalizedPath });

You'll notice libraries returning you file paths might apply extra "#..." to your file path.

UPDATE:

Also I noticed it doesn't support escaped names, like this: Discussion%20April%2026.mp4.
So you should use decodeURI before passing file path to createThumbnail.