Windows平台搭建Dash系统Dynamic Adaptation Streaming over HTTP (Das

1. Dash简介

Dynamic Adaptation Streaming over HTTP (Dash): HTTP上的动态自适应视频流技术，它将一个视频划分为许多个segment，每个segment有不同质量的副本，能够在播放时根据用户当前的网络状况选择最佳的码率，减少卡顿。详情: dashif.org/

2. 配置环境

环境
- 系统：Windows 10
- 客户端：Chrome
工具 (安装好并将bin目录加入系统环境变量)
- 服务器：Nginx 安装教程
- 编解码器：FFmpeg
- 视频切片工具：Bento4
- 播放器：dash.js
视频
- Big Buck Bunny 可以去 download.blender.org/peach/bigbu… 下载

3. 对视频进行编码

目标编码格式：H.264/AVC
目标分辨率级别：
- 1920×1080 (1080p)
- 1280×720 (720p)
- 854×480 (480p)
- 640×360 (360p)
- 256×144 (144p)

编码命令：

  ffmpeg -i Big_Buck_Bunny_1080p.avi -s 1920x1080 -c:v libx264 -keyint_min 48 -g 48 -sc_threshold 0 -an BBB_1920x1080.mp4
  ffmpeg -i Big_Buck_Bunny_1080p.avi -s 1280x720 -c:v libx264 -keyint_min 48 -g 48 -sc_threshold 0 -an BBB_1280x720.mp4
  ffmpeg -i Big_Buck_Bunny_1080p.avi -s 896x504 -c:v libx264 -keyint_min 48 -g 48 -sc_threshold 0 -an BBB_896x504.mp4
  ffmpeg -i Big_Buck_Bunny_1080p.avi -s 640x360 -c:v libx264 -keyint_min 48 -g 48 -sc_threshold 0 -an BBB_640x360.mp4
  ffmpeg -i Big_Buck_Bunny_1080p.avi -s 256x144 -c:v libx264 -keyint_min 48 -g 48 -sc_threshold 0 -an BBB_256x144.mp4

-i：输入文件名
-s：输出的分辨率
-c:v libx264：将视频编码为H.264/AVC格式
-keyint_min 48 -g 48 -sc_threshold 0：固定GOP长度为48帧(即2s，具体由帧率决定)。这里如果没有这个参数后面bento4切分时会报错，具体原因见 FFmpeg的GOP（I帧）对齐问题
-an：不对音频进行编码，dash中音视频分开编码
最后是输出文件名

可以写个bat，扔那边慢慢跑，视频小的话几十秒就好了。完成后：

视频编码完成

4. 视频切片

使用bento4的mp4fragment对视频进行fragment

mp4fragment --fragment-duration 2000 BBB_1920x1080.mp4 fragmented_1080p.mp4
mp4fragment --fragment-duration 2000 BBB_1280x720.mp4 fragmented_720p.mp4
mp4fragment --fragment-duration 2000 BBB_896x504.mp4 fragmented_480p.mp4
mp4fragment --fragment-duration 2000 BBB_640x360.mp4 fragmented_360p.mp4
mp4fragment --fragment-duration 2000 BBB_256x144.mp4 fragmented_144p.mp4

--fragment-duration：指定fragment时长为2s

使用mp4dash对已fragment的视频进行切片
```
mp4dash fragmented_1080p.mp4 fragmented_720p.mp4 fragmented_480p.mp4 fragmented_360p.mp4 fragmented_144p.mp4
```
成后目录中会自动生成out文件夹，里面有mpd文件和切分的segment

5. 编写简易网页播放器

参考：github.com/Dash-Indust…

将out里面的video文件夹和stream.mpd放到nginx的html文件夹里，下载dash.all.min.js也放入html文件夹中。

具体的目录结构可以自定义。我这边的目录如下：

demo目录

DashJS.html代码如下：

<!doctype html>
<html>
    <head>
        <title>Dash.js Rocks</title>
        <style>
            video {
                width: 640px;
                height: 360px;
            }
        </style>
    </head>
    <body>
        <div>
            <video id="videoPlayer" controls></video>
        </div>
        <script src="./dash.all.min.js"></script>
        <script>
            (function(){
                var url = "./stream.mpd";
                var player = dashjs.MediaPlayer().create();
                player.initialize(document.querySelector("#videoPlayer"), url, true);
            })();
        </script>
    </body>
</html>

6. 配置Nginx服务器

配置访问控制，参考：跨源资源共享（CORS） - HTTP | MDN

修改Nginx的conf下的nginx.conf文件中的server段，主要是加入location /file那一块

server {
    listen       8800;
    server_name  localhost;

    location / {
        root   html;
        index  index.html index.htm;
    }
    location /file {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Methods             
            $http_access_control_request_method;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Headers 
            $http_access_control_request_method;
            add_header Access-Control-Max-Age 1728000;
            return 204;
        }
    }

    #error_page  404              /404.html;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

验证Nginx配置是否正确，正确后启动Nginx

nginx -t
start nginx

7. 验证

最后打开 http://localhost:8800/DashDemo/DashJS.html 验证是否成功即可

参考

原文地址：xchanper.github.io/life/window…