Twitch returns .mp4 extension files that are really just jpgs under json response "clip_url"

[sniffingpickles]

I've noticed a lot of clips freezing so I dug a bit more into it:

Notice, thumbnail_url, and clip_url are the same, just with .mp4 after?

edit:

Looks like this is only an issue with newer clips (sub 30 days created) - maybe something in the PHP script it's querying has a new format in the API response from twitch?

edit again: I now see how the clip_url is formed, maybe something changed recently with twitch's URLs and aren't preview- anymore

https://github.com/teklynk/twitch_api_public/blob/main/public/getuserclips.php#L104

            "item": 19,
            "id": "IntelligentClumsyEggBibleThump-QU5b7V00yeF4HyrS",
            "url": "https:\/\/clips.twitch.tv\/IntelligentClumsyEggBibleThump-QU5b7V00yeF4HyrS",
            "embed_url": "https:\/\/clips.twitch.tv\/embed?clip=IntelligentClumsyEggBibleThump-QU5b7V00yeF4HyrS",
            "broadcaster_id": "241373177",
            "broadcaster_name": "outplayedbyjade",
            "creator_id": "79993386",
            "creator_name": "emilair_",
            "video_id": "",
            "game_id": "509672",
            "language": "en",
            "title": "wtf anton",
            "view_count": 1313,
            "created_at": "2024-09-07T20:06:09Z",
            "thumbnail_url": "https:\/\/static-cdn.jtvnw.net\/twitch-clips-thumbnails-prod\/IntelligentClumsyEggBibleThump-QU5b7V00yeF4HyrS\/d6dadaa3-34b6-48fb-86f5-fed38962ee6d\/preview-480x272.jpg",
            "duration": 26.2,
            "vod_offset": null,
            "is_featured": false,
            "clip_url": "https:\/\/static-cdn.jtvnw.net\/twitch-clips-thumbnails-prod\/IntelligentClumsyEggBibleThump-QU5b7V00yeF4HyrS\/d6dadaa3-34b6-48fb-86f5-fed38962ee6d\/preview-480x272.jpg.mp4"
        },

[teklynk]

Well. This is concerning. It seems like Twitch has updated the way clips are stored on thier servers. You used to be able to parse the clip thumbnail url and add .mp4 to it. This no longer works with the new static-cdn.jtvnw.net/twitch-clips-thumbnails-prod/ url's. I researched a bit to see if other devs are having the same issues. I came across this. https://twitch.uservoice.com/forums/310213-developers/suggestions/39228784-extend-clips-api-to-provide-the-mp4-url-so-editors

I will look into a workaround solution. It may be that I code it to skip/ignore clips that have the static-cdn.jtvnw.net/twitch-clips-thumbnails-prod/ url. Older clips that use the clips-media-assets2.twitch.tv url still work. I know this is not ideal, but it should prevent the clips player from breaking.

[teklynk]

I added a workaround until a better solution is available. The clips player now only shows clips that do not contain static-cdn.jtvnw.net/twitch-clips-thumbnails-prod. This will reduce the number of clips that get played but I feel like this is the only solution.

https://github.com/teklynk/twitch_api_public/commit/71ee3336e180c72ecdfd1cff09f55c6c39a84952

[sniffingpickles]

I added a workaround until a better solution is available. The clips player now only shows clips that do not contain static-cdn.jtvnw.net/twitch-clips-thumbnails-prod. This will reduce the number of clips that get played but I feel like this is the only solution.

teklynk/twitch_api_public@71ee333

Thanks for the update, I'll see if I can dig up a workaround as well.

[Lyliya]

I have a project that look a lot like this one that stopped working since last week, looked for alternatives but all of them broke Glad to see I'm not the only one struggling with the new clips update, thanks Twitch

[teklynk]

I was looking at a tool that a streamer friend uses called https://twitchat.fr/ For the shoutouts and clips it uses a browser source but it contains a iframe of the Twitch embed code. It's not pretty since it shows a play button, volume control... but it may be a way to get around not being able to pull the mp4 file. I have been considering a similar solution.

[Lyliya]

I was looking at a tool that a streamer friend uses called https://twitchat.fr/ For the shoutouts and clips it uses a browser source but it contains a iframe of the Twitch embed code. It's not pretty since it shows a play button, volume control... but it may be a way to get around not being able to pull the mp4 file. I have been considering a similar solution.

I was checking the iframe yesterday, but how does one detect the video load / end to queue them ? Twitch provide little to no control for clips I also check to get access to their bucket like before, unfortunately, everything is locked behind authentication tokens, all I got was 401

[teklynk]

I was looking at a tool that a streamer friend uses called https://twitchat.fr/ For the shoutouts and clips it uses a browser source but it contains a iframe of the Twitch embed code. It's not pretty since it shows a play button, volume control... but it may be a way to get around not being able to pull the mp4 file. I have been considering a similar solution.

I was checking the iframe yesterday, but how does one detect the video load / end to queue them ? Twitch provide little to no control for clips I also check to get access to their bucket like before, unfortunately, everything is locked behind authentication tokens, all I got was 401

I am not entirely sure how the iframe solution is done. I do know that there is a clip duration value when getting the clip data from the api. One could start a javascript timer using the clips duration time and then have it switch to the next iframe src (clip) when the duration timer runs out.

I also tried grabbing the mp4 file from the new iframe/embed. It is locked down with graphql tokens that the average user does not have access to. The tokens are not part of the clips api so there is no way to reference a clip to a graphql token to build a url.

[Lyliya]

I manage to get it working using iframe and duration. The Clip API return a duration in second, you can have an iframe like this that load a clip by default

<iframe
  v-if="currentClip"
  :src="currentClip"
  width="100%"
  height="100%"
  allowfullscreen
  :onload="onIframeLoad"
></iframe>

When the iframe is loaded, the onIframeLoad is triggered, inside of it, you can trigger a SetTimeout that match the clip duration, and queue the next clip.

const playNextClip = () => {
  currentIndex.value += 1;
  if (currentIndex.value >= shuffledClips.value.length) currentIndex.value = 0;
  const slug = shuffledClips.value[currentIndex.value].clip_id;
  currentClip.value = `https://clips.twitch.tv/embed?clip=${slug}&parent=${window.location.hostname}&muted=false&autoplay=true`;
};

const onIframeLoad = () => {
  const clipInfo = shuffledClips.value[currentIndex.value];
  setTimeout(() => {
    console.log("The clip has ended playing");
    playNextClip();
  }, clipInfo.duration * 1000);
};

There are a lot of downside, it load the twitch interface by default, and when the clip has ended playing, it will display a grid of related clips Also, the iframe load can occur before the clip load, leading to 1-2 seconds desync. Not ideal, but it work 🤷‍♂️

[sniffingpickles]

Hmm, it appears they're updating/breaking old clips or similar. I'm having clips fail to play, but I am unable to diagnose the issue due to randomness and hosting clip player on 100+ servers.