Stream video from MinIO bucket on Node.js server using HTML5 video tag

Question

I need to stream videos stored through MinIO using HTML5 MSE. I am using the minio node client on a sapper server to serve the video stream, with an endpoint like this:

import Minio from 'minio'

const minioClient = new Minio.Client({
    endPoint: 'localhost',
    port: 9000,
    useSSL: false,
    accessKey: 'minio_access',
    secretKey: 'minio_secret'
})

export async function get(req, res, next) {
    const { id } = req.params

    minioClient.getObject("videos", id, (err, stream) => {
        if(err) {
            res.statusCode = 500
            return res.end(err)
        }
        stream.pipe(res)
    })
}

I tested this endpoint with curl -o vid.mp4 http://localhost:3000/asset/video/vid.mp4 and the video downloads fine.

On the client side, I'm trying to get the stream, convert it to an ArrayBuffer, and display it on a video element:

function startVideo() {
    player = document.getElementById("player")

    const mediaSource = new MediaSource()
    const url = URL.createObjectURL(mediaSource)

    player.src = url

    mediaSource.addEventListener('sourceopen', sourceOpen)
}

async function sourceOpen() {
    let mediaSource = this

    const videoSourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')

    let fetchResult = await fetch(`/asset/video/${videoLocation}`)
    let videoData = await fetchResult.arrayBuffer()

    videoSourceBuffer.appendBuffer(videoData)
}

The video element does not display the video however; just a blank screen with a crossed out play button (on Safari). I am thinking it might be a codecs problem but I don't know much about codecs. Any ideas?