小师的Blog
0%

简单的视频直播实现

发表于 更新于 分类于
本文字数： 4.8k 阅读时长 ≈ 4 分钟

概述

参考自CSDN雷霄骅博客：https://blog.csdn.net/leixiaohua1020/article/details/18893769

视频播放器播放一个互联网上的视频文件，需要经过以下几个步骤：解协议，解封装，解码视音频，视音频同步。如果播放本地文件则不需要解协议，为以下几个步骤：解封装，解码视音频，视音频同步。

**==解协议==**的作用，就是将流媒体协议的数据，解析为标准的相应的封装格式数据。视音频在网络上传播的时候，常常采用各种流媒体协议，例如HTTP，RTMP，或是MMS等等。这些协议在传输视音频数据的同时，也会传输一些信令数据。这些信令数据包括对播放的控制（播放，暂停，停止），或者对网络状态的描述等。解协议的过程中会去除掉信令数据而只保留视音频数据。例如，采用RTMP协议传输的数据，经过解协议操作后，输出FLV格式的数据。

==流媒体协议==是服务器与客户端之间通信遵循的规定。常用的流媒体协议如下：

image-20220303123119557

**==解封装==**的作用，就是将输入的封装格式的数据，分离成为音频流压缩编码数据和视频流压缩编码数据。封装格式种类很多，例如MP4，MKV，RMVB，TS，FLV，AVI等等，它的作用就是将已经压缩编码的视频数据和音频数据按照一定的格式放到一起。例如，FLV格式的数据，经过解封装操作后，输出H.264编码的视频码流和AAC编码的音频码流。

==封装格式==：把视频数据和音频数据打包成一个文件的规范。常见的封装格式如下：

image-20220303123246963

有些封装格式支持的音视频编码标准十分广泛，应该算比较优秀的封装格式，比如MKV；而有些封装格式支持的音视频编码标准很少，应该属于落后的封装格式，比如RMVB。

**==解码==**的作用，就是将视频/音频压缩编码数据，解码成为非压缩的视频/音频原始数据。音频的压缩编码标准包含AAC，MP3，AC-3等等，视频的压缩编码标准则包含H.264，MPEG2，VC-1等等。解码是整个系统中最重要也是最复杂的一个环节。通过解码，压缩编码的视频数据输出成为非压缩的颜色数据，例如YUV420P，RGB等等；压缩编码的音频数据输出成为非压缩的音频抽样数据，例如PCM数据。

==视频编码==的主要作用是将视频像素数据（RGB，YUV等）压缩成为视频码流，从而降低视频的数据量。如果视频不经过压缩编码的话，体积通常是非常大的，一部电影可能就要上百G的空间。视频编码是视音频技术中最重要的技术之一。常见的视频编码格式如下：

image-20220303123611458

常用的音频编码格式如下：

image-20220303123709785

==码流==（Data Rate）也叫码率，指的是视频文件在单位时间内使用的数据流量，对视频编码画面质量的控制起到重要作用。码率(kbps)=文件大小(KB) * 8 / 时间(秒)，比如800kbps代表编码器每秒产生800kbit（或100KB）的数据。在同样分辨率下，视频文件码流越大，压缩比就越小，画面质量就越好；几乎所有编码格式都比较重视如何用最低的码率达到最少的失真。同等码率的前提下，各种编码格式的视频质量MPEG-2<H.263<MPEG-4<H.264/AVC。

**==视音频同步==**的作用，就是根据解封装模块处理过程中获取到的参数信息，同步解码出来的视频和音频数据，并将视频音频数据送至系统的显卡和声卡播放出来。

==分辨率==和==帧率==：

分辨率720P、1080P表示的是“视频像素的总行数”，例如：720P表示的是视频有720行像素，1080P则表示视频总共有1080行的像素数。1080P分辨率的摄像机像素数是1920*1080。2K、4K等是表示“视频像素的总列数”；例如4K，表示的是视频有4000列的像素数，4K分辨率的摄像机像素数有两种，第一种是：4096*2160；第二种是：3840*2160。

帧率是指每秒图像的数量，一帧代表的就是一副静止的画面。影响画面流畅度，一般20帧的FPS就已经可以达到很好的用户体验。

如果不做码率大小上的限制，那么分辨率越高，画质越细腻；帧率越高，视频越流畅，但相应的码率也会很大，因为每秒钟需要用更多的数据来承载较高的清晰度和流畅度。

如果限定视频的码率，就要调整分辨率和帧率来实现视频的播放。

FFmpeg

参考自CSDN雷霄骅博客：https://blog.csdn.net/leixiaohua1020/article/details/15811977

FFmpeg是一个完整的，跨平台的解决方案，用于记录，转换和流化音视频。可作为视频播放器以及音视频转码工具的内核。

ffmpeg的官方网站是：http://ffmpeg.org/

github开源地址：https://github.com/FFmpeg/FFmpeg

该网站中的FFMPEG分为3个版本：Static，Shared，Dev。

前两个版本可以直接在命令行中使用，他们的区别在于：Static里面只有3个应用程序：ffmpeg.exe，ffplay.exe，ffprobe.exe，每个exe的体积都很大，相关的Dll已经被编译到exe里面去了。Shared里面除了3个应用程序：ffmpeg.exe，ffplay.exe，ffprobe.exe之外，还有一些Dll，比如说avcodec-54.dll之类的。Shared里面的exe体积很小，他们在运行的时候，到相应的Dll中调用功能。

Dev版本是用于开发的，里面包含了库文件xxx.lib以及头文件xxx.h，这个版本不包含exe文件。

==ffmpeg==是用于转码的应用程序。

将input.avi转码成output.ts，并设置视频的码率为640kbps

1
ffmpeg -i input.avi -b:v 640k output.ts

==ffplay==是用于播放的应用程序。

播放test.avi

1
ffplay test.avi

==ffprobe==是用于查看文件格式的应用程序。

VLC

VLC 是一款自由、开源的跨平台多媒体播放器及框架，可播放大多数多媒体文件，以及 DVD、音频 CD、VCD 及==各类流媒体协议==。

官网：https://www.videolan.org/

EasyDrawin

EasyDarwin是国内基于Darwin Streaming Server二次开发的流媒体服务器。通过流媒体服务器可进行推流和拉流。

Darwin Streaming Server为苹果公司视频流解决方案的开源版本。

EasyDarwin官方网址：http://www.easydarwin.org/
Github开源地址：https://github.com/EasyDarwin/EasyDarwin

下载解压 release 包

Windows可直接运行EasyDarwin.exe

打开浏览器输入 http://localhost:10008,，进入控制页面，默认用户名密码是admin/admin

测试==推流==

1
2
3
ffmpeg -re -i C:\Users\Administrator\Videos\test.mkv -rtsp_transport tcp -vcodec h264 -f rtsp rtsp://localhost/test

ffmpeg -re -i C:\Users\Administrator\Videos\test.mkv -rtsp_transport udp -vcodec h264 -f rtsp rtsp://localhost/test

测试==拉流==

1
2
3
ffplay -rtsp_transport tcp rtsp://localhost/test

ffplay rtsp://localhost/test

也可以通过VLC播放器直接播放。

image-20220303151606014

在进行推流时，多个客户端进行拉流是同步的，推流完成之后就不能拉流了。这算是视频直播的一种方案。

image-20220303155618763

教程可参考：https://zhuanlan.zhihu.com/p/112082321

RTSP协议可参考https://blog.csdn.net/leixiaohua1020/article/details/11955341

海康威视摄像头拉流

海康威视摄像头与电脑通过网线连接，在设备网络搜索可以查看：

image-20220311171513658

之后使用IE浏览器访问该IP可查看摄像头视频信息，还可在配置界面对摄像头进行配置：

image-20220311171830721

海康摄像头的监控地址为：rtsp://admin:12345@192.168.1.64/h264/ch1/main/av_stream（帐户，密码，ip,端口，…..）

使用VLC可进行拉流查看：

image-20220311172109694

浏览器播放rtsp流媒体

博客 https://blog.csdn.net/zs245584910/article/details/106712881/

通过==node-rtsp-stream==：https://www.npmjs.com/package/node-rtsp-stream进行拉流，需要配置==ffmpeg==环境变量。

这种方案需要通过node-rtsp-stream开启拉流服务，之后html再去调用这个服务实现视频播放。使用的视频播放器是==jsmpeg==(https://github.com/phoboslab/jsmpeg)，还需要单独下载安装。感觉还是有点麻烦。

我实现了一下，文件目录如下：

image-20220303171106045

运行步骤如下：

  1. 运行EasyDarwin.exe

  2. 开启推流（需要win+R打开Windows Terminal才能执行ffmpeg命令）

1
ffmpeg -re -i C:\Users\Shi\Desktop\htmlvideo\bigdata.mp4 -rtsp_transport tcp -vcodec h264 -f rtsp rtsp://localhost/test
  1. 开启拉流
1
node .\server.js
  1. 打开html文件进行播放

海康威视摄像头的话只需要开启拉流之后打开html播放即可。

博客 https://www.cnblogs.com/gaoji/p/6872365.html的实现方式是：nginx搭的服务器，ffmpeg转码，jwplayer播放。

核心就是把将rtsp协议的视频流转成rtmp，之后让播放器播放。

其他解决方案可参考：https://www.zhihu.com/question/29973696/answer/2034360284

效果对比，左下角是海康的网站，左上角是VLC，右侧是html文件播放：

视频点播

HTML5的video标签属于HTTP渐进流式下载，不需要流媒体服务器，普通HTTP服务器就可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>
			video
		</title>
	</head>
	<body>
        <video width="720" height="480" controls>
            <source src="bigdata.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video> 
	</body>
</html>

播放地址：https://www.cdfgroup.xyz/video/videotest.html