使用 HTML5 视频标签从 Node.js 服务器上的 MinIO 存储桶流式传输视频

Question

我需要使用 HTML5 MSE 流式传输通过 MinIO 存储的视频。我在 sapper 服务器上使用 minio 节点客户端 来提供视频流，端点如下：

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)
    })
}

我用

curl -o vid.mp4 http://localhost:3000/asset/video/vid.mp4

测试了这个端点，视频下载正常。

在客户端，我尝试获取流，将其转换为

ArrayBuffer

，并将其显示在视频元素上：

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)
}

视频元素不显示视频；只是一个空白屏幕，带有一个划掉的播放按钮（在 Safari 上）。我认为这可能是编解码器问题，但我对编解码器了解不多。有什么想法吗？

Answer 1

我也是，但我不使用mp3，我几乎在ios浏览器上进行了直播。这花了我几周的时间才弄清楚原因，minio 似乎支持 getOject 之后的 hls 转换。也许你应该知道第三个库来支持转换它。对我来说，我已经放弃使用minio了，太累了，无法使用minio解决流文件。