3种ffmpeg-web端视频直播推流方案

news2025/2/23 11:59:22

ffmpeg-web端视频直播推流方案

记录了三种 ffmpeg 工具进行推流的方法，并在web端实现直播效果。

一. node-media-server + ffmpeg 推流rtmp

安装node-media-server依赖,新建app.js运行

npm install node-media-server -g

const  NodeMediaServer  = require('node-media-server');
const config = {
    rtmp: {
        port: 1935,
        chunk_size: 60000,
        gop_cache: true,
        ping: 60,
        ping_timeout: 30
    },
    http: {
        port: 8000,
        allow_origin: '*'
    }
};
var nms = new NodeMediaServer(config);
nms.run();

node app.js

执行ffmpeg推流

官网下载ffmpeg并配置把bin目录添加到环境变量
ffmpeg -version 查看版本
mpeg -list_devices true -f dshow -i dummy 查看可用以音视频设备

使用本地摄像头推流

ffmpeg -f dshow -i video="Integrated Camera":audio="麦克风阵列 (Synaptics SmartAudio HD)" -vcodec libx264 -acodec copy -preset:v ultrafast -tune:v zerolatency -f flv "rtmp://192.168.20.107:1935/live/home"

使用网络摄像头推流

ffmpeg -threads 5 -i rtsp://admin:px123456@192.168.20.100:554/Streaming/Channels/101 -tune zerolatency -preset ultrafast -vcodec libx264 -threads 5 -b:v 400k -s 720x576 -r 25 -acodec libfaac -b:a 64k -f flv rtmp://192.168.20.107:1935/live/home

rtsp://{账号}:{密码}@{ip}:{端口}/根据摄像头厂牌区分

rtmp://{本地ip}:1935/live/home

本地ip地址要设置为与网络摄像头同一网段

web端HTML页面

因为各浏览器不再支持flash，需要使用flv.js插件
 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
<video id="videoElement" style="width: 80%;" controls="controls"></video>
<script>
    if (flvjs.isSupported()) {//检查flvjs能否正常使用
        var videoElement = document.getElementById('videoElement');//使用id选择器找到第二步设置的dom元素
        var flvPlayer = flvjs.createPlayer({//创建一个新的flv播放器对象
            type: 'flv',//类型flv
            url: 'http://192.168.20.107:8000/live/home.flv'//flv文件地址
        },{
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128
        });
        flvPlayer.attachMediaElement(videoElement);//将flv视频装载进video元素内
        flvPlayer.load();//载入视频
        flvPlayer.play();//自动播放
    }
</script>
</body>
</html>

【免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击788280672加群免费领取~

二. nginx + ffmpeg 推流hls

hls流延迟比较大，按官方的说法60秒内算正常！

下载安装nginx

Windows下安装方法：www.cnblogs.com/qfb620/p/55…

Linux下安装：blog.csdn.net/wenqiangluy…

配置nginx

修改配置文件：/conf/nginx.conf ，在server内添加：
 

location /hls {
	root html;
	#add_header Cache-Control no-cache;
	add_header Access-Control-Allow-Origin *;
}

修改配置文件：/conf/mime.types ，在types内添加：

application/vnd.apple.mpegurl m3u8;
application/x-mpegURL m3u8;
video/mp2t ts;

ffmpeg推流：

要在html目录下创建hls目录 
ffmpeg -i "rtsp://admin:px123456@192.168.20.100:554/Streaming/Channels/101" -vcodec libx265 -threads 5 -preset ultrafast -c copy -f hls -hls_time 5.0 -hls_list_size 1 15 D:/tool/Science/nginx-1.18.0/html/hls/test.m3u8

1. -hls_time n: 设置每片的长度，默认值为2。单位为秒
2. -hls_list_size n:设置播放列表保存的最多条目，设置为0会保存有所片信息，默认值为5
3. -hls_wrap n:设置多少片之后开始覆盖，如果设置为0则不会覆盖，默认值为0.这个选项能够避免在磁盘上存储过多的片，而且能够限制写入磁盘的最多的片的数量
4. -hls_start_number n:设置播放列表中sequence number的值为number，默认值为0

web端HTML页面

需要使用video.js插件 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>video.js</title>
    <link href="https://unpkg.com/video.js@6.11.0/dist/video-js.min.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js@6.11.0/dist/video.min.js"></script>
    <script src="https://unpkg.com/videojs-flash/dist/videojs-flash.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
  </head>
  <body>
    <video id="my-player" class="video-js" controls>
        <source src="http://localhost/hls/test.m3u8" type="application/x-mpegURL">
        <p class="vjs-no-js">
          not support
        </p>
    </video>
    <script type="text/javascript">
      var player = videojs('my-player',{
        width:400,
        heigh:200
      });
    </script>
  </body>

三. 通过webSocket发送MPEG，前端解析MPEG绘制canvas

这是我试过延迟最小的方法，0.5秒左右，但是非常耗cpu。

创建app.js，安装WebSocket等相应模块

var fs = require('fs'), http = require('http'), WebSocket = require('ws');

// console.log(process.argv)
if (process.argv.length < 3) {
	// console.log('输入正确参数');
	  process.argv[2]='supersecret';
    process.argv[3]='8081';
    process.argv[4]='8082';
// 	process.exit();
}

var stream_secret = process.argv[2];//密码
var stream_port = process.argv[3] || 8081;//ffpeng推送端口
var websocket_port = process.argv[4] || 8082;//前端websocket端口 ，比如：8082
var record_stream = false;
var totalSize = 0;

function initWebSocket(websocket_port) {
	var clientMap = new Map();//缓存，实现多个视频流同时播放的问题
	
	var socketServer = new WebSocket.Server({
		port : websocket_port,
		perMessageDeflate : false
	});
	socketServer.on('connection', function(socket, upgradeReq) {
		var url = upgradeReq.socket.remoteAddress + upgradeReq.url;
		var key = url.substr(1).split('/')[1];//key就是通过url传递过来的标识比如:(ws://127.0.0.1:8082/live3)其中live3就是这个标识，其他的流可随机生成其他的字符串
		var clients = clientMap.get(key);
		if(!clients){
			clients = new Set();
			clientMap.set(key,clients);
		}
		clients.add(socket);
		totalSize++;
		process.stdout.write("[INFO]:a new connection, the current number of connections: " + totalSize + ".\r");
		socket.on('close', function(code, message) {
			var clientSet = clientMap.get(key);
			if(clientSet){
				clientSet.delete(socket);
				totalSize--;
				if(clientSet.size == 0){
					clientMap.delete(key);
				}
			}
			process.stdout.write("[INFO]:close a connection, the current number of connections:" + totalSize + ".\r");
		});
	});

	socketServer.broadcast = function(data, theme) {
		var clients = clientMap.get(theme);
		if (clients) {
			clients.forEach(function (client, set) {
				if(client.readyState === WebSocket.OPEN){
					client.send(data);
				}
			});
		}
	};
	return socketServer;
}

function initHttp(stream_port, stream_secret, record_stream, socketServer) {
	var streamServer = http.createServer(
			function(request, response) {
				var params = request.url.substr(1).split('/');
				if (params.length != 2) {
					process.stdout.write("\n[ERROR]:Incorrect parameters, enter password and push theme");
					response.end();
				}
				if (params[0] !== stream_secret) {
					process.stdout.write("\n[ERROR]:Password error: "+request.socket.remoteAddress+":"+request.socket.remotePort+"");
					response.end();
				}
				response.connection.setTimeout(0);
				request.on('data', function(data) {
					socketServer.broadcast(data, params[1]);
					if (request.socket.recording) {
						request.socket.recording.write(data);
					}
				});
				request.on('end', function() {
					process.stdout.write("\n[INFO]:close request");
					if (request.socket.recording) {
						request.socket.recording.close();
					}
				});
				if (record_stream) {
					var path = 'recordings/' + Date.now() + '.ts';
					request.socket.recording = fs.createWriteStream(path);
				}
			}).listen(stream_port);
			console.log('started rtsp WebSocket service in secret is [%s], service port is [%s], ws port is [%s].',stream_secret,stream_port,websocket_port);
}

initHttp(stream_port, stream_secret, record_stream,
		initWebSocket(websocket_port));

执行ffmpeg(封装run.js)

我把ffmpeg命令封装成js文件，以方便执行多条命令。 
require('shelljs/global');

var version = exec('node --version', {silent:true}).output;

exec(`ffmpeg -i "rtsp://admin:px123456@192.168.3.21:554/Streaming/Channels/101" -q 0 -f mpegts -codec:v mpeg1video -s 1680x945 http://127.0.0.1:8081/supersecret/live1`, function(status, output) {
  console.log('Exit status:', status);
  console.log('Program output:', output);
});
exec(`ffmpeg -i "rtsp://admin:px123456@192.168.3.21:554/Streaming/Channels/101" -q 0 -f mpegts -codec:v mpeg1video -s 1680x945 http://127.0.0.1:8081/supersecret/live2`, function(status, output) {
  console.log('Exit status:', status);
  console.log('Program output:', output);
});
exec(`ffmpeg -i "rtsp://admin:px123456@192.168.3.21:554/Streaming/Channels/101" -q 0 -f mpegts -codec:v mpeg1video -s 1680x945 http://127.0.0.1:8081/supersecret/live3`, function(status, output) {
  console.log('Exit status:', status);
  console.log('Program output:', output);
});
exec(`ffmpeg -i "rtsp://admin:px123456@192.168.3.21:554/Streaming/Channels/101" -q 0 -f mpegts -codec:v mpeg1video -s 1680x945 http://127.0.0.1:8081/supersecret/live4`, function(status, output) {
  console.log('Exit status:', status);
  console.log('Program output:', output);
});

创建index.html

需要使用 jsmpeg.js插件
页面要运行到服务器中! 
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		html, body {
			text-align: center;
		}
	</style>
	
</head>
<body>
	<canvas id="video-canvas"></canvas>
	<canvas id="video-canvas1"></canvas>
	<canvas id="video-canvas2"></canvas>
	<canvas id="video-canvas3"></canvas>
	
	<script type="text/javascript" src="jsmpeg.min.js"></script>
	<script type="text/javascript">
		var canvas = document.getElementById('video-canvas');
		var url = 'ws://ip:8082/live1';
		var player = new JSMpeg.Player(url, {
		    canvas: canvas,
		});
		console.log(player)
		
		var canvas1 = document.getElementById('video-canvas1');
		var url1 = 'ws://ip:8082/live2';
		var player1 = new JSMpeg.Player(url1, {canvas: canvas1});

		var canvas2 = document.getElementById('video-canvas2');
		var url2 = 'ws://ip:8082/live3';
		var player2 = new JSMpeg.Player(url2, {canvas: canvas2});

		var canvas3 = document.getElementById('video-canvas3');
		var url3 = 'ws://ip:8082/live4';
		var player3 = new JSMpeg.Player(url3, {canvas: canvas3});
		
	</script>
</body>
</html>

原文链接 3种ffmpeg-web端视频直播推流方案 - 掘金

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1391748.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CentOS将磁盘剩余空间分配到已有分区

CentOS将磁盘剩余空间分配到已有分区

CentOS将磁盘剩余空间分配到已有分区 引growpartresize2fs 引 手里有台云服务&#xff0c;之前磁盘只有60G&#xff0c;在执行SQL语句时报错No space left on device. 通过df -h查看磁盘占用情况&#xff0c;确实所剩无几了 通过云服务后端控制台升级了下配置&#xff0c;将…
阅读更多...
mysql8源码 gdb调试

mysql8源码 gdb调试

##打开一个终端窗口 ps -ef | grep mysqld ##gdb 调试mysql8进程 gdb attach 192350 ##gdb 打mysql8源码断点 (gdb) b net_read_packet (gdb) b net_serv.cc:2179 ##另外一个窗口登录mysql8 mysql -h127.0.0.1 -uroot -p ##使用select语句查询表 ##在gdb终端窗口打印缓存获…
阅读更多...
数据分析 | 选择最佳的Stacking堆叠模型、单层结构双层结构 | Python代码

数据分析 | 选择最佳的Stacking堆叠模型、单层结构双层结构 | Python代码

目录 一、单层结构 二、 双层结构 三、运行结果 一、单层Stacking结构&#xff0c;基学习器为&#xff1a;朴素贝叶斯、随即下降、随机森林、决策树、AdaBoost、GBDT、XGBoost&#xff0c;7个任选3个作为基学习器组合&#xff0c;Meta函数固定为MLP。 import itertools impo…
阅读更多...
IDEA 2022.3.3 安装教程

IDEA 2022.3.3 安装教程

1.下载2022.3.3版本IDEA 链接&#xff1a;https://pan.baidu.com/s/1z-Yfl7fWHgqz8SQLn2-u0g?pwd949u 提取码&#xff1a;949u 2.安装 下载完成后&#xff0c;双击exe安装包&#xff0c; 点击next 3.选择方式3 4.将下面文件复制到任意位置&#xff08;不要有中文路径&…
阅读更多...
跟着cherno手搓游戏引擎【7】Input轮询

跟着cherno手搓游戏引擎【7】Input轮询

在引擎程序中任何时间&#xff0c;任何位置都能知道按键是否按下、鼠标的位置等等信息。 与事件系统的区别&#xff1a;事件系统是在按下时调用并传递按键状态&#xff1b;轮询是每时每刻都能获取按键状态 创建基类&#xff1a; YOTO/Input.h&#xff1a;名如其意 #pragma …
阅读更多...
大模型背景下计算机视觉年终思考小结（一）

大模型背景下计算机视觉年终思考小结（一）

1. 引言 在过去的十年里&#xff0c;出现了许多涉及计算机视觉的项目&#xff0c;举例如下&#xff1a; 使用射线图像和其他医学图像领域的医学诊断应用使用卫星图像分析建筑物和土地利用率相关应用各种环境下的目标检测和跟踪&#xff0c;如交通流统计、自然环境垃圾检测估计…
阅读更多...
《ARM Linux内核源码剖析》读书笔记——0号进程(init_task)的创建时机

《ARM Linux内核源码剖析》读书笔记——0号进程(init_task)的创建时机

最近在读《ARM Linux内核源码剖析》&#xff0c;一直没有看到0号进程&#xff08;init_task进程)在哪里创建的。直到看到下面这篇文章才发现书中漏掉了set_task_stack_end_magic(&init_task)这行代码。 下面这篇文章提到&#xff1a;start_kernel()上来就会运行 set_task_…
阅读更多...
Ubuntu 22.04 基础环境搭建

Ubuntu 22.04 基础环境搭建

这是Ubuntu软件安装系列的第一篇&#xff0c;我们来聊聊基础环境搭建。 这个专栏主要讲一些常见服务端软件的安装和配置&#xff0c;当然也包括对软件架构和作用的分析&#xff0c;以及使用的场景的介绍。 注意我们这里使用的Ubuntu的版本是22.04&#xff0c;基本上大厂的云服…
阅读更多...
vue3+threejs可视化项目——引入threejs加载钢铁侠模型（第二步）

vue3+threejs可视化项目——引入threejs加载钢铁侠模型（第二步）

文章目录 ⭐前言&#x1f496;vue3系列相关文章&#x1f496;threejs系列相关文章 ⭐引入threejs&#x1f496;初始化一个场景scene&#x1f496; 加载模型&#x1f496; 加载钢铁侠模型 ⭐总结⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享 vue3threejs可视…
阅读更多...
Mysql root 密码重置详解

Mysql root 密码重置详解

文章目录 1 概述1.1 前言1.2 mysql 版本查询 2 windows 操作系统2.1 mysql 8 及以上版本2.1.1 关闭 mysql 服务2.1.2 通过无认证方式启动 mysql2.1.3 新开窗口&#xff0c;登录 mysql&#xff0c;重置密码 1 概述 1.1 前言 不同的操作系统&#xff08;如&#xff1a;windows、…
阅读更多...
vue2使用 element表格展开功能渲染子表格

vue2使用 element表格展开功能渲染子表格

默认样式 修改后 样式2 <el-table :data"needDataFollow" border style"width: 100%"><el-table-column align"center" label"序号" type"index" width"80" /><el-table-column align"cent…
阅读更多...
AI与区块链的完美交融创新时代的双重引擎

AI与区块链的完美交融创新时代的双重引擎

每个投资者都梦想早日进入“下一个亚马逊、苹果或比特币”&#xff0c;以追求代际财富。 然而&#xff0c;这些机会很少而且相距甚远&#xff0c;而且正如每一个虔诚的加密货币本地人都知道的那样&#xff0c;这条道路上常常布满了失败的项目、失信的承诺和波动。 但在 2023 …
阅读更多...
5个99%的人可能不知道的实用程序库!

5个99%的人可能不知道的实用程序库!

前言 作为一名前端开发者,这些 JavaScript 库极大地提高了我的工作效率,如格式化日期、处理 URL 参数和调试移动网页。朋友们,我想和你们分享这些库。 1. 使用 “Day.js” 来格式化日期和时间 链接 作为开发者,我已经厌倦了在 JavaScript 中操作日期和时间,因为它太麻烦了。…
阅读更多...
【SQL】SQL语法小结

【SQL】SQL语法小结

相关资料 参考链接1&#xff1a;SQL 语法&#xff08;超级详细&#xff09; 参考链接2&#xff1a;史上超强最常用SQL语句大全 SQL练习网站&#xff1a;CSDN、牛客、LeetCode、LintCode SQL相关视频&#xff1a; 推荐书籍&#xff1a; 文章目录 数据分析对SQL的要求SQL语法简介…
阅读更多...
Android Activity的启动流程（Android-10）

Android Activity的启动流程（Android-10）

前言 在Android开发中&#xff0c;我们经常会用到startActivity(Intent)方法&#xff0c;但是你知道startActivity(Intent)后Activity的启动流程吗&#xff1f;今天就专门讲一下最基础的startActivity(Intent)看一下Activity的启动流程&#xff0c;同时由于Launcher的启动后续…
阅读更多...
竞赛保研 多目标跟踪算法 实时检测 - opencv 深度学习 机器视觉

竞赛保研 多目标跟踪算法 实时检测 - opencv 深度学习 机器视觉

文章目录 0 前言2 先上成果3 多目标跟踪的两种方法3.1 方法13.2 方法2 4 Tracking By Detecting的跟踪过程4.1 存在的问题4.2 基于轨迹预测的跟踪方式 5 训练代码6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习多目标跟踪 …
阅读更多...
工业平板定制方案_基于联发科、紫光展锐平台的工业平板电脑方案

工业平板定制方案_基于联发科、紫光展锐平台的工业平板电脑方案

工业平板主板采用联发科MT6762平台方案&#xff0c;搭载Android 11.0操作系统&#xff0c; 主频最高2.0GHz&#xff0c;效能有大幅提升;采用12nm先进工艺&#xff0c;具有低功耗高性能的特点。 该工业平板主板搭载了IMG GE8320图形处理器&#xff0c;最高主频为680MHz, 支持108…
阅读更多...
Vue-24、Vue过滤器

Vue-24、Vue过滤器

1、效果 2、过滤器实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>过滤器</title><script type"text/javascript" src"https://cdn.jsdelivr.net/npm/vue2/dist/vue.…
阅读更多...
有序矩阵中第 K 小的元素

有序矩阵中第 K 小的元素

题目链接 有序矩阵中第 K 小的元素 题目描述 注意点 每行和每列元素均按升序排序找到一个内存复杂度优于 O(n) 的解决方案 解答思路 使用二分查找&#xff0c;思路为&#xff1a; &#xff08;1&#xff09;因为左上角的元素值更小&#xff0c;右下角的元素值更大&#xf…
阅读更多...
dp专题13 零钱兑换II

dp专题13 零钱兑换II

本题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 思路&#xff1a; 根据题意&#xff0c;这是一道很裸的背包问题&#xff0c;其中这里是返回 背包方案数 的。 我们可以直接推出公式 &#xff1a; dp [ j ] dp[ j - coins[ i ] ] 在我之前…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023