---

前言

业务场景是第三方厂家提供视频流（RTMP,RTSP,FLV格式），具体是什么格式也不清楚，因为设备拿回去了，同事说他之前拿他们的设备整合过，是FLV格式的，然后就开整。我们项目使用的是VUE,所以就想按这个方向去整。作为国家一级复制粘贴工程师，就开始疯狂百度，一开始是想先整合RTMP流的视频播放，网上都是使用vue-video-play，代码看上去也挺简单的，就是整合不起来。找了一些在线的rtmp流地址，一个都不能用，就借助ffmpeg自己生成RTMP流测试。

一、smart_rtmpd

因为RTMP、RTSP还需要一个服务器，网上有用nginx的，我觉得麻烦还要拿公司的环境去整，就用了smart_rtmpd。
下载的话，直接百度也行，去github上找也有，地址：https://github.com/superconvert/smart_rtmpd。
下载好后，唯一要做的是修改一下它的配置文件config.xml的ip地址。

打开运行软件，启动后就是这样子了

一个简单的RTMP服务器就搭建好了

二、ffmpeg

再下载一个ffmpeg，官网地址：http://www.ffmpeg.org/download.html
我只是测试使用，所以下载的是windows版本

我也不知道这些包有啥区别，就下载了最大那个，只要是windows的就行，直接解压后就是下面这个样子了

接着要配置一下环境变量

调用命令行（windows+R输入cmd）输入“ffmpeg –version”，如果出现如下说明配置成功。

到此ffmpeg的安装就完成了。

接着就借助ffmpeg，将本地的一个mp4文件转换成一个RTMP流数据（ffmpeg是命令式的，之前我还以为是客户端就可以生成使用了）
使用命令

ffmpeg.exe -re -i D:\ffmpeg\test.mp4 -f flv -c copy -flvflags no_duration_filesize rtmp://192.168.1.147:1935/live/123

正常推送成功之后是这样子的

这样子我们就生成了一个地址为：rtmp://192.168.1.147:1935/live/123的测试流，然后我们借助VLC Media Player播放器播放这个流

三、VLC Media Player

这个工具直接百度下载就行

点击媒体->流->网络，注意红框框的要选择 “播放”选项，不是“串流”


到这我们的RTMP流的准备就完成了。不过的是我用vue-video-play整合不进vue，打死都不会播放。后面再研究一下，是不是用MP4转RTMP的时候有问题。

后面同事说厂家也会提供flv格式的流地址。然后就弄vue+flvjs的整合了
伏笔：使用命令

ffmpeg.exe -re -i D:\ffmpeg\test.mp4 -c:v copy -c:a copy D:\ffmpeg\demo.flv

生成一个flv文件，然后我丢到了我们公司的ftp服务器，模拟一个远程flv地址：http://192.168.1.145:8080/test/demo.flv
网上我也找到一个，不知道哪个兄弟放上去的
http://1011.hlsplay.aodianyun.com/demo/game.flv，它这个比较像真实业务场景的flv，直播式的，不会有时长那种，我用ffmpeg生成的是会有个时长的

四、Vue+flv.js

vue代码引入flv.js

import flvjs from 'flv.js'

npm install一下，就成功引入组件库了

<template>
  <div>
	<video id="videoElement" controls autoplay muted width="300px" height="200px">    
    </video>
	<button @click="play">播放</button>
  </div>
</template>

<script>
import flvjs from 'flv.js'
export default {
  data () {
    return {
	  flvPlayer:null
    }
  },
   mounted() {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
		  isLive: true,
		  hasAudio: false,
          url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv'
        });
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
		this.flvPlayer.play();
      }
    },
    methods:{
      play () {
        this.flvPlayer.play();
      }
    }
}
</script>

代码的话根据自己的业务场景再调了，我也是照着别人的整的，自己业务上的代码就不贴了

认真看这两个视频，前面说的，两个flv的不同处，一个有时长，一个没时长，第一个可能是使用了更好的技术弄的，但我不知道，哈哈！

总结

搞定，下班，等厂家设备拿过来再联调一下，但一般是不成功。还是得研究一下RTMP那种方式，网上查到是jsmpeg.js + ffmpeg + websocket + node这种方式，之前上家公司也有做过，问了前同事，他也是这么处理的，网上也有解决流程
https://juejin.cn/post/6873691566436253710#heading-6
真难搞，我只是一个小小的Java开发，奈何公司就2个前端，没办法，只能自己上手了
2021年6月28日17:30:20 准备下班吃饭