Windows 下 IIS + FFmpeg 搭建流媒体服务

名词解释

先用自己的理解，描述一下什么是流媒体服务：

在访问网络上的普通资源时，通常都需要把资源文件完整下载过来之后才能播放。

比如打开一个网页的时候，对应的 HTML、CSS 和 JS 文件都下载完成之后，页面内容和功能才能完整呈现。

普通的体积小的资源还好，但是如果我要浏览一个几百兆的视频，就必须等视频下载完成才能开始看么？那太不方便了。

于是，就有了流媒体服务。最终呈现出来的效果，是用户可以点击网络视频的任意时间点，就可以直接从这个时间点开始播放，缓冲时间很短，这样是不是很方便？

上网查了一下，最开始被各种名词搞懵了，什么 RTMP、HLS，这个那个的，看得人头大。

最后发现，其实自己所要实现的功能，只是把服务器上的视频文件能够以流媒体的效果呈现出来，供用户使用而已。

用户并不关心我在背后用的是什么样的技术，只要最终能够实现点到哪里放哪里的效果就行。

研究了网上各种流媒体服务器的架设方案，都要用 FFmpeg 将源视频进处理成 m3u8 + ts 文件之后再供用户访问。

但是网上的各种方案，在 Windows 下搭建流媒体服务，都需要用 Nginx。为什么不能用原生的 IIS 来提供服务呢？那就试试吧。

于是先在本机下载了 FFmpeg，用下面的命令将视频文件进行处理，然后将处理后的 m3u8 + ts 文件放到服务器上。

ffmpeg.exe -i 01.mp4 video.m3u8 -c:v libx264 -c:a copy -f hls -g 600 -hls_list_size 0

在 IIS 中，对 m3u8 + ts 这两种文件类型设置了 MIME，这样后端服务器才能够正常解析。

在前端页面中，则用到了 hls.js 这个库，专门用于播放 m3u8 文件。

最开始其实用的是 Video.js + 对应插件，但是发现总是会报错，于是用了 hls.js，就不再报错了。

如果用 vue-cli 进行开发的话，还需要对 hls.js 进行配置：

import hlsjs from 'hls.js';
...
window.Hls = hlsjs;

这样就可以在 vue-cli 中放心地用 hls.js 了。