Search code examples
reactjsreact-reduxvideo-processingvimeo-apivideo-thumbnails

I wanted a Thumbnail for my video when uploading using vimeo API-3.4


I am using the steps given in API doc for creating a thumbnail. I call the createthumbnail function when my video is uploaded successfully, I am getting success response but the image is default image and not from my uploaded video. Below is my code snippet

export const createVideoThumbnails = (videoId, videoToModuleParams) => async (
  dispatch
) => {
 
  const body = JSON.stringify({
    time: 3,
    active: true,
  });
  const config = {
    headers: {
      Authorization: 'bearer thisismyauthtoken',
      'Content-Type': 'application/json',
      Accept: 'application/vnd.vimeo.*+json;version=3.4',
    },
  };

  try {
    const response = await axios.post(
      `https://api.vimeo.com/videos/${videoId}/pictures`,
      body,
      config
    );
    if (response.status === 201) {
      console.log(response.data)
    }
  } catch (error) {
    console.log(error);
  }
};

I also tried fetching the image using video id but again if i fetch instantly it results in default image but if i fetch after few 30-50 sec, it give me correct thumbnail. The question is how much time should i wait because if uploading video is long it can take much time. Is their any call backs or another method.

I am using REACT and REDUX. Please help


Solution

  • If you're making that request immediately after upload has completed, then the thumbnail likely hasn't been created yet, so it's not returned in the API response. You'll need to periodically check the transcode status (make a request to get the video's metadata) and once the API returns transcode.status=ready, the thumbnail should also be ready.

    https://vimeo.zendesk.com/hc/en-us/articles/360042877971-Getting-video-transcode-status-from-the-API

    https://developer.vimeo.com/api/reference/videos#get_video