前言

因为浏览器不再支持Flash插件，且支持的360浏览器很多广告弹窗，而且导师让换，所以决定转化视频格式，这里是将原来的rtmp转为http-flv格式的视频流用于vue3+ts构建的web播放。

一、准备

centOS服务器
nginx
nginx-http-flv-module github上有，b站开源
rtmp视频流我这里是别的服务器使用ffmpeg推过来的
同时我的nginx之前还配置了nginx-rtmp-module，不过不影响

二、使用

1. 下载及安装

首先安装nginx和nginx-http-flv-module 模块，这里不将了，值得注意的是nginx的相关依赖项

yum -y install pcre pcre-devel
yum -y install  openssl openssl-devel
yum -y install  zlib zlib-devel

解压nginx-http-flv-module到/usr/local/nginx路径下，如图

2.编译

在nginx目录下确保有configure文件，然后执行

./configure --prefix=/usr/local/nginx  --add-module=/usr/local/nginx/nginx-http-flv-module
make && make install

之后进行最重要的步骤，修改nginx.conf文件
路径为nginx/conf/nginx.conf

这里是我用到的部分修改内容：

user  root;
worker_processes  1;rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;rtmp {server {listen 1935;application myapp {live on;gop_cache on;  #打开 GOP 缓存，减少首屏等待时间}application live {live on;gop_cache on;}        }
}http {include       mime.types;default_type  application/octet-stream;server {listen       80;server_name  这里是服务器IP;location /stat {rtmp_stat all;rtmp_stat_stylesheet stat.xsl;}location / {proxy_pass 设置代理的IP;}#重点location /live {flv_live on;}location /flv {add_header 'Access-Control-Allow-Origin' '*';flv_live on;chunked_transfer_encoding on;}}   }

启动nginx命令在nginx/sbin路径下 ./nginx或./nginx -s start
停止nginx命令在nginx/sbin路径下 ./nginx -s stop
重新加载配置命令在nginx/sbin路径下 ./nginx -s reload

3.web设置

引入flv.js

<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>

我这里的web页面用法如下，在Vue3+ts中

onMounted(() =>{if(flvjs.isSupported()){//获取video标签let roomVideo = document.getElementById('roomVideo') as HTMLMediaElement;//实例化一个flv视频播放器const flvPlayerRoom = flvjs.createPlayer({type: 'flv',isLive: true,hasAudio: false,url: 'http://IP地址/flv?port=1935&app=live&stream=room'});flvPlayerRoom.attachMediaElement(roomVideo);flvPlayerRoom.load();flvPlayerRoom.play();

总结

这是21年末做的，22年初进行vue3+ts升级后简单修改了下，目的是实现监控视频的播放。支持rtmp流直接播放的flash已隐退江湖，所以这块我的思路是对rtmp进行转化处理，可以应用且要忙别的项目，就没有找更好的改进办法。

RTMP转HTTP-FLV视频流web端应用流程记录相关推荐

海康RTSP流转RTMP并推送至Web端展示
最近帮着老师做项目的时候碰到一个难题,将海康摄像头的影像实时传输到前端页面进行展示.Google查了两天,终于有些眉目,记录一下经验. 大致需要经过以下几个步骤: 获取海康摄像头的视频流(基于RTSP ...
网络摄像头RTSP视频流WEB端实时播放实现方案
IPC视频流怎么实时在WEB浏览器播放,视频流格式是RTSP. 下面我整理了自己实现的方案以及网上看到的一些方案一.FFmpeg + nginx 将转 hls 通过 video.js 在支持h5浏览 ...
小程序和 web 功能对比_小程序官方推出的Kbone，是如何解决Web 端和小程序同构痛点的？...
小程序作为一种新兴地连接用户与服务的方式,相信大家都或多或少接触过.对于开发者来说,它是一种类似 Web 但又不同于 Web 的开发模式,它提供了一套自定义的 API 和文件组织方式,这无疑带给开发者 ...
1688开放平台WEB端授权教程
一.WEB授权方式: 对于WEB授权开发方式而言,您的app不会在阿里巴巴应用市场售卖,那么您需要完成完整的授权过程,请参考如下授权流程二.WEB端授权流程详解: 授权及使用授权时序图如果已经授权 ...
使用JavaCV实现海康rtsp转rtmp实现无插件web端直播（无需转码，低资源消耗）
使用JavaCV实现海康rtsp转rtmp实现无插件web端直播(无需转码,低资源消耗) 目录结构添加依赖,编写配置文件创建Bean 创建缓存Cache 修改启动类拉流.推流.转封装定时任务T ...
监控物联网项目：web、flv视频流、websocket、ESP32
在网上接了第一个项目,在此记录...... 目录项目需求前端浏览两个后端 python后端 nginx-flv+ffmpeg后端总结项目需求手机浏览器,远程查看实时监控视频.按钮控制电机. ...
Web端解码视频流：（Part1 纯Java Script 解码[不建议大家这样做，因为普适性不强]）
最近在做Web端解码实时视频流的工作,由于一开始对视频直播技术一无所知,耗费了很大力气去调研,为了方便后来者入门,特写此博客. 1.基础知识所谓的FLV.AVI.MP4等视频文件与H.264.H.2 ...
浏览器低延时播放监控摄像头RTSP海康大华硬盘录像机NVR视频（EasyNVR播放FLV视频流）
背景描述 EasyNVR的使用者应该都是清楚的知道,EasyNVR一个强大的功能就是可以进行全平台的无插件直播.主要原因在于rtsp协议的视频流(默认是需要插件才可以播放的)经由EasyNVR处理后可 ...
【rtsp流在Web端实时播放】使用 VUE + webrtc-steamer
rtsp流-视频播放操作系统:Win10 vue版本:vue2 一. 方法必须将rtsp通过播放器插件/服务器/- 转换为 flv/webrtc/- 最新在线可用rtsp码流地址(可用flv播放 ...

RTMP转HTTP-FLV视频流web端应用流程记录

文章目录

前言