使用 multipart/x-mixed-replace 实现 http 实时视频流

关于实时视频传输，业界已经有非常多成熟方案，分别应用在不同需求场景。本文介绍一种基于 HTTP ，非常简单、易理解的方案，实用性不强，但有助于理解 HTTP 协议。

从摄像头读取视频帧

node 的硬件操作能力偏弱，运行时本身并没有提供太多硬件接口，所以要调用硬件设备需要找到合适的库。

有许多工具可以实现从摄像头读取视频流，简单起见，我们选用了比较通用的框架： OpenCV，这是一个 c++ 写的计算机视觉处理工具，包含了各类图像、视频处理功能，对应的 node 版本：node-opencv，安装过程比较繁琐，在 windows 下容易出错，建议参考官网提供的教程（熟悉 docker 的同学，可以使用 node-opencv 镜像）。

视频是一个非常复杂的概念，简单起见，本例中仅通过取帧的方式实现，也就是间隔一段时间从摄像头读取当前图像，连续多张图就构成了一个视频。实现这一点，可以通过调用 OpenCV 的 VideoCapture 类获取帧，代码：

import { promisfy } from "promisfy";
import cv from "opencv";

const video = new cv.VideoCapture(0);
const read = promisfy(video.read, video);
setInterval(() => {
  const frame = await read();
  console.log(frame.length);
}, 100);
复制代码

代码很简单，新建 VideoCapture 实例后，调用 read 接口读取当前帧。

使用 multipart 实现响应流

有了视频帧之后，接下来的问题就是如何传输到客户端，这里有很多成熟的传输技术，包括： HLS、RTSP、RTMP等。这些技术有一定的复杂性，各自有其适用场景，如果业务场景对实时性、性能没有太高要求，那显得有点牛刀杀鸡了。有一个更简单，对前端更友好的方案： http 的 multipart 类型。

multipart 通过 content-type 头定义。这里稍微解释一下，content-type 用于声明资源的