目录
音视频技术
流媒体
在网络上传输音、视频等多媒体信息,主要有下载和流式传输两种方案。下载的方式对于体积较大的音、视频数据而言,在使用前下载整个媒体文件耗时很大;流媒体传输提供了一种低延时的方式来避免这个问题,流媒体技术是指将多媒体数据压缩后,经过网络分段发送,在网上即时传输音、视频数据供用户播放的一种技术。
点播和直播
点播(VOD, video on demand)即根据用户需求播放,音视频内容一般已经存放在服务器上了,不同于先下载再播放,点播要求即点即播,各大音视频网站(喜马拉雅、优酷、爱奇艺等)提供的服务就是VOD服务。
直播(Live)需要对音视频服务内容实时录制,在录制同时以“流”的形式推送到服务器,服务器在收到用户的播放请求后,会将媒体流传输到用户的播放器进行播放,并对延迟有较高的要求,各大直播平台(斗鱼、虎牙等)提供的服务就是直播服务。
HLS流媒体协议
HLS(Http Live Streaming)自适应码率流媒体传输协议,该协议基于Http协议,优点:Html5能够直接支持HLS,有浏览器就能播放,不需要安装额外的app,不用考虑防火墙或者代理问题;HLS也支持最新的H.265编解码器,H.265编码的质量要比H.264高很多。缺点:因为HLS基本是采用了点播切片的方式实现的直播,在直播上相对于其他协议有较高的延迟(5-8秒)。
原理:首先将一个完整音视频分成多个ts格式音视频文件切片,并生成m3u8索引文件,用户下载m3u8索引文件,通过m3u8文件中每段ts切片的索引地址来播放具体的ts切片,在m3u8中可以指定播放相关的参数。
除了HLS协议外,相关的协议还有RTC/RTCP、RTSP、RTMP、WEBRTC、FLV等。
接着讲在linux上如何安装配置视频服务器,在windows上的安装配置方法见《nginx安装、配置视频服务器-windows》。
编译安装nginx
下载nginx依赖
yum install gcc-c++ -y #nginx编译依赖gcc环境
yum install pcre pcre-devel -y #nginx调度http模块使用pcre来解析正则表达式
yum install zlib zlib-devel -y #nginx使用zlib对http包的内容进行gzip
openssl version #nginx可能需要支持https,最好在系统中安装openssl
yum install openssl openssl-devel -y
配置nginx
各版本nginx下载网址,版本应>=1.2.6
下载并解压nginx
wget https://nginx.org/download/nginx-1.25.0.tar.gz
tar -zxvf nginx-1.25.0.tar.gz
下载并解压nginx-http-flv-module-1.2.11
wget https://github.com/winshining/nginx-http-flv-module/archive/v1.2.11.tar.gz
tar -zxvf v1.2.11.tar.gz
将nginx-http-flv-module添加至nginx,编译nginx并安装
./configure --prefix=/usr/local/nginx --add-module=/usr/local/nginx/nginx-http-flv-module-1.2.11
make && make install
修改nginx相关配置支持HTTP FLV(/usr/local/nginx/conf)
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8553;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
location /live {
flv_live on;
chunked_transfer_encoding on;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' '*';
}
location /hls {
add_header 'Access-Control-Allow-Origin' '*';
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias /test;
expires -1;
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root /usr/local/nginx/nginx-http-flv-module;
}
}
}
rtmp {
server {
listen 1938; #nginx监听的rtmp推流/拉流端口
application myapp {
live on; #当推流时,rtmp路径中的app(rtmp中的一个概念)匹配myapp时,开始直播
meta off;
gop_cache on;
allow play all;
record off;
hls on;
hls_path /test;
hls_fragment 1s;
}
}
}
启动nginx,验证
http://ip:8553/status
ffmpeg
ffmpeg安装
安装nasm
wget https://www.nasm.us/pub/nasm/releasebuilds/2.14/nasm-2.14.tar.gz
tar -zxvf nasm-2.14.tar.gz
cd nasm-2.14
./configure
make && make install
安装x264(视频流转码,必用)
wget https://code.videolan.org/videolan/x264/-/archive/master/x264-master.zip
unzip x264-master.zip
cd x264-master
./configure --enable-static --enable-shared
make && make install
安装ffmpeg
wget http://www.ffmpeg.org/releases/ffmpeg-4.3.tar.gz
tar ffmpeg-4.3.tar.gz
cd ffmpeg-4.3
./configure --prefix=/usr/local/ffmpeg --enable-gpl --enable-libx264
make && make install
ffmpeg -version
推流
服务器推本地视频流命令:
ffmpeg -stream-loop -1 -re -i "/home/1.mp4" -vcodec libx264 -f flv -an rtmp://ip:1938/myapp/main
对应的拉流地址:
http方式:
flv: http://ip:8553/live?port=1938&app=myapp&stream=main
hls: http://ip:8553/hls/main.m3u8
rtmp方式:
rtmp://ip:1938/myapp/main
测试
flv.html
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.mainContainer {
display: block;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.urlInput {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 576px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<p class="mainContainer">
<video name="videoElement" id="videoElement" class="centeredVideo" controls muted autoplay width="1024"
height="576">
Your browser is too old which doesn't support HTML5 video.
</video>
</p>
<script src="flv.min.js"></script>
<script>
function start() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://ip:8553/live?port=1938&app=myapp&stream=main'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
}
document.addEventListener('DOMContentLoaded', function () {
start();
});
</script>
</body>
</html>
flv.min.js 下载地址: http://flv.jnyzh.cn/flv.min.js