什么是流媒体
流媒体就是将视频文件分成许多小块儿,将这些小块儿作为数据包通过网络发送出去,实现一边传输视频数据 包一边观看视频。
什么是流式传输
客户端通过链接视频服务器实时传输音、视频信息,实现“边下载边播放”。
- 顺序流式传输
即顺序下载音、视频文件,可以实现边下载边播放,不过,用户只能观看已下载的视频内容,无法快进到未 下载的视频部分,顺序流式传输可以使用Http服务器来实现,比如Nginx、Apache等。 -
实时流式传输
实时流式传输可以解决顺序流式传输无法快进的问题,它与Http流式传输不同,它必须使用流媒体服务器并 且使用流媒体协议来传输视频,它比Http流式传输复杂。常见的实时流式传输协议有RTSP、RTMP、RSVP 等。
业务流程
1.将原始的视频文件通过编码器转换为适合网络传输的流格式,编码后的视频直接输送给媒体服务器
2.媒体服务获取到编码好的视频文件,对外提供流媒体数据传输接口,接口协议包括 :HTTP、RTSP、 RTMP等
3.播放器通过流媒体协议与媒体服务器通信,获取视频数据,播放视频
视频点播方案
- 方案1
播放器通过 http协议从http服务器上下载视频文件进行播放
问题: 必须等到视频下载完才可以播放,不支持快进到某个时间点进行播放 - 方案2
播放器通过rtmp协议连接媒体服务器以实时流方式播放视频
问题: 使用rtmp协议需要架设媒体服务器,造价高,对于直播多采用此方案 - 方案3
播放器使用HLS协议连接http服务器(Nginx、Apache等)实现近实时流方式播放视频
HLS协议:基于Http协议,视频封装格式为ts,视频的编码格式为H264,音频编码格式为MP3、AAC或者AC- 3。
采用HLS方案可以实现边下载边播放,并且不用使用rtmp流媒体协议,不用构建专门的媒体服务器,节省成本
所以我们这里选择方案3
什么是HLS
HLS (HTTP Live Streaming)是Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文件。
IOS、Android设备、及各大浏览器都支持HLS协议。
- HLS的工作方式
将视频拆分成若干ts格式的小文件,通过m3u8格式的索引文件对这些ts小文件建立索引。一般 10秒一个ts文件,播放器连接m3u8文件播放,当快进时通过m3u8即可找到对应的索引文件,并去下载对应的ts文 件,从而实现快进、快退以近实时 的方式播放视频。 - HLS视频编码
将视频编码成HLS格式,最终会输出两类文件,m3u8文件和ts文件 - 视频播放
1.客户端先下载m3u8文件
2.根据m3u8文件列表下载ts文件
3.客户端播放ts文件
什么是视频编码
所谓视频编码方式就是指通过压缩技术,将原始视频格式的文件转换成另一种视频格式文件的方式。
- 文件格式
指.mp4、.avi、.rmvb等 这些不同扩展名的视频文件的文件格式。 - 编码格式
通过音视频的压缩技术,将视频格式转换成另一种视频格式,通过视频编码实现流媒体的传输。 比如:一个.avi的视频文件原来的编码是a,通过编码后编码格式变为b,音频原来为c,通过编码后变为d。 - 常见音视频编码格式
MPEG系列 (由ISO[国际标准组织机构]下属的MPEG[运动图象专家组]开发 )视频编码方面主要是Mpeg1(vcd用 的就是它)、Mpeg2(DVD使用)、Mpeg4(的DVDRIP使用的都是它的变种,如:divx,xvid等)、Mpeg4 AVC(正热门);音频编码方面主要是MPEG Audio Layer 1/2、MPEG Audio Layer 3(大名鼎鼎的mp3)、 MPEG-2 AAC 、MPEG-4 AAC等等。注意:DVD音频没有采用Mpeg的。
H.26X系列 (由ITU[国际电传视讯联盟]主导,侧重网络传输,注意:只是视频编码) 包括H.261、H.262、 H.263、H.263+、H.263++、H.264(就是MPEG4 AVC-合作的结晶)
目前最常用的编码标准是视频H.264,音频AAC。
FFmpeg
FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec,为了保证高可移植性和编解码质量,libavcodec里很多code都是从头开发的。
FFmpeg在Linux平台下开发,但它同样也可以在其它操作系统环境中编译运行,包括Windows、Mac OS X等。这个项目最早由Fabrice Bellard发起,2004年至2015年间由Michael Niedermayer主要负责维护。许多FFmpeg的开发人员都来自MPlayer项目,而且当前FFmpeg也是放在MPlayer项目组的服务器上。项目的名称来自MPEG视频编码标准,前面的"FF"代表"Fast Forward"
FFmpeg被许多开源项目采用,QQ影音、暴风影音等。
- Linux下安装ffmpeg
# 1.安装ffmpeg时需要提前安装yasm插件
wget http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
tar -xvf yasm-1.3.0.tar.gz
cd yasm-1.3.0/
./configure && make && make install
# 2.安装ffmpeg
wget http://www.ffmpeg.org/releases/ffmpeg-3.4.tar.gz
tar -xvf ffmpeg-3.4.tar.gz
cd ffmpeg-3.4/
./configure && make && make install
# 3.查看版本号
[root@centos7-app ffmpeg-3.4]# ffmpeg -version
ffmpeg version 3.4 Copyright (c) 2000-2017 the FFmpeg developers
built with gcc 4.8.5 (GCC) 20150623 (Red Hat 4.8.5-28)
configuration:
libavutil 55. 78.100 / 55. 78.100
libavcodec 57.107.100 / 57.107.100
libavformat 57. 83.100 / 57. 83.100
libavdevice 57. 10.100 / 57. 10.100
libavfilter 6.107.100 / 6.107.100
libswscale 4. 8.100 / 4. 8.100
libswresample 2. 9.100 / 2. 9.100
- windows下环境搭建
1.下载FFmpeg
FFmpeg下载地址
FFmpeg下载
- 配置环境变量
把解压后的软件路径E:\soft\ffmpeg-20191029-d3dee67-win64-static\bin加到环境变量 - 是否安装成功
C:\Users\Administrator>ffmpeg -version
ffmpeg version git-2019-10-29-d3dee67 Copyright (c) 2000-2019 the FFmpeg developers
built with gcc 9.2.1 (GCC) 20191010
configuration: --enable-gpl --enable-version3 --enable-sdl2 --enable-fontconfig --enable-gnutls --enable-iconv --enable-libass --enable-libdav1d --enable-libbluray --enable-libfreetype --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libopus --e
nable-libshine --enable-libsnappy --enable-libsoxr --enable-libtheora --enable-libtwolame --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libzimg --enable-lzma --enable-zlib --enable-gmp --enable-libvidstab --enable-libvorbis --enable-
libvo-amrwbenc --enable-libmysofa --enable-libspeex --enable-libxvid --enable-libaom --enable-libmfx --enable-ffnvcodec --enable-cuvid --enable-d3d11va --enable-nvenc --enable-nvdec --enable-dxva2 --enable-avisynth --enable-libopenmpt --enable-amf
libavutil 56. 35.101 / 56. 35.101
libavcodec 58. 60.100 / 58. 60.100
libavformat 58. 33.100 / 58. 33.100
libavdevice 58. 9.100 / 58. 9.100
libavfilter 7. 66.100 / 7. 66.100
libswscale 5. 6.100 / 5. 6.100
libswresample 3. 6.100 / 3. 6.100
libpostproc 55. 6.100 / 55. 6.100
- 把avi格式转为mp4
ffmpeg -i test.avi -c:v libx264 -s 1280x720 -pix_fmt yuv420p -b:a 63k -b:v 753k -r 18 .\test.mp4
-c:v 视频编码为x264 ,x264编码是H264的一种开源编码格式。
-s 设置分辨率
-pix_fmt yuv420p:设置像素采样方式,主流的采样方式有三种,YUV4:4:4,YUV4:2:2,YUV4:2:0,它的作用是 根据采样方式来从码流中还原每个像素点的YUV(亮度信息与色彩信息)值。
-b 设置码率,-b:a和-b:v分别表示音频的码率和视频的码率,-b表示音频加视频的总码率。码率对一个视频质量有 很大的作用,后边会介绍。
-r:帧率,表示每秒更新图像画面的次数,通常大于24肉眼就没有连贯与停顿的感觉了。码率
码率又叫比特率即每秒传输的bit数,单位为bps(Bit Per Second),码率越大传送数据的速度越快。
码率的计算公式是:文件大小(转成bit)/ 时长(秒)/1024 = kbps 即每秒传输千位数
例如一个1M的视频,它的时长是10s,它的码率等于
110241024*8/10/1024 = 819Kbps
- mp4生成m3u8
# 将test.mp4视频文件按每10秒生成一个ts文件,最后生成一个m3u8文件,m3u8文件就是ts的索引文件 ffmpeg ‐i test.mp4 ‐hls_time 10 ‐hls_list_size 0 ‐hls_segment_filename ./hls/test_%05d.ts ./hls/test.m3u8
-hls_time 设置每片的长度,单位为秒
-hls_list_size n: 保存的分片的数量,设置为0表示保存所有分片
-hls_segment_filename :段文件的名称,%05d表示5位数字
播放器选择
视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或 浏览器插件播放器,其中以flash和H5播放器最常见。
flash播放器:缺点是需要在客户机安装Adobe Flash Player播放器,优点是flash播放器已经很成熟了,并且浏览 器对flash支持也很好。
H5播放器:基于h5自带video标签进行构建,优点是大部分浏览器支持H5,不用再安装第三方的flash播放器,并且随着前端技术的发展,h5技术会越来越成熟。
这里我们采用H5播放器,使用Video.js开源播放器。
Video.js: https://github.com/videojs/video.js
videojs-contrib-hls: https://github.com/videojs/videojs-contrib-hls#installation (videojs-contrib-hls是播放hls的一个插件) 使用文档:http://docs.videojs.com/tutorial-videojs_.html
我们这里使用 video.js 6.7.3 版本,videojs-contrib-hls 5.14.1版本。
搭建媒体服务器
HLS协议是基于Http协议的,我们这里使用Nginx作为视频服务器。
- nginx.conf
# nginx.conf
server {
listen 80;
server_name localhost;
#视频目录
location /{
root /usr/share/nginx/html; # 项目路径
index index.html index.htm;
}
}
- 测试代码
./html/
├── index.html
├── video
│ ├── test_00000.ts
│ ├── test_00001.ts
│ ├── test_00002.ts
│ ├── test_00003.ts
│ ├── test_00004.ts
│ ├── test_00005.ts
│ ├── test_00006.ts
│ ├── test_00007.ts
│ ├── test_00008.ts
│ ├── test_00009.ts
│ ├── test_00010.ts
│ └── test.m3u8
└── videojs
├── video.js
├── videojs-contrib-hls.js
└── video-js.css
# index.html <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>视频播放</title> <link href="./videojs/video-js.css" rel="stylesheet"> </head> <body>
<video
id=example-video
width=800 height=600
class="video-js vjs-default-skin vjs-big-play-centered"
controls
poster="http://192.168.5.134/video/add.jpg">
<source src="http://192.168.5.134/video/test.m3u8" type="application/x-mpegURL">
</video><input type="button" onClick="resetVideo()" value="switch"/>
<script src="./videojs/video.js"></script>
<script src="./videojs/videojs-contrib-hls.js"></script>
<script>
var player = videojs('example-video');
//player.play();function resetVideo(){ player.src({ src: 'http://192.168.5.134/video/test.m3u8', type: 'application/x-mpegURL', withCredentials: true }); player.play(); }
</script>
</body>
</html>
- 测试
http://192.168.5.134