Videos hosted on worker sites not playing on iOS

🐛 Bug Report

Environment

• operating system: mac os
• output of rustc -V: rustc 1.26.2
• output of node -v: v10.16.3
• output of wrangler -V: 👷 ✨ wrangler 1.6.0

Steps to reproduce

I created a worker site with wrangler generate --site test-mp4 and replaced the wrangler ferris image with a looping mp4.

The looping mp4 plays correctly on all devices except for iOS. I think this might be due to the worker not handling ranged requests, and iOS requiring ranged requests for video playback (https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6)

Try it out on your iPhone here -> https://test-mp4.tappable.workers.dev

What did you expect to see?

A video playing

What did you see instead?

A broken video indicator

[cpauwels]

@shagamemnon and anyone who might need to fix this now, here’s how I solved the issue:

const serveRange = async function(request, response) {
  if (!request.headers.get('range')) {
    console.log('no range')
    return response
  }

  const normalizedRangeHeader = request.headers
    .get('range')
    .trim()
    .toLowerCase()
  if (!normalizedRangeHeader.startsWith('bytes=')) {
    console.log('unit must be bytes')
    return response
  }

  if (normalizedRangeHeader.includes(',')) {
    console.log('single range only')
    return response
  }

  const rangeParts = /(\d*)-(\d*)/.exec(normalizedRangeHeader)
  // We need either at least one of the start or end values.
  if (!rangeParts || !(rangeParts[1] || rangeParts[2])) {
    console.log('invalid range values')
    return response
  }

  const start = rangeParts[1] === '' ? undefined : Number(rangeParts[1])
  const end = rangeParts[2] === '' ? undefined : Number(rangeParts[2])

  const originalBuffer = await response.arrayBuffer()
  const bufferSize = originalBuffer.byteLength
  if ((end && end > bufferSize) || (start && start < 0)) {
    console.log('range not satisfiable')
    return response
  }

  let effectiveStart
  let effectiveEnd

  if (start !== undefined && end !== undefined) {
    effectiveStart = start
    // Range values are inclusive, so add 1 to the value.
    effectiveEnd = end + 1
  } else if (start !== undefined && end === undefined) {
    effectiveStart = start
    effectiveEnd = bufferSize
  } else if (end !== undefined && start === undefined) {
    effectiveStart = bufferSize - end
    effectiveEnd = bufferSize
  }
  console.log(`range ${effectiveStart} - ${effectiveEnd}`)

  const slicedBuffer = originalBuffer.slice(effectiveStart, effectiveEnd)

  const slicedResponse = new Response(slicedBuffer, {
    // Status code 206 is for a Partial Content response.
    // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/206
    status: 206,
    statusText: 'Partial Content',
    headers: response.headers,
  })
  slicedResponse.headers.set('Content-Length', String(slicedBuffer.byteLength))
  slicedResponse.headers.set(
    'Content-Range',
    `bytes ${effectiveStart}-${effectiveEnd - 1}/` + bufferSize,
  )

  return slicedResponse
}

My only worry with this solution is wether I could run into some memory issues since the whole response is loaded in an ArrayBuffer and videos could be quite large… I’m guessing with worker sites the max size that can be stored in KV storage is 10MB and hence there won’t be any memory issues, but I’d love to have that validated by someone at Cloudflare 😃

[ashleygwilliams]

i’m going to transfer this issue to the kv-asset-handler repo where the PR to solve this exists!