实现一个网页直播功能超级简单(EasyRTMP.apk + nginx-http-flv + vue + flv.js) 不使用 Flash

简单的直播

技术选型:
工作流程(参考EasyRTMP工作流程图)

在这里插入图片描述

实现步骤
启动nginx-httpflv服务
  • 启动命令
//解压目录下使用cmd命令
nginx.exe -c conf\nginx.conf
  • nginx.conf内容,主要配置为rtmp 和 http服务部分
  • 手机端推流地址为: rtmp:\\服务器IP: 1935\live\XXXX
  • 网页访问视频流地址为: http:\\服务器IP: 80\live?app=live&stream=XXXX
  • XXXXXXXX对应

worker_processes  1;
events {
    worker_connections  1024;
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir temp;

# 添加RTMP服务
rtmp {
    server {
        listen 1935; # 监听端口,手机端推流时使用的端口
        chunk_size 4000;
        application live {
            live on;
			gop_cache on; # GOP缓存,on时延迟高,但第一帧画面加载快。off时正好相反,延迟低,第一帧加载略慢。
        }
    }
}
 
# HTTP服务
http {
    include       mime.types;
    default_type  application/octet-stream;
    server {
        listen       80; # 监听端口
		location / {
			add_header Access-Control-Allow-Origin *;
			add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
			add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
			if ($request_method = 'OPTIONS') {
				return 204;
			}
            root html;
        }
		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头
        }
		location /stat.xsl {
            root html;
        }
		location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }
		location /control {
            rtmp_control all; #rtmp控制模块的配置
        }
    }
}

手机安装 EasyRTMP.apk
  • 扫码下载安装: 安卓+ios版扫码下载地址
  • 打开EasyRTMP应用 ==> 设置界面 ==> 设置推流地址
  • 此时推送的flv地址为: http://192.168.1.73/live?app=live&stream=heh

在这里插入图片描述

  • 返回主页面 ==> 推送或推送屏幕 ==> 推流中

在这里插入图片描述

网页端
  • vue项目中使用flv.js
  • 简单实现代码(仅供参考,自行调优)

<template>
	<div style="padding: 20px">
		<p
			style="font-size: 20px;color: #0a7491;font-weight: bold;font-family: 楷体;text-align: center"
		>rtmp拉取视频显示</p>
		<div style="text-align:center">
			<div class="search">
				直播地址:
				<input id="video_path" type="text" style="width: 300px" v-model="url" />
				<button type="button" @click="changePath()">确定</button>
			</div>
			<div class="mainContainer">
				<video
					id="videoElement"
					class="centeredVideo"
					controls
					autoplay
					width="360"
					height="640"
					preload
				>
					Your browser is
					too old which doesn't support HTML5 video.
				</video>
			</div>
			<div class="controls">
				<button @click="flv_start()">开始</button>
				<button @click="flv_pause()">暂停</button>
				<button @click="flv_destroy()">停止</button>
			</div>
		</div>
	</div>
</template>
<script>
import flvjs from "flv.js";
export default {
	data() {
		return {
			url: "",
			flvPlayer: null,
		};
	},
	mounted() {
		this.flvPlayer = document.getElementById("videoElement");
	},
	methods: {
		resetUrl(url) {
			if (flvjs.isSupported()) {
				try {
					this.flvPlayer = flvjs.createPlayer(
						{
							type: "flv",
							isLive: true, //<====加个这个
							url: url, //<==自行修改
						},
						{
							enableWorker: false, //不启用分离线程
							enableStashBuffer: false, //关闭IO隐藏缓冲区
							isLive: true,
							lazyLoad: false,
						}
					);
					this.flvPlayer.attachMediaElement(videoElement);
					this.flvPlayer.load(); //加载
					this.flvPlayer.play();
					this.flv_start();
				} catch (error) {
					console.log("flvj error =====>>>  " + error);
				}
			}
		},
		flv_start() {
			this.flvPlayer.play();
		},
		flv_pause() {
			this.flvPlayer.pause();
		},
		flv_destroy() {
			this.flvPlayer.pause();
			this.flvPlayer.unload();
			this.flvPlayer.detachMediaElement();
			this.flvPlayer.destroy();
			this.flvPlayer = null;
		},
		changePath() {
			let path = this.url;
			if (path === null || path === "") {
				alert("请输入地址");
				return;
			}
			this.resetUrl(path);
		},
	},
};
</script>
<style lang="scss" scoped>
.search {
	display: block;
	margin-bottom: 30px;
}
.mainContainer {
	display: block;
	width: 360px;
	margin-left: auto;
	margin-right: auto;
}
.centeredVideo {
	display: block;
	width: 100%;
	height: 640px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
}
.controls {
	display: block;
	width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
}
</style>

  • 填入直播地址: http://192.168.1.73/live?app=live&stream=heh
  • 直播效果
    在这里插入图片描述
总结
  1. nginx启动时可能会报错,需要自行查询资料解决.
  2. 直播流访问出现跨域问题,需要自行查询资料解决.
  3. 直播延迟有2~3秒.
  4. 码率设置越大,延迟越大,视频越清晰.
  5. 手机耗电很快,使用一会发热严重.
  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Windows下一站式搭建ffmpeg推流、nginx-http-flv-module直播拉流和flv.js播放环境可以按照以下步骤进行操作: 1. 首先,下载并安装FFmpeg。可以在官方网站(https://www.ffmpeg.org/)上找到适合你的操作系统的安装文件,然后按照指示进行安装。 2. 下载nginx服务器,并在安装目录下找到“conf/nginx.conf”文件,使用文本编辑器打开。编辑该文件,配置推流和拉流的相关设置。 3. 在“http”部分添加以下配置信息: ``` rtmp { server { listen 1935; application live { live on; allow publish all; allow play all; push rtmp://127.0.0.1/live/$name; } } } ``` 4. 在“server”部分添加以下配置信息: ``` location /live { flv; chunked_transfer_encoding on; root html; } ``` 5. 打开命令行,并定位到nginx安装目录的文件夹下运行:“start nginx”命令启动nginx服务器。 6. 下载并安装flv.jshttps://github.com/Bilibili/flv.js)。 7. 在项目的HTML文件中引入flv.js库文件,并使用以下JavaScript代码播放视频: ``` if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://localhost/live/stream.flv' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } ``` 8. 访问网页并检查视频是否能够正常播放。 通过以上步骤,你可以在Windows系统下一站式搭建起FFmpeg推流、nginx-http-flv-module直播拉流和flv.js播放环境,实现流媒体的推流、拉流和播放功能
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值