前言

网页端播放视频流或者直播流，一般使用rtmp ， flv，hls（即m3u8）形式。然而html5的video标签只支持mp4、webm、ogg三种格式无法满足。比较三者hls延时和画质都比较差，首选前两者。但rtmp和flv有个缺点依赖Flash才能播放，谷歌浏览器早在2021就已经停止支持Flash使用了。经过多款视频播放插件的对比选用Flv.js.

Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。

准备

1. nginx-rtmp配置

下载win版本nginx-rtmp反向代理服务器，搭建rtmp流媒体服务

注意：结尾有直接配置完成的nginx-rtmp，可供下载

配置nginx.conf文件：

worker_processes  1;
events {worker_connections  1024;
}
# 添加RTMP服务
rtmp {server {listen 1935; # 监听端口chunk_size 4000;application live {live on;gop_cache on;}}
}
# HTTP服务
http {include       mime.types;default_type  application/octet-stream;#access_log  logs/access.log  main;server {listen       8080; # 监听端口location /live {flv_live on; #打开HTTP播放FLV直播流功能chunked_transfer_encoding on; #支持'Transfer-Encoding: chunked'方式回复add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头# add_header Access-Control-Allow-Headers X-Requested-With;# add_header Access-Control-Allow-Methods GET,POST,OPTIONS;# add_header 'Cache-Control' 'no-cache';}location /stat.xsl {root html;}location /stat {rtmp_stat all;rtmp_stat_stylesheet stat.xsl;}location / {root html;}}
}

在nginx安装路径下启动：start nginx

在浏览器中输入127.0.0.1:8080，启动成功啦！

2. ffmpeg推流

下载ffmpeg工具

使用ffmpeg将大华摄像头视频流推送到，rtmp流媒体服务地址

流媒体URL:rtmp://127.0.0.1:1935/live/

流名称： show

-i rtsp://admin:admin123@192.168.7.25:554 -c:v libx264 -x265-params profile=high:level=3.0 -an -f flv rtmp://127.0.0.1:1935/live/show

3. flv-js拉流

使用flv-js插件实现在网页进行视频播放

使用npm下载flv.js：

npm install --save flv.js

创建个简单demo：

<!DOCTYPE html>
<html>
<head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><title>flv.js demo</title>
</head>
<body>
<div class="mainContainer"><video name="videoElement" class="centeredVideo" id="videoElement" controls width="1024" height="576" muted>Your browser is too old which doesn't support HTML5 video.</video>
</div>
<script src="../dist/flv.min.js"></script>
<script>if (flvjs.isSupported()) {startVideo()}function startVideo(){var videoElement = document.getElementById('videoElement');var flvPlayer = flvjs.createPlayer({type: 'flv',enableWorker: true,     //浏览器端开启flv.js的worker,多进程运行flv.jsisLive: true,           //直播模式hasAudio: false,        //关闭音频hasVideo: true,// cors: true,stashInitialSize: 128,enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。url:'http://127.0.0.1:8080/live?port=1935&app=live&stream=show'});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();}videoElement.addEventListener('click', function(){alert( '是否支持点播视频：' + flvjs.getFeatureList().mseFlvPlayback + ' 是否支持httpflv直播流：' + flvjs.getFeatureList().mseLiveFlvPlayback )})function destoryVideo(){flvPlayer.pause();flvPlayer.unload();flvPlayer.detachMediaElement();flvPlayer.destroy();flvPlayer = null;}function reloadVideo(){destoryVideo()startVideo()}
</script>
</body>
</html>

运行前端demo，使用flv.js进行拉流，播放成功！

结尾

nginx-rtmp文件：下载

摄像头视频推流nginx+ffmpeg+flv相关推荐

摄像头视频推流python_摄像头视频推流装置及方法与流程
本发明涉及视频推流技术领域,尤其涉及一种摄像头视频推流装置及方法. 背景技术: 在机器人领域,USB摄像头使用范围很广泛.USB摄像头安装于机器人本体,其采集的视频流需要推送到上位机或者云端. 对于l ...
摄像头视频推流python_python中用FFmpeg向rtmp服务器推流，实现摄像头直播
一.目的从OpenCV中读取帧后,一方面对帧进行其他处理,同时把获取的帧推送到rtmp服务器实现直播. 二.docker中搭建rtmp服务器本文忽略如何安装docker,docker的命令等. ( ...
nginx+ffmpeg+flv实现rtsp转rtmp和flv推流（同时拉流）实现浏览器展示监控
介绍因本人公司业务需要浏览器展示海康威视监控视频,所以在此记录一下.以防下次使用不记得.此监控视频解决方案有10s左右的延迟,如果公司没有强制要求还是可以使用的.如果介意10s延迟的话可以使用第三方 ...
基于imx6ull打造流媒体视频监控：ffmpeg + nginx + rtmp
0.平台简介项目描述硬件平台 100ask_imx6ull_pro开发板 Linux内核 Linux 4.9.88 Buildroot版本 Buildroot 2019.02 FFmpeg版本 ...
一条命令实现树莓派摄像头直播推流哔哩哔哩
1 背景介绍昨天,有师弟问我怎么实时采集视频并推流到直播平台,我告诉他这个很简单,于是给他推荐了一块创客神器小电脑--树莓派,讲了半个小时Raspbian Linux入门操作,然后让他先自己尝试摸索 ...
[转]使用FFmpeg将视频推流到nginx，通过vlc拉流播放（通过命令的方式）
安装完FFmpeg,nginx,nginx-rtmp-module,vlc后就可以进行推流.拉流测试了.博主的nginx安装在VMWare的Ubuntu中(安装方法可以参考https://blog.c ...
【流媒体服务】本地视频推流、转码、拉流、直播综合应用（五）：【1】VLC+FFMPEG+Nginx实现RTSP到RTMP网页直播
文章目录前言一.前几章节回顾二.操作步骤 1.准备本地视频 2.VLC:获取RTSP视频流 3.FFMPEG:转码推流服务准备 4.Nginx:网站服务准备 5.FFMPEG推流:rtsp转rt ...
项目实战 | 基于RK3566开发板实现USB摄像头推流（ffmpeg+nginx）
文章目录环境说明一.摄像头推流架构 1. 什么是推流 2. 最简单的推流架构 3. 最简单的推流架构实现二.USB摄像头捕获功能实现 1. 硬件测试 1.1. video设备节点 1.2. 摄像 ...
推流拉流RMTP方案:Nginx+ffmpeg/obs+vlc/h5
RMTP方案:Nginx+ffmpeg/obs+vlc/h5 服务器安装 1.依赖 sudo apt-get update sudo apt-get install libpcre3 libpcre ...

摄像头视频推流nginx+ffmpeg+flv

前言

准备

1. nginx-rtmp配置

2. ffmpeg推流

3. flv-js拉流

结尾

摄像头视频推流nginx+ffmpeg+flv相关推荐

最新文章

热门文章