如何为Vue3.js单页应用搭建Node.js/Express的HLS视频服务API？

1. 静态文件托管（最简方案） #

无需额外写API，直接通过Express把存放.m3u8和.ts的目录设为静态资源目录，客户端就能像MPA一样直接通过URL访问这些文件。

示例代码：

const express = require('express');
const app = express();
const path = require('path');

// 假设流媒体文件存在服务器的 ./stream-files 目录下
app.use('/stream', express.static(path.join(__dirname, 'stream-files')));

app.listen(3000, () => {
  console.log('服务器运行在3000端口');
});

Vue端使用方式（结合HLS.js）：

<template>
  <video ref="videoElement" controls></video>
</template>

<script>
import Hls from 'hls.js';

export default {
  mounted() {
    const video = this.$refs.videoElement;
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource('/stream/video.m3u8');
      hls.attachMedia(video);
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = '/stream/video.m3u8';
    }
  }
};
</script>

2. 自定义API接口（需权限验证/额外处理时） #

如果要做权限校验、访问统计等操作，可写自定义接口返回文件：

获取.m3u8文件的接口 #

app.get('/api/stream/:filename', (req, res) => {
  const filename = req.params.filename;
  const filePath = path.join(__dirname, 'stream-files', filename);

  // 这里可添加权限验证逻辑，比如检查用户登录状态
  // if (!req.user) return res.status(403).send('无访问权限');

  res.setHeader('Content-Type', 'application/vnd.apple.mpegurl');
  res.sendFile(filePath, (err) => {
    if (err) {
      res.status(404).send('文件不存在');
    }
  });
});

获取.ts分片文件的接口 #

app.get('/api/stream/chunks/:chunkname', (req, res) => {
  const chunkname = req.params.chunkname;
  const filePath = path.join(__dirname, 'stream-files', 'chunks', chunkname);

  // 同样可添加权限逻辑
  res.setHeader('Content-Type', 'video/MP2T');
  res.sendFile(filePath, (err) => {
    if (err) {
      res.status(404).send('分片文件不存在');
    }
  });
});

注意：使用自定义接口时，需修改.m3u8文件内的.ts路径，指向API接口（比如改为/api/stream/chunks/xxx.ts）。

3. 跨域问题处理（Vue与Express分离部署时） #

若Vue运行在不同端口（如8080），需配置Express允许跨域：

const cors = require('cors');
app.use(cors());

也可配置特定规则，仅允许Vue所在域名访问。

内容的提问来源于stack exchange，提问作者koji tanaka