ZLMediaKit视频推流和播放步骤

LiveWeb视频管理平台

于 2023-10-23 14:38:13 发布

阅读量1.2k

点赞数

文章标签：音视频 webrtc web播放器网络协议 websocket

本文链接：https://blog.csdn.net/xiehuanbin/article/details/133989755

版权

一、首先要开启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，就可以看到正在推送的视频流了。