Android RTSP流编码保存MP4

近期项目中有需求将终端设备中的摄像头视频进行本地存储，并支持H5实时拉流实时播放的功能；本人Java后端，开始使用javacv进行了代码实现，但是效果及稳定性不是很理想，毕竟对多媒体处理没有啥技术积累；故开始寻找开源开包即用的项目，最终选择了Monibuca，配置简单，多平台支持，资源消耗也小；轻松实现了拉取RTSP视频流，提供H5播放，并支持分片录制视频功能。实际使用过程如下，记录备份一下

Monibuca v4

下载地址

页面右上角按照使用平台进行下载

安装Monibuca

我这里以linux-arm服务器作为例，下载对应的m7s_linux_arm64.tar.gz包，并上传至服务器opt/m7s目录，进入目录解压文件

# 建立文件夹 m7s
mkdir m7s
# 将m7s_linux_arm64.tar.gz 包上传至m7s目录下
# 进入m7s目录后进行解压
tar -zxvf m7s_linux_arm64.tar.gz

修改配置文件

文件解压后解压目录下找到config.yml进行按需修改，全局配置参考

# 支持零配置启动，即无需填写配置默认启用所有的插件。
# 只需要填写需要修改的配置项即可。不需要将所有的配置都填写进来！！。
# 插件配置参考各个插件的文档
# 插件都有一个enable配置，如果为false则不启用该插件，默认为true即不需要配置。

llhls:
  enable: false
hls:
  enable: false
monitor:
  enable: false

# 录制插件
record:
  subscribe: # 格式参考全局配置
  mp4:  # s使用MP4格式，便于后期直接使用h5浏览器中的video即可播放
      ext: .mp4
      path: /opt/media-handle/media-backup/mp4  #录制文件存储目录
      autorecord: true
      filter: ""
      fragment: 60s #录制文件分片大小，60秒存一个文件

rtsp:
  enable: true # 如果disableal1false的话，这个可以不需要写
  pullprotocol: tcp
  pull:
    pullonstart: #这里设置了启动自动拉流
      live/ipad: rtsp://admin:admin@192.168.11.48:8554/live
      live/iphone: rtsp://admin:admin@192.168.11.48:8554/live  #live/iphone 为后续使用flv进行直播的地址(streamPath)
    pullonsub: # I#HA
      rtsp/ipad: rtsp://admin:admin@192.168.11.48:8554/live
      rtsp/iphone: rtsp://admin:admin@192.168.11.48:8554/live

启动Monibuca

这里为了方便，我写启动脚本start-m7s.sh,注意这个文件放在解压路径下和config.ymal文件同目录

#!/bin/bash

# 检查服务是否已经启动
if pgrep -f "./m7s" >/dev/null; then
    echo "Media handle service is already running. Stopping the existing service..."
    pkill -f "./m7s"
    sleep 5
fi

# 启动新的服务
nohup ./m7s > m7s.log 2>&1 &
echo "Media handle service started."

使用脚本的时候注意修改sh文件权限

执行启动脚本

#启动
./start-m7s.sh

 项目启动后默认使用的8080端口，这个端口可根据实际需求在config.yaml文件中进行修改；浏览器输入http:[IP]:8080即可看到Monibuca接口页面，页面如下

启动失败： 若启动失败可以进入日志目录中查看日志明细信息，解压目录下有一个logs的文件夹，查看相关文件即可

cat *.log

视频试试查看

我再vue中使用西瓜播放器中的flv插件进行播放，前端代码如下

依赖引入

"xgplayer": "^3.0.11",
"xgplayer-flv": "^3.0.11", 
"xgplayer-hls": "^3.0.11"

在此简单封装了一下播放插件flv-player.vue

<template>
    <div id="flv-player"></div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue';
import Player from 'xgplayer';
import FlvPlugin from 'xgplayer-flv'
import 'xgplayer/dist/index.min.css';
const props = defineProps({
    src: String,
    isLive: {
        type: Boolean,
        default: true,
    }
});
const player = ref(null);
function initPlayer() {
    player.value = new Player({
        id: 'flv-player',
        autoplay: true,
        autoplayMuted: true, //自动播放
        isLive: props.isLive,
        url: props.src,
        height: '100%',
        width: '100%',
        playbackRate: [1],
        defaultPlaybackRate: 1,
        cors: true,
        plugins: [FlvPlugin], // flv播放插件
        flv: {
            retryCount: 3, // 重试 3 次，默认值
            retryDelay: 1000, // 每次重试间隔 1 秒，默认值
            loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
            targetLatency: 5, // 直播目标延迟，默认 10 秒
            maxLatency:  10, // 直播允许的最大延迟，默认 20 秒
            disconnectTime: 0, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
            fetchOptions: {
                // 该参数会透传给 fetch，默认值为 undefined
                mode: 'cors'
            }
        }
    });
}
onMounted(() => {
    initPlayer();
})

</script>

<style scoped>
#flv-player {
    flex: auto;
}
</style>

播放组件引入

<div class="player-container">
     <FlvPlayer v-if="showFlv" :src="flvUrl" />
</div>

//播放地址
const flvUrl = ref("http://192.168.11.51:8080/hdl/live/iphone");

播放地址重点说明一下使用的，需在streamPath前面添加/hdl，上面例子中手机端视频拉流定义了streamPath为live/iPhone 所完整的播放地址为http://192.168.11.51:8080/hdl/live/iphone

注意：Monibuca的功能很多，可以去官方文档中按照文档进行使用，我这里使用随手记录了一下我的使用过程，因以上配置已经满足了我们的基础要求，更多的使用方式期待更多的小伙伴使用分享。