NightWatch

# 视频流介绍

# 三大直播协议

# 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

# 视频流传输

  1. 摄像头采集：使用摄像头设备（如USB摄像头、IP摄像头等）采集视频数据。这可以通过操作系统提供的摄像头驱动程序或相关的开发库来实现。
  2. 编码和压缩：采集到的原始视频数据可能会非常庞大，需要进行编码和压缩以减小数据大小。常见的视频编码标准包括H.264、H.265等。你可以使用编码器来将原始视频数据转换为所需的视频编码格式。
  3. 流媒体服务器：设置和配置流媒体服务器，如Nginx-RTMP、Wowza Streaming Engine等。确保服务器具备接收和处理视频流的能力，并配置相应的应用程序和流密钥。
  4. 推流：使用推流软件（如OBS）将编码后的视频流推送到流媒体服务器。在推流过程中，需要提供流媒体服务器的地址、应用程序名称和流密钥等信息。
  5. 流媒体传输：流媒体服务器接收到推送的视频流后，会根据配置的协议和格式进行传输。常见的流媒体传输协议包括RTMP、HLS、DASH等。服务器会生成相应的流媒体文件（如.ts文件、.m3u8文件等）并提供访问的URL。
  6. 前端播放：在前端页面上使用流媒体播放器（如Video.js、Hls.js、DPlayer等）进行视频流的播放。通过提供流媒体服务器生成的URL，前端播放器能够加载和播放视频流。
  7. 播放控制和交互：在前端页面上实现所需的播放控制和交互功能，如播放/暂停、音量控制、全屏等。这可以通过播放器提供的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

  1. 服务器安装streamedian服务器
  2. 客户端通过video标签播放

# nginx + nginx-rtmp-module，rtmp转发（已成功）

本方案需要在摄像机登录页面推送rtmp流，因此相当于实现了rtmp流的转发

  1. 下载视频流测试工具vlc (opens new window)
  2. 安装nginx，下载地址 (opens new window)，选择nginx 1.7.11.3 Gryphon.zip
  3. 下载nginx-rtmp-module模块，官方地址 (opens new window)，解压后放在nginx安装根目录，百度网盘备用链接
链接：https://pan.baidu.com/s/1eG-hMjQHFHg0nalFBET1wA
提取码：nutq
  1. 配置nginx的rtmp模块
rtmp{
    server{
        listen 1935;
          #转发的地址
        chunk_size 4000;
        application live1 {
            live on;
            allow publish 127.0.0.1;#
            allow play all;
            record off;
        }
    }
}
  1. 使用OBS推流至rtmp://127.0.0.1:1935/live1
  2. 使用vlc等工具测试rtmp://127.0.0.1:1935/live1是否能正常播放

# nginx-rtmp-module，rtmp转hls播放（已成功）

默认URL

http://127.0.0.1/hls1/playlist.m3u8

配置方式和rtmp转发类似，不过需要配置hls转码

  1. 配置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片段存储路径
}
  1. 配置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; # 不被缓存
}
  1. OBS推流到指定URL,进行测试
rtmp://localhost:1935/hls1
  1. VLC测试URL
http://127.0.0.1:9000/hls1/index.m3u8

chrome浏览器实测，同时展示8个，会非常卡顿

Last Updated: 12/23/2024, 4:18:13 AM

←