# 视频流介绍
# 三大直播协议
# RTMP
RTMP(Real Time Message Protocol)由Adobe公司在2002年提出的流媒体协议,未完全公开。用于解决多路复用和分包的问题。一般传输的是flv、f4v格式的流。一般在一个通道上传输命令和数据。
优势:
- 支持实时交互和低延迟
- 适用于需要实时交互和快速响应的应用场景,如虎牙、斗鱼等传统视频直播平台
劣势:
- 在移动设备上的支持不如其他协议广泛
- 对防火墙和代理的穿透性较差
# HTTP-FLV
FLV用http服务器即可实现传统的 流媒体服务器的功能,flv文件体积小,视频质量好。但是要基于flash插件。
可使用flv.js将flv视频流数据转码,最终传递给h5的video标签进行播放
在中国的视频直播行业得到广泛应用
# HLS
HLS(Http Live Streaming) 是苹果公司2009年提出,的基于HTTP的流媒体网络传输协议。专属内容包括两部分,一是m3u8描述文件,二是ts流媒体文件。
m3u8文件是指UTF-8编码的m3u文件,m3u文件是记录了索引的纯文本文件,打开时,播放软件根据索引找到对应的音视频文件地址进行在线播放。二级索引中记录了ts文件的地址。
将不同速率的版本切片,信息保存在m3u列表文件中。
优势:
- 实现自适应码率和跨平台播放
- 广泛支持各种终端设备,适用于移动和苹果设备上在线视频点播、直播等
- 在不同带宽的网络环境下实现较好的流畅播放效果
劣势:
- 实时性差,延迟高,基本在10s+以上
- 不适用于实时互动场景
三者对比
RTMP | HLS | HTTP-FLV | |
---|---|---|---|
协议 | TCP长连接 | HTTP短连接 | HTTP长连接 |
原理 | 每个时刻收到数据立刻转发 | 集合一段时间的数据,生成ts切片文件,并更新m3u8索引 | 同RTMP,使用HTTP协议(80端口) |
延时 | 1-3s | 5-20s | 1-3s |
web支持 | H5需要使用插件 | 支持H5 | H5中需要使用插件 |
其他 | 跨平台支持差,需要Flash支持 | 播放时需要多次请求,对于网络的质量要求高 | 需要Flash技术支持,不支持多音频流、多视频流、不便于seek |
# RTSP和RTP
RTSP(Real-Time Stream Protocol)由Real Networks和Netscape共同提出的流媒体协议。
RTSP在1998年提出,RTP在1996年提出。RTSP负责控制流媒体播放、暂停、停止等操作,RTP负责传输媒体数据。
一般传输的是ts、mp4格式的流
优势:
- 较好的实时性和可靠性
- 适用于流媒体服务器、IP摄像头、视频监控系统等实时传输场景
劣势:
- 需要额外的流媒体服务器和客户端支持,配置和部署相对复杂
- 穿透防火墙和代理存在困难
# DASH
DASH(Dynamic Adaptive Streaming over HTTP)基于HTTP的动态自适应流媒体传输协议。在2011年提出,也是将视频切片,通过HTTP传输,实现自适应码率和跨平台播放。
DASH支持自适应码率、跨平台播放和多种编码格式,广泛用于流媒体点播、直播和互联网电视等领域。
# Smooth Streaming
由Microsoft开发的流媒体传输协议,适用于Windows和Xbox平台,具有自适应码率功能。
# WebRTC
WebRTC(Web Real-Time Communication)由Google在2011年提出。基于UDP协议,支持浏览器的点对点传输,适用于视频通话,视频会议、远程协作等场景。
# 未来发展方向
基于HTTP的流媒体传输协议,如HLS和DASH
- 平台兼容性
- 自适应码率
- 强大的生态系统
- 支持新的技术和特性
# 相关概念
# 流编码格式
# H264
H264是一种视频编码格式,提供高效的视频压缩和高质量视频传输
# ACC
ACC是一种音频编码格式,用于压缩和传输音频数据
# 码率
码率(比特率),是指数据存储或传输时每秒传输的位数,码率越高,视频/音频质量越高
360p是指视频的垂直像素数。
清晰度 | 分辨率 | 码率范围 |
---|---|---|
360p标清 | 640x360 | 200 Kbps - 700 Kbps |
480pSD标清 | 854x480 | 500 Kbps - 2 Mbps |
720p高清 | 1280x720 | 1 Mbps - 4 Mbps |
1080p全高清 | 1920x1080 | 3 Mbps - 8 Mbps |
4K超高清 | 3840x2160 | 10 Mbps - 20 Mbps |
# 视频流传输
- 摄像头采集:使用摄像头设备(如USB摄像头、IP摄像头等)采集视频数据。这可以通过操作系统提供的摄像头驱动程序或相关的开发库来实现。
- 编码和压缩:采集到的原始视频数据可能会非常庞大,需要进行编码和压缩以减小数据大小。常见的视频编码标准包括H.264、H.265等。你可以使用编码器来将原始视频数据转换为所需的视频编码格式。
- 流媒体服务器:设置和配置流媒体服务器,如Nginx-RTMP、Wowza Streaming Engine等。确保服务器具备接收和处理视频流的能力,并配置相应的应用程序和流密钥。
- 推流:使用推流软件(如OBS)将编码后的视频流推送到流媒体服务器。在推流过程中,需要提供流媒体服务器的地址、应用程序名称和流密钥等信息。
- 流媒体传输:流媒体服务器接收到推送的视频流后,会根据配置的协议和格式进行传输。常见的流媒体传输协议包括RTMP、HLS、DASH等。服务器会生成相应的流媒体文件(如.ts文件、.m3u8文件等)并提供访问的URL。
- 前端播放:在前端页面上使用流媒体播放器(如Video.js、Hls.js、DPlayer等)进行视频流的播放。通过提供流媒体服务器生成的URL,前端播放器能够加载和播放视频流。
- 播放控制和交互:在前端页面上实现所需的播放控制和交互功能,如播放/暂停、音量控制、全屏等。这可以通过播放器提供的API或自定义的JavaScript代码来实现。
# 流媒体服务器
# SRS
# AMS(Adobe Media Server)
# wowza
# 在线测试
# 测试工具
potplayer
https://potplayer.en.softonic.com/download
m3u8测试
https://m3u8play.com/
# 测试地址
- hls测试
// 计时器
http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8
https://assets.afcdn.com/video49/20210722/v_645516.m3u8
- rtsp
- rtmp
// 伊拉克 电视台
rtmp://ns8.indexforce.com/home/mystream
// 韩国GOOD TV
rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp
- flv
// 西瓜视频测试
https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv
- mp4
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
http://vjs.zencdn.net/v/oceans.mp4
https://media.w3.org/2010/05/sintel/trailer.mp4
# 浏览器插件
RTMP格式需要flash插件支持,可通过flash中心软件进行安装,其中:
- ActiveX 版:适用于IE浏览器、Edge等软件IE模式调用,Edeg88以下
- PPAPI版:适用于Chromium内核、360、QQ浏览器等等,Chrome88以下
- NPAPI版:适用于基于火狐老版本浏览器,Firefox84以下
flash在安全性、兼容性、性能以及跨平台等方面的问题,逐渐被H5替代
# 前端接入视频流方案
# HLS播放解决方案
# 使用video.js
video.js有三种使用方式:
- video标签
- div嵌套video标签
- video-js标签
数据配置可以在标签中,也可以在js中。
使采用在video标签中引入的方式:
// video标签嵌入
<video
id="my-video"
class="video-js"
controls="true"
preload="auto"
width="500px">
<source :src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" />
</video>
JS代码
import videojs from "video.js";
videojs(
"my-video",
{
bigPlayButton: true,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: false
},
function() {
this.play();
}
);
# 使用hls.js(补充)
# RTMP播放解决方案
# 使用video.js
- vue2使用vue-video-player
vue-video-player 最高版本6.0.0
安装插件
npm install vue-video-player@^5.0.2 --save
npm install videojs-flash@^2.2.1 --save
页面引入
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
完整页面
<template>
<videoPlayer class="vjs-custom-skin videoPlayer" ref="videoplayer"
:playsinline="true" width="90%" :options="playerOptions"
customEventName="changed" @play="onPlayerPlay($event)">
</videoPlayer>
</template>
<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
export default {
name: "RTMP",
components: {
videoPlayer
},
data(){
return{
playerOptions: {//测试视频流数据
width: "600",
height: "400",
language: 'zh-CN',
techOrder: ['flash'],
muted: true,
autoplay: true,
controls: true,
loop: true,
sources: [{
type: 'rtmp/mp4',
src: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp' //rtmp流地址
}],
// poster: 'static/fire/bgpp.png',
// flash:{
// swf:'static/video-js.swf' //视频屏幕小于400x300时设置
// }
},
}
}
}
</script>
- vue3使用@videojs-player/vue
# 使用flv.js
# RTSP播放解决方案
# 利用VLC插件转流
浏览器安装VLC插件进行服务器转码映射,得到ogg格式然后播放
优点:可以直接播放RTSP,无需任何中介服务器帮助
缺点:手动安装插件,基于NPAPI,不被最新的Chrome和Firefox支持,适合兼容IE的项目
# html5_rtsp_player+websocket_rtsp_proxy
- 服务器安装streamedian服务器
- 客户端通过video标签播放
# nginx + nginx-rtmp-module,rtmp转发(已成功)
本方案需要在摄像机登录页面推送rtmp流,因此相当于实现了rtmp流的转发
- 下载视频流测试工具vlc (opens new window)
- 安装nginx,下载地址 (opens new window),选择nginx 1.7.11.3 Gryphon.zip
- 下载nginx-rtmp-module模块,官方地址 (opens new window),解压后放在nginx安装根目录,百度网盘备用链接
链接:https://pan.baidu.com/s/1eG-hMjQHFHg0nalFBET1wA
提取码:nutq
- 配置nginx的rtmp模块
rtmp{
server{
listen 1935;
#转发的地址
chunk_size 4000;
application live1 {
live on;
allow publish 127.0.0.1;#
allow play all;
record off;
}
}
}
- 使用OBS推流至rtmp://127.0.0.1:1935/live1
- 使用vlc等工具测试rtmp://127.0.0.1:1935/live1是否能正常播放
# nginx-rtmp-module,rtmp转hls播放(已成功)
默认URL
http://127.0.0.1/hls1/playlist.m3u8
配置方式和rtmp转发类似,不过需要配置hls转码
- 配置hls转码
hls_path 可以配置在别的路径,容易识别的
application hls1 {
live on; # 直播模式,允许客户端通过RTMP进行直播流传输
hls on; # 启用HLS,允许将直播流转换为HLS格式并进行分片
hls_cleanup on; # 过期自动清理
hls_nested on; # 可以嵌套目录存储HLS分片文件
record off; # 禁用录制功能
hls_fragment 2s; # 每个hls分片时长
hls_playlist_length 10; # hls播放列表的分片数目
hls_path "E:/Program Files/Nginx/nginx-1.7.11.3-Gryphon/hls-path/live1"; # HLS片段存储路径
}
- 配置http访问路径,添加Location
location /hls1 {
# Serve HLS fragments
add_header Access-Control-Allow-Origin *;
add_header Cache-Control no-cache;
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias "E:/Program Files/Nginx/nginx-1.7.11.3-Gryphon/hls-path/live1"; # 映射到实际目录
expires -1; # 不被缓存
}
- OBS推流到指定URL,进行测试
rtmp://localhost:1935/hls1
- VLC测试URL
http://127.0.0.1:9000/hls1/index.m3u8
chrome浏览器实测,同时展示8个,会非常卡顿
← ffmpeg工具