使用ZLMediaKit轻量级流媒体服务器进行视频推流和播放的步骤：

一、首先要开启ZLMediaKit流服务器，或者启动带rtmp的nginx，这里采用第一种方案

cd ZLMediaKit编译后的执行文件目录

./MediaServer -d & #后台启动ZLMediaKit

Postman 2>&1 & #启动Postman，用于添加流代理

二、在Postman中添加流代理

在Postman中加载ZLMediaKit的链接配置，切换到添加流代理命令卡，执行添加流代理命令，其中

secret: 在本机上使用默认secret

vhost: 在本机上使用默认vhost "__defaultVhost__"

app: "live"

stream: "test"

url: "rtmp://127.0.0.1:1935/test/video"

enable_rtsp: true

enable_rtmp: true

enable_hls: true

执行该命令后，ZLMediaKit将从rtmp://127.0.0.1:1935/test/video中获取源视频，并从ZLMediaKit配置文件中规定的端口地址推流出去，rtmp地址为rtmp://127.0.0.1:1935/live/test, rtsp的地址是rtsp://127.0.0.1:8554/live/test

三、推流

1、从摄像头推流命令:

1) gstreamer推流：gst-launch-1.0 v4l2src device=/dev/video0 ! 'video/x-raw, width=1280, height=720, framerate=10/1' ! queue ! videoconvert ! x264enc ! h264parse ! flvmux ! rtmpsink location=rtmp://127.0.0.1:1935/test/video

2) ffmpeg推流：ffmpeg -re -f video4linux2 -s 1280x720 -i /dev/video0 -vcodec libx264 -f flv -y rtmp://127.0.0.1/test/video

2、从文件推流命令:

1) gstreamer推流：gst-launch-1.0 filesrc location=xxx.mp4 ! qtdemux name=d d.video_0 ! h264parse ! flvmux ! rtmpsink location=rtmp://127.0.0.1:1935/test/video

2) ffmpeg推流： ffmpeg -re -stream_loop -1 -i xxx.mp4 -vcodec copy -acodec copy -f flv -y rtmp://127.0.0.1:1935/test/video

本文福利， C++音视频学习资料包、技术视频，内容包括（音视频开发，面试题，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，srs）↓↓↓↓↓↓见下面↓↓文章底部点击领取↓↓

四、播放

gstreamer播放：gst-launch-1.0 rtspsrc location=rtsp://127.0.0.1:8554/live/test protocols=4 ! rtph264depay ! h264parse ! avdec_h264 ! videoconvert ! xvimagesink

ffplay播放：ffplay -i rtsp://127.0.0.1:8554/live/test

五、在浏览器中播放

在浏览器中播放需要用到video.js和videojs-contrib-hls这两个插件，而这两个插件需要npm安装。由于对前端的技术不熟悉，一开始面对nodejs、npm、vue等东西一脸蒙圈，还下载了video.js和http-streaming源码试图编译:<(。折腾了好久才把这两个插件装上去。

1、安装nodejs和npm

sudo apt install nodejs npm

输入 npm -v查看到版本号，说明npm正常安装

2、安装 cnpm(淘宝镜像npm)

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装videojs和videojs-contrib-hls

进入到ZLMediaKit编译后的www文件夹，一般是 ZLMediaKit/release/linux/Debug/www

cnpm install --save video.js

cnpm install --save videojs-contrib-hls

执行完上面两条命令后，会在www目录下新增一个node_modules文件夹，里面包含了npm安装的以上两个模块。如果用npm install -g video.js，则会将video.js安装到npm的全局模块目录下（一般是/usr/local/lib/node_modules）。

4、新建一个videotest.html页面用于在浏览器显示，内容如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>前端播放m3u8格式视频</title>
 <!-- 这个是videojs的CDN网站，这里用本地的video.js，所以注释掉以下几行 -->
 <!--https://www.bootcdn.cn/video.js/ -->
 <!-- <link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.19.0/alt/video-js-cdn.css" rel="stylesheet"> -->
 <!-- <script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.19.0/alt/video.core.min.js"></script> -->
 <!--https://www.bootcdn.cn/videojs-contrib-hls/-->
 <!-- <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script> -->
 
  <link href="/node_modules/video.js/dist/video-js.min.css" rel="stylesheet">
  <script src="/node_modules/video.js/dist/video.min.js" charset="utf-8"></script>
  <script src="/node_modules/videojs-contrib-hls/dist/videojs-contrib-hls.min.js"></script>
</head>
 
<body>
 <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'> 
 <!-- <source id="source" src="https://hqcrm.oss-cn-shenzhen.aliyuncs.com/cloudRecord/44a8cc12038c464f96ad204b1981ee05/3ccd283e9d42022539df549425c11d11_255547796.m3u8" type="application/x-mpegURL"> -->
  <source id="source" src="/live/test/hls.m3u8" type="application/x-mpegURL">
 </video>
</body>
 
<script> 
 // videojs 简单使用 
 var myVideo = videojs('myVideo',{
 bigPlayButton : true, 
 textTrackDisplay : false, 
 posterImage: false,
 errorDisplay : false,
 })
 myVideo.play() // 视频播放
 myVideo.pause() // 视频暂停
</script>
 
</html>