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

admin管理员组

文章数量:1659586

简单的直播

技术选型:

• 手机端: EasyRTMP EasyRTMP项目 Github地址
• RTMP服务器: nginx-http-flv window版(编译好)
• 网页端: vue + flv.js

工作流程(参考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
• XXXX与XXXX对应

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. 手机耗电很快,使用一会发热严重.

本文标签： 简单功能网页apkEasyRTMP