ZLMediaKit视频推流和播放步骤

柔光的暖阳◎ 2024-02-21 11:08 106阅读 0赞

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