学习路之uniapp --- 视频直播开发(在现有nginx服务器上搭建RTMP媒流体服务器)

学习路之uniapp --- 视频直播开发(在现有nginx服务器上搭建RTMP媒流体服务器

[零、环境准备：centos 7、nginx1.24.0、宝塔8.1](#零、环境准备：centos 7、nginx1.24.0、宝塔8.1)
一、找到现有nginx安装文件
[二、查看nginx -V](#二、查看nginx -V)
三、流媒体服务配置
四、客户端(推流、拉流)
五、问题
六、补充

零、环境准备：centos 7、nginx1.24.0、宝塔8.1

一、找到现有nginx安装文件

下载nginx-rtmp-module模块源文件：（选项）

bash 复制代码

sudo git clone https://github.com/arut/nginx-rtmp-module /www/server/nginx_plus/nginx-rtmp-module/

修改nginx下载文件

/www/server/panel/install/nginx.sh 447

bash 复制代码

 --add-module=/www/server/nginx_plus/nginx-rtmp-module/

运行安装nginx

bash 复制代码

sudo sh /www/server/panel/install/nginx.sh install 1.24.0

二、查看nginx -V

三、流媒体服务配置

‌1. 创建配置目录‌

bash 复制代码

mkdir -p /www/rtmp/{hls,live}  # 存储视频切片和直播数据

‌2. RTMP核心配置‌(软件商店-已安装软件-nginx配置)

在代码http { 之前追加：

bash 复制代码

rtmp {
    server {
        listen 1935;#端口监听，1935:rtmp默认端口；注意端口被占用
        chunk_size 4096;
        application live { #rtmp推流请求路径
            live on;  #开启直播模式
            hls on;  # 启用HLS切片
            hls_path /www/rtmp/hls;
            hls_fragment 3s;
        }
    }
}

增加访问配置：http内部：server内部增加location /hls部分代码

bash 复制代码

http {
	server {
		listen       80;
        server_name  localhost;

		location /hls {
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /www/rtmp;
        }

四、客户端(推流、拉流)

推流

rtmp://47.112.111.11:1935/live/stream123

RTMP推流: rtmp://服务器IP:1935/live/自定义流密钥

bash 复制代码

<live-pusher id='livePusher' ref="livePusher" class="livePusher" url="rtmp://47.112.111.11:1935/live/stream123" mode="SD" :muted="false"
			:enable-camera="true" :auto-focus="true" @statechange="onPushStateChange" style="width:100%;height:70vh" />

推流成功：在服务器的/www/rtmp/hls 目录下面生成了m3nu8文件及其他文件

flv HLS拉流: http://域名:端口/hls/流密钥.m3u8 (如80端口可以省略)

bash 复制代码

<video id="myVideo"
			src="http://47.112.111.11/hls/stream123.m3u8"
			@error="videoErrorCallback" :danmu-list="danmuList" :autoplay="true" enable-danmu danmu-btn>
		</video>

拉流成功：可以直接在浏览器：http://47.112.111.11/hls/stream123.m3u8 下载这个文件下来

HTTP-FLV拉流: http://域名/live?app=live\&stream=流密钥. (暂未使用)

五、问题

1.先检查自己的1935端口是否放开（阿里云服务器和宝塔 1935 都需要放开）

检查端口是否被占用： lsof -i:1935

六、补充

push-video.vue

bash 复制代码

<template>
	<view class="container">
		<live-pusher id='livePusher' ref="livePusher" class="livePusher" url="rtmp://47.112.111.11:1935/live/stream123" mode="SD" :muted="false"
			:enable-camera="true" :auto-focus="true" @statechange="onPushStateChange" style="width:100%;height:70vh" />

		<view class="control-panel">
			<button @click="toggleCamera">切换摄像头</button>
			<button @click="togglePush">{{ isPushing ? '停止推流' : '开始推流' }}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPushing: false,
			}
		},
		onReady() {
			// 注意：需要在onReady中 或 onLoad 延时
			this.context = uni.createLivePusherContext("livePusher", this);
		},
		methods: {
			togglePush() {
				if (this.isPushing) {
					this.context.stop();
				} else {
					this.context.start();
				}
				this.isPushing = !this.isPushing;
			},
			toggleCamera() {
				this.context.switchCamera({
					success: (a) => {
						console.log("livePusher.switchCamera:" + JSON.stringify(a));
					}
				});
			},
			onPushStateChange(e) {
				console.log('推流状态:', e.detail.code);
			}
		}
	}
</script>

<style>
	.control-panel {
		margin-top: 20px;
		flex-direction: row;
		justify-content: space-around;
	}
</style>

index.vue

bash 复制代码

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<video id="myVideo"
			src="http://47.112.111.11/hls/stream123.m3u8"
			@error="videoErrorCallback" :danmu-list="danmuList" :autoplay="true" enable-danmu danmu-btn>
		</video>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				danmuList: []
			}
		},
		onLoad() {

		},
		methods: {
			onPlayStateChange(e) {
				const stateMap = {
					2001: '连接中',
					2002: '播放中',
					2003: '缓冲中',
					2004: '播放结束'
				};
				uni.showToast({
					title: stateMap[e.detail.code]
				});
			},
			videoErrorCallback(e){
				console.log('aaaaaaa');
				console.log(e);
			}
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

参考文件：https://blog.csdn.net/zhangwjshan/article/details/135848552