DASH视频系统（服务器&播放器）搭建

置顶 已于 2023-07-20 15:40:29 修改
阅读量1.9w 收藏 82
点赞数 25
分类专栏： # DASH 文章标签： nginx ubuntu ffmpeg dash.js 视频
于 2019-12-13 17:47:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LvGreat/article/details/103531277
版权

文章目录

0. 概述

环境：

  • 视频服务器：Ubuntu 16.04
  • 视频客户端：任意主机上的浏览器（推荐Chrome）

工具：

  • 服务器：Nginx
  • 编码器：FFmpeg
  • 视频切片：Bento4
  • 播放器：dash.js

*注：本文基于Bento4的mp4dash实现，关于基于MP4Box的实现方案，参见：Ubuntu下GPAC（MP4Box）的安装 | 基于MP4Box搭建DASH视频系统

视频：

  • Elephant Dream

分辨率级别：

  • 1920×1080（1080p）
  • 1280×720（720p）
  • 896×504（480p）1
  • 640×360（360p）
  • 256×144（144p）

参考：

说明：
本文记录了一个最基础的DASH视频服务器与播放器的搭建过程，并在本人掉坑之后补充了一些细节。有兴趣的初学者不需要了解具体知识，只需跟随说明，即可成功复现。
为了可读性，将工具的安装过程单独写在了别的博文里，点开即见，相当于函数封装了。

1. 搭建服务器（Nginx）

见：Ubuntu下Nginx的安装及使用
（建议使用源码安装）

2. 获取源视频及音频

视频名称：Elephants Dream
来源：Xiph.org :: Derf’s Test Media Collection

1. 视频
原始格式：y4m
原始帧率：24fps
原始时长：10m53s
原始比例：16:9
原始分辨率：1920×1080（1080p）
原始大小：46GB
下载链接：elephants_dream_1080p24.y4m.xz
文件为.xz压缩包，大小为7.13GB，解压命令为：

xz -d elephants_dream_1080p24.y4m.xz

2. 音频
原始格式：flac
原始时长：10m58s（*注：比视频长5s左右，后续没有对这个时间差进行处理）
下载页面：Index of /video/derf/flac/ED
下载链接：ED-CM-St-16bit.flac（*注：其他6个文件是5.1环绕立体声的6条音轨，只有这个是完整的音频）

3. 安装编码器（FFmpeg）

见：Ubuntu下FFmpeg的安装（支持libfdk_acc）
（需支持libfdk_aac，因此应使用源码安装）

若有更多编码需求（如VP9、AV1等），建议直接参阅官方文档：CompilationGuide/Ubuntu – FFmpeg

4. 视频编码

目的编码：H.264/AVC

目的分辨率级别：

  • 1920×1080（1080p）
  • 1280×720（720p）
  • 896×504（480p）
  • 640×360（360p）
  • 256×144（144p）

使用最简单的编码方式，每个分辨率视频的对应命令为：

ffmpeg -i elephants_dream_1080p24.y4m -s 1920x1080 -c:v libx264 -keyint_min 48 -g 48 -sc_threshold 0 -an ED1920x1080.mp4
ffmpeg -i elephants_dream_1080p24.y4m -s 1280x720 -c:v libx264 -keyint_min 48 -g 48 -sc_threshold 0 -an ED1280x720.mp4
ffmpeg -i elephants_dream_1080p24.y4m -s 896x504 -c:v libx264 -keyint_min 48 -g 48 -sc_threshold 0 -an ED896x504.mp4
ffmpeg -i elephants_dream_1080p24.y4m -s 640x360 -c:v libx264 -keyint_min 48 -g 48 -sc_threshold 0 -an ED640x360.mp4
ffmpeg -i elephants_dream_1080p24.y4m -s 256x144 -c:v libx264 -keyint_min 48 -g 48 -sc_threshold 0 -an ED256x144.mp4

关于选项：

  • -s：分辨率
  • -c:v libx264：使用x264编码库，将视频编码为H.264/AVC格式
  • -keyint_min 48 -g 48 -sc_threshold 0：固定GOP长度为48帧（在帧率24fps下对应2s的视频块时长，该数值按需调整），这里涉及到一个后续可能会遇到的错误2
  • -an：y4m格式不包含音频，因此此处不对音频进行编码

*注：

  • 编码可能需要很长时间，需要等待
  • 此时生成的各视频均不包含音频
  • 如需指定目标码率，可以使用-b:v选项进行配置，如-b:v 300k表示目标码率为300Kbps

编码完成后，各分辨率下的视频I帧对齐，I帧个数均为327个，对应327个GOP，每个GOP时长2s。各分辨率下的视频码率（单位：kbps）分别为（见ffmpeg输出信息）：

  • 1920x1080（1080p）：3988.49
  • 1280x720（720p）：1983.08
  • 896x504（480p）：1131.42
  • 640x360（360p）：676.67
  • 256x144（144p）：147.76

5. 音频编码

需要将音频使用AAC进行编码为m4a格式3，命令为：

ffmpeg -i ED-CM-St-16bit.flac -c:a libfdk_aac ED.m4a

为了后续的步骤，需要将该m4a音频与之前编码的视频进行合并，输出一个有音轨的视频4，具体命令为：

ffmpeg -i ED1920x1080.mp4 -i ED.m4a -vn -c:a copy ED_audio.mp4

*注：此视频只需要音轨，不需要视频画面，因此用-vn忽略视频编码，否则后面会多生成一种视频的Representation

*注：对音频编码时，若换用其他编码库（如alac），可能会在播放时引起错误：

[6395][Stream] audioCodec (audio/mp4;codecs="mp4a") is not supported.

这是因为浏览器不支持其他编码的音频，参考：Profiles and codecs supported by the Reference Client ( dash.js )?

Dash.js itself does not support codecs. It is a MSE client, meaning that it relies upon the browser’s MSE implementation to decode the content. It will pass along ANY codec that is specified within the manifest and ask the sourceBuffer if it can play it. So the answer to your question is really what codecs do Chrome, IE11, FF and Safari/Yosemite support for MSE?

6. 安装视频切片工具（Bento4）

见：Ubuntu下Bento4（mp4info、mp4fragment、mp4dash）的安装及使用

*注：鉴于mp4dash编码后MPD文件中的码率与视频真实码率不一致（见下），建议用MP4Box完成视频切片，详见：基于MP4Box搭建DASH视频系统

7. 视频切片

步骤：
1. fragment：使用mp4fragment对各分辨率视频及音频视频进行fragment（指定fragment时长为2s）

mp4fragment --fragment-duration 2000 ED1920x1080.mp4 f1080p.mp4
mp4fragment --fragment-duration 2000 ED1280x720.mp4 f720p.mp4
mp4fragment --fragment-duration 2000 ED896x504.mp4 f480p.mp4
mp4fragment --fragment-duration 2000 ED640x360.mp4 f360p.mp4
mp4fragment --fragment-duration 2000 ED256x144.mp4 f144p.mp4
mp4fragment --fragment-duration 2000 ED_audio.mp4 f_audio.mp4

2. 切片：使用mp4dash对已fragment的视频进行切片

mp4dash f1080p.mp4 f720p.mp4 f480p.mp4 f360p.mp4 f144p.mp4 f_audio.mp4

成功后，生成文件的目录结构为：

output/
├── audio/
│   └── und/
│       └── mp4a/
│           ├── init.mp4
│           ├── seg-1.m4s
│           ├── ...
│           └── seg-330.m4s
├── stream.mpd
└── video/
    └── avc1/
        ├── 1/
        ├── 2/
        ├── 3/
        ├── 4/
        └── 5/
            ├── init.mp4
            ├── seg-1.m4s
            ├── ...
            └── seg-327.m4s

可以看到，mp4dash将5种分辨率的视频分别分为了327个视频段，并为其生成了mpd文件。此外，由于音频比视频长5s左右，因此音频有330个段，比视频多了3个

生成的stream.mpd5的内容为：

<?xml version="1.0" ?>
<MPD mediaPresentationDuration="PT10M53.792S" minBufferTime="PT2.00S" profiles="urn:mpeg:dash:profile:isoff-live:2011" type="static" xmlns="urn:mpeg:dash:schema:mpd:2011">
  <!-- Created with Bento4 mp4-dash.py, VERSION=1.8.0-629 -->
  <Period>
    <!-- Video -->
    <AdaptationSet maxHeight="1080" maxWidth="1920" mimeType="video/mp4" segmentAlignment="true" startWithSAP="1">
      <SegmentTemplate duration="2000" initialization="$RepresentationID$/init.mp4" media="$RepresentationID$/seg-$Number$.m4s" startNumber="1" timescale="1000"/>
      <Representation bandwidth="16079970" codecs="avc1.640028" frameRate="24" height="1080" id="video/avc1/1" scanType="progressive" width="1920"/>
      <Representation bandwidth="7753362" codecs="avc1.64001F" frameRate="24" height="720" id="video/avc1/2" scanType="progressive" width="1280"/>
      <Representation bandwidth="4310870" codecs="avc1.64001F" frameRate="24" height="504" id="video/avc1/3" scanType="progressive" width="896"/>
      <Representation bandwidth="2391544" codecs="avc1.64001E" frameRate="24" height="360" id="video/avc1/4" scanType="progressive" width="640"/>
      <Representation bandwidth="402408" codecs="avc1.64000C" frameRate="24" height="144" id="video/avc1/5" scanType="progressive" width="256"/>
    </AdaptationSet>
    <!-- Audio -->
    <AdaptationSet mimeType="audio/mp4" segmentAlignment="true" startWithSAP="1">
      <SegmentTemplate duration="2000" initialization="$RepresentationID$/init.mp4" media="$RepresentationID$/seg-$Number$.m4s" startNumber="1" timescale="1000"/>
      <Representation audioSamplingRate="48000" bandwidth="141821" codecs="mp4a.40.2" id="audio/und/mp4a">
        <AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"/>
      </Representation>
    </AdaptationSet>
  </Period>
</MPD>

8. 编写网页播放器（dash.js）

*注：如果视频服务器有公网IP，则无需自己实现网页播放器，直接在Dash JavaScript Player中填上MPD文件的链接，点击"Load"即可（先完成本文第9步）。

播放器实现基于dash.js，其GitHub仓库为： Dash-Industry-Forum/dash.js: A reference client implementation for the playback of MPEG DASH via Javascript and compliant browsers

首先，需要下载dash.js到本地，下载链接为：dash.all.min.js
*注：若此链接失效，可通过dash.js的GitHub页面（见上）寻找最新版本文件。

之后，编写一个简单的播放器页面（index.html）：

<!DOCTYPE html>
<html>
    <head>
        <title>Dash.js Rocks</title>
        <style>
            video {
                width: 640px;
                height: 360px;
            }
        </style>
    </head>
    <body>
        <div>
            <video data-dashjs-player autoplay src="./stream.mpd" controls>
            </video>
        </div>
        <script src="./dash.all.min.js"></script>
    </body>
</html>

*注意：这种写法要求index.html、dash.all.min.js、stream.mpd在同一目录下

9. 配置服务器

步骤：
1. 修改Nginx配置
在/usr/local/conf/nginx.conf中，添加6：

location /
{
	...
	add_header Access-Control-Allow-Methods "GET,OPTIONS,POST,HEAD,PUT,DELETE";
	add_header Accept-Ranges "bytes";
	add_header Access-Control-Allow-Origin "*";
	add_header Access-Control-Expose-Headers "Content-Lengrh,Content-Range,Date,Server,Transfer-Encoding,origin,range,x-goog-meta-foo1";
}

之后，验证并重载配置：

nginx -t
nginx -s reload

2. 部署相关文件

  • 将nginx的html/目录（即：/usr/local/nginx/html/）下原本的index.html改名为index_bak.html
  • 将之前生成的output/下所有文件（见上）转移至html/目录下
  • 将之前写好的index.html及下载的dash.all.min.js转移至html/目录下

此时，html/下的文件目录结构为：

/usr/local/nginx/html/
    50x.html
    audio/
        und/
            mp4a/
                init.mp4
                seg-1.m4s
                ...
                seg-330.m4s
    dash.all.min.js
    index_bak.html
    index.html
    stream.mpd
    video/
        avc1/
            1/
            2/
            3/
            4/
            5/
                init.mp4
                seg-1.m4s
                ...
                seg-327.m4s

最后，打开本地浏览器，输入：

http://localhost/

或在其他机器（客户端）上，输入：

http://服务器IP/

Elephant Dream
F12
可以看出，视频和音频是以一个个格式为m4s的分段进行传输的，其中较小的为音频，较大的为视频。

到此，一个完整的DASH视频系统就正式完成了。Enjoy it!~

  1. 这个分辨率是参考爱奇艺的 ↩︎

  2. 该问题详见：FFmpeg的GOP（I帧）对齐问题 ↩︎

  3. 参考：audio - How do I convert FLAC files to AAC (preferrably VBR 320k+)? ↩︎

  4. 参考：使用FFmpeg合并音视频 ↩︎

  5. 此处生成的MPD文件中的bandwidth值与之前ffmpeg编码得到的视频码率不一致，原因及分析见：mp4dash生成的MPD文件中的Bandwidth取值及其对客户端码率选择的影响 ↩︎

  6. 与HTTP访问控制相关，详见：HTTP访问控制（CORS） ↩︎

Green Lv
关注
专栏目录
Nginx 搭建DASH服务器
山城过雨
01-08 1万+
Nginx 搭建DASH服务器 （图1.players.akamai） 好久没有写博客了，新年这几天也一直荒废，最近开始准备毕业设计，需要用到DASH来做动态码率传输。至于什么是DASH，这里不再赘述，可以参考Dash相关领域知识总结,再给一个DASH播放器akamai,方便大家直观地感受下DASH。本文要分
dash视频服务器本地搭建 (初探)
weixin_30566063的博客
04-17 2281
2019-4-17 15:54:17 星期三 技术说明: dash: 将一个大视频分解成不同分辨率, 不同清晰度的小视频, 以及一个描述文件(后缀: mpd), 根据网络带宽自动调整视频流, 看起来更顺畅, 拖动也很顺畅 用到的工具/技术: ffmpeg: 生成不同分辨率的视频 bento4: 将mp4视频切割成许多小段 nginx: 负责展示网页, 以及输出视频流 html5...
搭建Windows RTMP视频流服务器：一站式教程与技术解析
最新发布
gitblog_06591的博客
09-20 802
搭建Windows RTMP视频流服务器：一站式教程与技术解析 网络通信Windows搭建RTMP视频流服务器含推流拉流详细教程 项目地址: https://gitcode.com/Resource-Bundle-Collect...
DASH+nginx带宽自适应视频播放系统搭建
woshicaiji12138的博客
03-13 940
注意，需要将dash.all.min.js、DashJS.html、ed.mpd、video1920x1080_dashinit.mp4、video1280x720_dashinit.mp4、video640x360_dashinit.mp4、video256x144_dashinit.mp4、video_dashinit.mp4放在一个文件夹中。在路径/usr/local/nginx/conf(linux)或nginx/conf(windows)中找到nginx.conf文件。两种都可以，二选一即可。
搭建电影服务器
01-18
搭建视频服务器 怎么搭建最好，简单视频教程 可以非常容易的学会
Windows环境下用jwplayer+Nginx搭建视频点播服务器
BILL-博客-LLIB
08-05 4247
flv 视频可以采用两种方式发布： 一、普通的 HTTP 下载方式 二、基于 Flash Media Server 或 Red5 服务器的 rtmp/rtmpt 流媒体方式。 多数知名视频网站都采用的是前一种方式。 两种方式对比如下： Http
搭建视频播放服务器(nginx web服务器)
weixin_42716596的博客
06-02 5740
docker 安装nginx-rtmp 安装ffmpeg,推流
视频--简单***服务器的搭建
weixin_33726318的博客
10-19 228
转载于:https://blog.51cto.com/wangluoshalong/1031535
Centos7.4 视频服务器搭建
cqiezi的博客
04-19 1416
访问模式指定为local模式。下载地址http://nginx.org/en/download.html。./nginx -s reload #重新加载配置文件。
CentOS7 虚拟机搭建DASH本地视频服务器
mike124的博客
03-05 1412
本文参考https://github.com/sanlengjingvv/mpeg-dash-sample，但该项目使用macOS，这里是CentOS7 虚拟机下运行，因此很多命令、方法需要修改。 先上命令说明 ——————————————————————————————————————————————————— # 安装 Homebrew /usr/bin/ruby -e "$(curl...
直播系统的搭建（ffmpeg推流+基于nginx的dash服务器+dash.js客户端）
我要出家当道士
10-30 1351
直播系统的搭建（ffmpeg推流+基于nginx的dash服务器+dash.js客户端）
使用Tomcat或Nginx搭建视频服务器
08-23
使用Tomcat搭建视频服务器，后面又在Ubuntu上用Nginx做了一套。使用ffmpeg处理视频文件为HLS协议的分片以支持点播。
MPEG-DASH网页播放器实现
04-04
MPEG-DASH网页播放器实现新版本，JavaScript脚本语言运行
hls流视频服务器搭建（linux）
09-28
坚持高质量，坚持亲自测试。 ffmpeg+nginx搭建流视频服务器，通常用于pc，android，ios的视频点播。
搭建手机视频服务器,使用手机看自己的电脑上的视频
03-09
搭建手机视频服务器,使用手机看自己的电脑上的视频,支持外网IP,可以建立账号,设置账号访问限制,目前仅支持Android和WP7平台,功能强大,流畅播放,支持拖动定位播放
基于Java的流媒体视频直播服务器设计与实现
04-11
本项目聚焦于“基于Java的流媒体视频直播服务器设计与实现”，这涉及到多个IT领域的知识，包括音视频处理、服务器架构、Java编程以及运维等。 首先，我们要理解流媒体的概念。流媒体是指在互联网上传输的连续多媒体...
windows下dash+nginx简易服务器搭建
s@dragon的博客
06-13 1315
windows下dash+nginx服务器搭建 1、视频编码 （1）下载ffmpeg，配环境变量 https://github.com/BtbN/FFmpeg-Builds/releases （2）准备原始视频,有画面和音频，mp4、avi皆可 ffmpeg -i input.avi -s 160x90 -c:v libx264 -b:v 250k -g 90 -an input_video_160x90_250k.mp4 参数说明: -i input.avi 原始视频文件
局域网搭建视频服务器
dickzhu的专栏
12-30 4850
http://blog.csdn.net/zhounanzhaode/article/details/46911361
DASH框架下的码率自适应视频播放实验
06-09
很高兴能回答您的问题。DASH（Dynamic Adaptive Streaming over HTTP）是一个流媒体传输协议，它允许视频播放器根据当前网络条件和设备性能动态调整视频的码率和分辨率。这样可以确保在不同的网络环境下都能够顺畅地播放视频。 在DASH框架下进行码率自适应视频播放实验，需要先准备一个支持DASH协议的视频流和一个能够进行码率自适应的视频播放器。通常，我们可以使用一些开源的DASH播放器，例如Dash.js、Shaka Player等。 实验的具体步骤如下： 1. 准备测试视频：获取一个支持DASH协议的视频流，可以使用一些在线视频服务（如YouTube、Vimeo等）或者自己搭建一个DASH视频流服务器。 2. 编写HTML文件：使用HTML5的video标签，将DASH播放器嵌入到页面中，并设置相应的属性（如视频源、宽高、自动播放等）。 3. 配置码率自适应算法：根据不同的DASH播放器，配置相应的码率自适应算法，例如根据当前网络带宽、延迟等参数动态调整视频的码率和分辨率。 4. 进行实验：在不同的网络环境下，测试视频播放器的性能，包括视频的清晰度、卡顿现象、切换码率等指标。 通过上述实验可以得到视频播放器在不同网络环境下的性能表现，并根据实验结果对码率自适应算法进行优化，提高视频播放的质量和用户体验。
评论 24
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Green Lv

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值