[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_163":164,"_165":166},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_19":20,"_17":18,"_124":-5,"_21":125,"_23":126,"_127":128,"_129":130,"_27":131,"_25":132,"_133":-5,"_134":-5,"_135":43,"_136":137,"_138":73,"_139":-5,"_140":-5,"_141":142},"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":-5,"_30":-5,"_31":-5,"_32":-5,"_33":-5},"handle","jamiedubs","name","mediainfo","branchName","main","version",14,"path","main.tsx","project",{"_34":69,"_13":14,"_44":70,"_71":-5,"_72":73,"_74":75,"_76":75,"_77":-5,"_78":-5,"_79":80,"_81":37,"_82":73,"_83":-5,"_84":-5,"_85":63,"_86":87,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":93,"_94":93,"_95":96,"_97":96,"_98":96,"_99":93,"_100":93,"_101":102,"_103":104,"_105":106,"_107":43},"tree",[54,55],"file",{"_34":35,"_13":20,"_36":37,"_38":-5,"_39":40,"_41":18,"_42":43,"_44":45,"_17":46,"_47":48,"_49":50,"_51":43,"_52":14,"_19":53},"contents",[],"upstream","pull","ahead","behind","envVars","id","d87a962c-26db-11f0-a5b3-569c3dd06744","fileId","d82fe276-26db-11f0-a5b3-569c3dd06744","parentId","branchId","d82d568c-26db-11f0-a5b3-569c3dd06744","branchVersion","latest",false,"createdAt",["D",1745352518726],13,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport mediaInfoFactory from \"https://esm.sh/mediainfo.js@0.2.1\";\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface AppProps {\n initialUrl?: string;\n serverUrl: string;\n}\n\ntype MediaInfoResult = {\n media: {\n track: Array<{\n \"@type\": string;\n [key: string]: unknown;\n }>;\n };\n};\n\ninterface MediaSummary {\n fileSize?: string;\n duration?: string;\n width?: number;\n height?: number;\n codecs: string[];\n bitRate?: string;\n frameRate?: string;\n}\n\nfunction App({ initialUrl, serverUrl }: AppProps) {\n // Bob Dylan mp3 found in an open directory\n const placeholderUrl =\n \"http://www.ashleecadell.com/xyzstorelibrary/Bob%20Dylan/The%20Essential%20Bob%20Dylan%20Disc%201/18%20-%20Lay,%20Lady,%20Lay.mp3\";\n const sourceCodeUrl = import.meta.url.replace(\"esm.town\", \"val.town\");\n\n return (\n \n \n \n \n Media Info API\n \n \n \n

Media Info API

\n {\n e.preventDefault();\n const url = urlInput.value;\n if (!url) return;\n\n // Redirect to the ?url= version\n window.location.href = '?url=' + encodeURIComponent(url);\n });\n\n // Update curl example\n const updateCurlExample = () => {\n const url = urlInput.value;\n curlExample.textContent = \\`curl '${serverUrl}?url=\\${encodeURIComponent(url)}'\\`;\n };\n\n urlInput.addEventListener('input', updateCurlExample);\n updateCurlExample();\n `,\n }}\n />\n \n \n );\n}\n\nfunction summarizeMediaInfo(mediaInfo: MediaInfoResult): MediaSummary {\n const summary: MediaSummary = {\n codecs: [],\n };\n\n for (const track of mediaInfo.media.track) {\n switch (track[\"@type\"]) {\n case \"General\":\n summary.fileSize = track.FileSize as string;\n summary.duration = track.Duration as string;\n summary.bitRate = track.OverallBitRate as string;\n break;\n case \"Video\":\n summary.width = track.Width as number;\n summary.height = track.Height as number;\n summary.frameRate = track.FrameRate as string;\n if (track.Format) summary.codecs.push(track.Format as string);\n break;\n case \"Audio\":\n if (track.Format) summary.codecs.push(track.Format as string);\n break;\n }\n }\n\n return summary;\n}\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n const mediaUrl = url.searchParams.get(\"url\");\n const serverUrl = request.url;\n\n if (!mediaUrl) {\n return new Response(renderToString(), {\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n\n try {\n const mediaResponse = await fetch(mediaUrl);\n\n if (!mediaResponse.ok) {\n throw new Error(`Could not fetch media file: ${mediaResponse.status}`);\n }\n\n const fileSize = Number(mediaResponse.headers.get(\"Content-Length\") || 0);\n const reader = mediaResponse.body?.getReader();\n\n if (!reader) {\n throw new Error(\"Could not read media file\");\n }\n\n const chunks: Uint8Array[] = [];\n let receivedLength = 0;\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n if (value) {\n chunks.push(value);\n receivedLength += value.length;\n }\n }\n\n const combinedChunks = new Uint8Array(receivedLength);\n let position = 0;\n for (const chunk of chunks) {\n combinedChunks.set(chunk, position);\n position += chunk.length;\n }\n\n const mediaInfo = await mediaInfoFactory({\n locateFile: () => \"https://unpkg.com/mediainfo.js@0.2.1/dist/MediaInfoModule.wasm\",\n format: \"JSON\",\n coverData: true,\n });\n\n const result = await mediaInfo.analyzeData(\n () => fileSize,\n async (size: number, offset: number) => combinedChunks.slice(offset, offset + size),\n );\n\n mediaInfo.close();\n\n const parsedResult = JSON.parse(result) as MediaInfoResult;\n const summary = summarizeMediaInfo(parsedResult);\n\n // Return JSON with both full result and summary\n return new Response(\n JSON.stringify(\n {\n summary,\n fullInfo: parsedResult,\n },\n null,\n 2,\n ),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n const errorMessage = error instanceof Error ? error.message : \"Unknown error\";\n const errorStack = error instanceof Error ? error.stack : undefined;\n\n return new Response(JSON.stringify({ error: errorMessage, stack: errorStack }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n}","deleted","label",[20],{"_34":60,"_13":61,"_36":62,"_38":-5,"_39":40,"_41":63,"_42":43,"_44":64,"_17":65,"_47":25,"_49":66,"_51":43,"_52":-5,"_57":67,"_19":68},{"_34":35,"_13":20,"_36":37,"_38":-5,"_39":40,"_41":18,"_42":43,"_44":56,"_17":46,"_47":48,"_49":50,"_51":43,"_52":14,"_57":58,"_19":59},["D",1745352518726],"children",[],[20],"d82fe992-26db-11f0-a5b3-569c3dd06744","README.md","d82fea1e-26db-11f0-a5b3-569c3dd06744",1,["D",1736531937636],0,"Fetches details about media files (images, video, audio, etc) using [Mediainfo.js](https://mediainfo.js.org/). e.g. codecs used, duration, file sizes, ID3 tags, etc. Check out https://jamiedubs-mediainfo.web.val.run/ for a little interactive example\n\nBeta! API response not 100% stable, I might move things around still. Especially this `summary` field idea",[],[61],"d82d0902-26db-11f0-a5b3-569c3dd06744",["D",1746138611498],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","userId","28a12253-d65d-490e-97f1-5c00c30f3c90","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","de23cbae-f041-436a-b718-67f3be167b4d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_123":119},"org",{"_11":12,"_117":-5,"_118":119,"_79":80,"_120":121,"_122":43},"branch",{"_17":108,"_13":16,"_34":40,"_109":69,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":14,"_116":12},"isOwned",16,"projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://avatars.githubusercontent.com/u/1903?v=4","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":69,"_13":14,"_44":159,"_71":-5,"_72":73,"_74":75,"_76":75,"_77":-5,"_78":-5,"_79":80,"_81":37,"_82":73,"_83":-5,"_84":-5,"_85":63,"_86":87,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":93,"_94":93,"_95":96,"_97":96,"_98":96,"_99":93,"_100":93,"_101":160,"_103":161,"_105":162,"_107":43},[153,154],"files",[153,154],"counts",{"_144":65,"_145":63,"_146":63,"_33":147,"_148":149},[],{"_34":35,"_13":20,"_36":37,"_38":-5,"_39":40,"_41":18,"_42":43,"_44":45,"_17":46,"_47":48,"_49":50,"_51":43,"_52":14,"_19":143},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[20],"pulls","branches","forks",{"_150":65,"_152":65},"connections",{"_150":65,"_151":65},"count","unfilledCount","emptyCount",{"_34":60,"_13":61,"_36":62,"_38":-5,"_39":40,"_41":63,"_42":43,"_44":64,"_17":65,"_47":25,"_49":66,"_51":43,"_52":-5,"_57":157,"_19":158},{"_34":35,"_13":20,"_36":37,"_38":-5,"_39":40,"_41":18,"_42":43,"_44":56,"_17":46,"_47":48,"_49":50,"_51":43,"_52":14,"_57":155,"_19":156},[],[20],[],[61],["D",1746138611498],{"_11":12,"_123":119},{"_11":12,"_117":-5,"_118":119,"_79":80,"_120":121,"_122":43},{"_17":108,"_13":16,"_34":40,"_109":69,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":14,"_116":12},"ctx",{"_101":-5,"_140":196,"_197":198,"_199":200,"_201":43,"_202":43,"_203":43,"_204":73,"_205":-5,"_206":-7,"_207":-7,"_208":65,"_209":43,"_210":43,"_211":-5,"_212":43,"_213":43,"_214":43,"_215":-5},"ENV",{"_167":168,"_169":170,"_171":16,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Media Info API

Curl Example: