当前位置: 首页 > 工具软件 > ZLMediaKit > 使用案例 >

ZLMediaKit视频推流和播放步骤

怀洛华
2023-12-01

记录一下使用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

四、播放
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>

然后在浏览器中输入 http://localhost:8080/videotest.html,就可以看到正在推送的视频流了。

 类似资料: