您当前的位置:首页 > 电脑百科 > 站长技术 > 服务器

个人如何搭建Rtmp服务结合uni-app开发直播APP

时间:2020-06-16 10:57:46  来源:  作者:

前言:

由于自己有一个IM类的应用,为了完善它所以决定也加上直播和短视频功能。做直播目前有两种方法,一是直接对接第三方的直播服务产品,二是自己搭服务再开发。所以这里也从这两个方法推荐简单的实现方式,阿里云和腾讯云之类的大厂产品就不安利了。

 

选型:

1. 第三方,php+Uni-App+LiveQing

2. 自己开发,PHP+Uni-app+Nginx-rtmp-module

个人如何搭建Rtmp服务结合uni-app开发直播APP

 


个人如何搭建Rtmp服务结合uni-app开发直播APP

 


个人如何搭建Rtmp服务结合uni-app开发直播APP

 

实现流程:

1. 客户端采集视频流。(开摄像头,录屏等)

2. 客户端推流到rtmp服务器上。

3. rtmp推流到某个特定端口。

4. 其他客户端再对该视频流进行拉流,实现直播。

 

一、第三方方式

第三方这次推荐的是一个叫LiveQing的平台,优点是搭建快捷方便,功能完善。在服务器上运行了他们的包后除了能实现主流业务场景的直播,而且还提供短视频的点播服务。还包括API调用,通过接口实现直播的创建,删除,直播数据统计。但是是要收费,该软件包在一台物理机或云服务器上只能免费试用一个月。

1. 找到该官网,选择rtmp直播点播流媒体,下载试用把对应系统解压到自己服务器。

个人如何搭建Rtmp服务结合uni-app开发直播APP

 

2. 目录如下,将start.sh授权为777。然后./start.sh 运行该文件。

个人如何搭建Rtmp服务结合uni-app开发直播APP

 

3. 运行前可以打开liveqing.ini进行设置,比如后台登录密码,端口号等。

个人如何搭建Rtmp服务结合uni-app开发直播APP

 

4. 默认需要开启10080和10085,所以需要用防火墙放行,操作如下。

systemctl start firewalld.service    // 开启防火墙

firewall-cmd add-port=10080/tcp --permanent
firewall-cmd add-port=10082/tcp --permanent

firewall-cmd --reload               // 重启

firewall-cmd --list-ports           // 查看放行的所有端口

5. 端口放行,然后在运行start.sh出现下面图标表示成功。

个人如何搭建Rtmp服务结合uni-app开发直播APP

 

6. 浏览器输入服务器的外网IP:10080,就可以进入控制面板了。

个人如何搭建Rtmp服务结合uni-app开发直播APP

 

7. 创建一个直播,设置名称和ID,然后选择编辑获取推流地址。

个人如何搭建Rtmp服务结合uni-app开发直播APP

 

8. 为了测试可以本地下载一个OBS软件推流到该地址,只要一推流,直播状态就会显示直播中并且点击编辑可以获取拉流的地址。

个人如何搭建Rtmp服务结合uni-app开发直播APP

 

9. 同样为了方便可以使用VLS软件进行拉流或者wowza在线网站测试直播。

个人如何搭建Rtmp服务结合uni-app开发直播APP

 

二、代码实现

不使用第三方的话,就需要搭建rtmp服务,配置Nginx,APP视频采集推流,拉流等等。如果是大型平台,需要进行分流集群等。流媒体服务器依赖的服务,1.nginx 服务器;2.nginx服务器安装需要依赖的服务 OpenSSL、pcre、zlib、 c++、gcc等,服务器环境是centos 7.3 64 位。

1. 进入根目录,mkdir source #创建源码目录,后面的源码都放在这个目录。cd source进入该目录。

2. 下载git,yum -y install git,然后通过网络下载需要的包。

git clone https://github.com/nginx/nginx.git 				#从github服务器上将nginx的源代码下载下来
git clone https://github.com/arut/nginx-rtmp-module.git 	#将rtmp模块的源码下载下来
wget https://www.openssl.org/source/openssl-1.1.0.tar.gz 	#下载OpenSSL源码包
wget https://ftp.pcre.org/pub/pcre/pcre-8.39.tar.gz 		#下载pcre源码包
wget http://www.zlib.net/zlib-1.2.11.tar.gz 				#下载zlib包源码

3. tar -zxvf 包名 #解压各个包源码

个人如何搭建Rtmp服务结合uni-app开发直播APP

 

4. 在将nginx和需要的包编译前需要先安装gcc,安装过可以省过。

yum -y install gcc 			#确保依赖的gcc安装
yum -y install gcc-c++ 		#确保依赖的c++已经安装

5. 然后cd命令进入source下的nginx目录,输入下面命令。

./auto/configure --prefix=/usr/local/nginx 
        --with-pcre=../pcre-8.39 
        --with-openssl=../openssl-1.1.0 
        --with-zlib=../zlib-1.2.11 
        --with-http_v2_module 
        --with-http_flv_module 
        --with-http_mp4_module 
        --add-module=../nginx-rtmp-module/
个人如何搭建Rtmp服务结合uni-app开发直播APP

 

6. 检查成功会出现如下,然后make编译一下。

个人如何搭建Rtmp服务结合uni-app开发直播APP

 

7. make install 安装

个人如何搭建Rtmp服务结合uni-app开发直播APP

 

8. 以上操作后表示Nginx编译安装完成,然后cd到根目录,/usr/local/nginx/sbin,如果要测试Nginx是否可以访问。先放行80端口重启防火墙,在sbin下输入./nginx启动Nginx服务。浏览器访问IP地址:80,出现以下表示成功。

个人如何搭建Rtmp服务结合uni-app开发直播APP

 

9. 在nginx配置文件中配置rtmp服务,记住rtmp服务是和http服务是平级,所以我们需要在和http配置平级的位置另起rtmp服务。

vi /usr/local/nginx/conf/nginx.conf #修改配置文件
rtmp  {
    server  {
        listen 1935;
        chunk_size 4096;
        application live  {
            live on;
            record off;
        }
        application live2  {
            live on;
            record off;
        }
        application vod  {
            play /var/flvs;
        }
        application vod_http  {
            play http://服务器的ip/vod;
        }
        application hls  {
            live on;
            hls on;
            hls_path /tmp/hls;
        }
    }
}
/usr/local/nginx/sbin/nginx -s reload  #修改配置文件重启nginx服务

10. 上面rtmp服务的端口是1935,所以也需要按之前方法给1935端口放行,检查云服务器的安全组是否也放行,然后再重启防火墙。

11. 本地电脑测试1935是否开启,可以cmd命令telnet 服务器IP地址 端口号,如果出现一下界面说明端口已经通了 。

个人如何搭建Rtmp服务结合uni-app开发直播APP

 

12. 接下来也可以通过OBS推流到该地址,然后用WOWZA拉流进行测试。

rtmp://你的服务器ip:端口(1935)/live #URL填写流的地址
个人如何搭建Rtmp服务结合uni-app开发直播APP

 

13. 接下来演示uni-app的推流写法。

<template>
    <view class="content">		
		<view class="butlist">
			<view @click="back" class="buticon martp10">
				<image src="../../static/zhiwen-livepush/back2.png"></image>	
				<view class="mar10">返回</view>				
			</view>
			<view @click="switchCamera" class="buticon martp10">
				<image src="../../static/zhiwen-livepush/reversal.png"></image>	
				<view class="mar10">翻转</view>				
			</view>
			<view class=" buticon" @click="startPusher">
				<view class="x_f"></view>
				<view :class="begin==true?'givebegin':'give'" >{{contTime}}</view>
				<view class="pulse" v-if="begin"></view>
			</view>
			<view class="buticon martp10">
				<image src="../../static/zhiwen-livepush/beautiful.png"></image>	
				<view class="mar10">美化</view>				
			</view>
			<view   class="buticon martp10" v-if="begin==false">
				<picker :value="index" @change="bindPickerChange" :range="array" range-key='cont'>
					<image src="../../static/zhiwen-livepush/countdown.png"></image>	
					<view class="mar10">倒计时</view>
				</picker>	
			</view>

			<view @click="upload" class="buticon martp10" v-if="begin">
				<image src="../../static/zhiwen-livepush/yes.png"></image>	
				<view class="mar10">完成</view>				
			</view>			
		</view>
		
		 
    </view>

</template>

<script>
    export default {
		data() {
			return {
			    begin:false,//开始录制
				complete:false,//录制完毕
				pause:false,//暂停推流
				currentWebview:null,
				pusher:null,
				livepushurl:'rtmp://106.52.216.244:10089/hls/1',  //这里修改自己的推流地址就可以了
				logininfokey:'',//登录验证加密串,
				homeworkcont:'',//作业信息
				jiexititle:'',//作业解析标题
				index: 0,//定时
				indextu:0,//是否开启定时
				contTime:'',
				array: [{//话题标签
						"id": 1,
						"cont": "10秒",
						"time": 10
					}, {
						"id": 2,
						"cont": "20秒",
						"time": 20
					}, {
						"id": 3,
						"cont": "30秒",
						"time": 30
					}, {
						"id": 4,
						"cont": "40秒",
						"time": 40
					},{
						"id": 5,
						"cont": "50秒",
						"time": 50
					},
					{
						"id": 6,
						"cont": "60秒",
						"time": 60
					}],
			}
		},
		 
		onShow() {
			 uni.getNetworkType({
				success: function (res) {
					console.log(res.networkType);
					if(res.networkType != 'wifi'){
						uni.showModal({ //提醒用户更新
							title: '温馨提示',
							content: '当前非Wifi网络,请注意您的流量是否够用',
							success: (res) => {
								 
							}
						})
					}
				}
			});
			uni.onNetworkStatusChange(function (res) {
				console.log(res.isConnected);
				console.log(res.networkType);
				if(res.networkType != '4g' && res.networkType != 'wifi'){
					uni.showModal({ //提醒用户更新
						title: '温馨提示',
						content: '当前网络质量差,请切换为4G网络或Wifi网络',
						success: (res) => {
							 
						}
					})
				}
			});
		/* 	plus.key.addEventListener("backbutton",()=>{
				console.log("BackButton Key pressed!" );
				//this.back()
				return false
			}); */
		},
		 onBackPress(){
				this.back()
			    console.log("BackButton Key pressed!" );
				return true;
		 },
        onLoad(res) {
			console.log(res)
			this.jiexititle=res.title
			uni.getStorage({
				key: 'logininfokey',
				success:(res) =>{
					console.log(res.data);
					this.logininfokey=res.data
					console.log(this.logininfokey)
				}
			});
			uni.getStorage({
				key: 'clickworkcont',
				success:(res) =>{
					console.log(res.data);
					this.homeworkcont=res.data
					//console.log(this.logininfokey)
				}
			});
			
			uni.getStorage({
				key: 'livepushurl',
				success:(res) =>{
					console.log(res.data);
					this.livepushurl=res.data
				}
			});
			console.log(this.livepushurl)
	        this.getwebview()//获取webview
        },
		methods: {
			//倒计时
			bindPickerChange: function(e) {
			    console.log('picker发送选择改变,携带值为', e.target.value)
			    this.index = e.target.value
				// this.indexs = e.target.value
				this.contTime=this.array[e.target.value].time
				uni.showToast({
					title: '请点击红色按钮,开始进入倒计时',
					icon:'none',
					duration: 4000,					 
				});
			},
			
			/**
			 * 返回
			 */
			back(){
				uni.showModal({
					title: '提示',
					content: '返回后未上传的视频需要重新录制哦',
					success: function (res) {
						if (res.confirm) {
							/* this.currentWebview=null;
							this.pusher=null */
							uni.redirectTo({
								url:'../user/issue'
							})
							//this.currentWebview=null
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			/**
			 * 获取当前显示的webview
			 */
			getwebview(){
				var pages = getCurrentPages();
				var page = pages[pages.length - 1];
				// #ifdef APP-PLUS
				var getcurrentWebview = page.$getAppWebview();
				console.log(this.pages)
				console.log(this.page)
				console.log(JSON.stringify(page.$getAppWebview()))
				this.currentWebview=getcurrentWebview;
				// #endif
				this.plusReady()//创建LivePusher对象
			},

			/**
			 * 创建LivePusher对象 即推流对象
			 */ 
			plusReady(){				
				// 创建直播推流控件
				this.pusher =new plus.video.LivePusher('pusher',{
					url:'',
					top:'0',
					left:'0px',
					width: '100%',
					height:  uni.getSystemInfoSync().windowHeight-15 + 'px',				
					position: 'absolute',//static静态布局模式,如果页面存在滚动条则随窗口内容滚动,absolute绝对布局模式,如果页面存在滚动条不随窗口内容滚动; 默认值为"static"
					beauty:'0',//美颜 0-off  1-on  
					whiteness:'0',//0、1、2、3、4、5,0不使用美白,值越大美白程度越大。
					aspect:'9:16',					
 				});
				console.log(JSON.stringify(this.pusher))
				console.log(JSON.stringify(this.currentWebview))
				//将创建的对象 追加到webview中
				this.currentWebview.append(this.pusher);
				// 监听状态变化事件  
				this.pusher.addEventListener('statechange',(e)=>{
					console.log('statechange: '+JSON.stringify(e));
				}, false);
			},			
			//美颜
			beautiful(){
				console.log(JSON.stringify(this.pusher))
				this.pusher.options.beauty=1
				this.plusReady()//创建LivePusher对象
			},
			// 开始推流
			startPusher(){
				//判断是否倒计时开始
				if(this.contTime!=''){
					if(this.indextu!=1){
						this.conttimejs()
					}
				}else{
					this.beginlivepush()
				}
			},
			conttimejs(){
				if(this.contTime!=''){
					this.indextu=1;//开启计时
					if(this.contTime==1){
						console.log("开始")
						this.contTime=""
						this.beginlivepush()
						return false
					}
					this.contTime--
					setTimeout(()=>{
						this.conttimejs()
					},1000)
				}
			},
			beginlivepush() {
				this.indextu=0;//关闭计时
				if(this.begin==false){//未开启推流
					this.begin=true;//显示录制动画
					// 设置推流服务器  ***此处需要通过ajax向后端获取
					this.pusher.setOptions({
						url:this.livepushurl //推流地址********************************* 此处设置推流地址
					});
					this.pusher.start();//推流开启
					uni.showToast({
						title: '开始录制',
						icon:'none',
						duration: 2000,					 
					});
				}else{
					if(this.pause==true){//暂停推流状态
						this.begin=true;//显示录制动画
						this.pause=false;//推流开关置为默认状态
						this.pusher.resume();//恢复推流
						uni.showToast({
							title: '开始录制',
							icon:'none',
							duration: 2000,					 
						});
					}else{
						this.begin=false;//关闭录制动画
						this.pause=true;//推流暂停
						this.pusher.pause();;//暂停推流
						uni.showToast({
							title: '暂停录制',
							icon:'none',
							duration: 2000,					 
						});
						//提示是否上传
						this.upload()
						
						
					}

				}
			},
			/**
			 * 切换摄像头
			 */ 
			switchCamera() {
				this.pusher.switchCamera();
			},
			/**
			 * 完成录制
			 */
			upload(){
				 uni.showModal({
				 	title: '提示',
				 	content: '确定保存吗',
				 	success:(res)=> {
				 		if (res.confirm) {
				 			 console.log('用户点击完成');
							 this.pusher.pause();;//暂停推流
							 this.endlivepush()
							 
							/* setTimeout(()=>{
								 this.endlivepush()
							 },1000) */
				 		} else if (res.cancel) {
				 			console.log('用户点击取消');
				 		}
				 	}
				 });
			}, 
			//结束推流,此处需要调用后台接口向云服务商提交结束状态
			endlivepush(){
					uni.showToast({
					icon:'loading',
					title: '结束...',
					duration: 5000
				});
				return false
				uni.request({
						url: "",    	
				       	method: 'POST',
						// dataType:'JSON',
				       data:{},
				       success:(res)=>{
						   console.log(JSON.parse(res.data))
						   console.log(JSON.stringify(res.data))
							uni.showToast({
								icon:'loading',
								title: '视频上传中...',
								duration: 5000
							});
							
							setTimeout(()=>{							
								uni.showToast({
									icon:'none',
									title: '上传完成',
									duration: 2000
								});
							},5000)
							setTimeout(()=>{							
								uni.redirectTo({
									url: 'setvideotit?id='+this.homeworkcont.id,
								});
							},7000)
				       },
				       error: (data)=>{
				       	//alert(JSON.stringify(data)+'错误')			    
				       }
				   });
			},
			 
		},
		components:{
		
		}
    }
</script>

<style>
	.content{
		background: #000;
		overflow: hidden;
	}
	.butlist{
		height: 140upx;
		position: absolute;
		bottom: 0;
		display: flex;
		width: 100%;
		justify-content: space-around;
	    padding-top: 20upx;
		border-top: 1px solid #fff;
		background: #000;
	}
	.buticon{
		height: 120upx;
		width: 120upx;
		color: #fff;
		position: relative;
		text-align: center;
		margin-bottom: 20upx;
	}
	.buticon image{
		height: 64upx;
		width: 64upx;
	}
	.buticon .mar10{
		margin-top: -20upx;
	}
	.martp10{
		margin-top: 10upx;

	}
	.give {
		width: 90upx;
		height: 90upx;
		background: #F44336;	
		border-radius: 50%;
		box-shadow: 0 0 22upx 0 rgb(252, 94, 20);
	 	 position: absolute; 
		left:15upx;
		top:15upx; 
		    font-size: 44upx;
    line-height: 90upx;
	}
	.givebegin {
		width: 60upx;
		height: 60upx;
		background: #F44336;	
		border-radius: 20%;
		box-shadow: 0 0 22upx 0 rgb(252, 94, 20);
	 	 position: absolute; 
		left:30upx;
		top:30upx; 
	}
	.x_f{
		/* border: 6upx solid #F44336; */
		width: 120upx;
		height: 120upx;
		background: #fff;
		border-radius: 50%;
		position: absolute;
		text-align: center;
		top:0;
		left: 0;
	  box-shadow: 0 0 28upx 0 rgb(251, 99, 24);
	}
	
	/* 产生动画(向外扩散变大)的圆圈  */
	.pulse {
		width: 160upx;
		height: 160upx;
		position: absolute;
	    border: 12upx solid #F44336;
	    border-radius: 100%;
	    z-index: 1;
	    opacity: 0;
	    -webkit-animation: warn 2s ease-out;
	    animation: warn 2s ease-out;
	    -webkit-animation-iteration-count: infinite;
	    animation-iteration-count: infinite;
	    left: -28upx;
	    top: -28upx;
	}
		
	
	/**
	 * 动画
	 */
	@keyframes warn {
	0% {
		transform: scale(0);
		opacity: 0.0;
	}
	25% {
		transform: scale(0);
		opacity: 0.1;
	}
	50% {
		transform: scale(0.1);
		opacity: 0.3;
	}
	75% {
		transform: scale(0.5);
		opacity: 0.5;
	}
	100% {
		transform: scale(1);
		opacity: 0.0;
	}
}
	
	 
</style>

14. 拉流演示代码。

<template class='fullscreen'>
	<view class='fullscreen'>
		<view v-if="beCalling"  class="backols">
			<view class='becalling-text'>对方邀请你开始视频聊天</view>
			<view class="butlist2">
				<view @click="rejectCallHandler" class="buticon2 martp10">
					<image src="../../static/img/netcall-reject.png"></image>	
				</view>
					<view @click="acceptCallHandler" class="buticon2 martp10">
						<image src="../../static/img/netcall-accept.png"></image>	
					</view>
				</view>
		</view>
		<view v-else class="butlist">
				<view @click="switchaudio" class="buticon martp10">
					<image src="../../static/img/netcall-call-voice.png"></image>	
				
				</view>
				<view @click="switchCamera" class="buticon martp10">
					<image src="../../static/img/netcall-revert-camera.png"></image>	
						
				</view>
				<view @click="close" class="buticon martp10">
					<image src="../../static/img/netcall-reject.png"></image>	
				</view>
			 
			</view>
	</view>
	
	
</template>

<script>
	export default {
		 data() {
			 return{
				beCalling: true,
				videourl:'',
				width:'',
				currentWebview:null,
				pushers:'',
				video :''
		  }
		},
		
		onLoad: function (options) {
				 this.getwebview()//获取webview
		},
		onUnload() {
		
		},
		methods: {
				close(){
						 this.pusher.pause();//暂停推流
						this.pusher.close()//关闭推流控件
						uni.switchTab({
							url:''
						})
				},
				getwebview(){
					var pages = getCurrentPages();
					var page = pages[pages.length - 1];
					// #ifdef APP-PLUS
					var getcurrentWebview = page.$getAppWebview();
					console.log(this.pages)
					console.log(this.page)
					console.log(JSON.stringify(page.$getAppWebview()))
					this.currentWebview=getcurrentWebview;
					// #endif
					this.plusReady()//创建LivePusher对象
				},
				 
				plusReady(){				
				
					this.pushers =new plus.video.VideoPlayer('video',{
						// src:self.userlist[0].url,
						src:"rtmp://58.200.131.2:1935/livetv/hunantv", //这里替换自己的拉流地址
						top:'0px',
						left:'0px',
						controls:false,
						width: '100%',
						height: uni.getSystemInfoSync().windowHeight-150 + 'px',
						position: 'static'		
					});				 
					this.currentWebview.append(this.pushers);
				 this.pushers.play()

				},
		 
		 
		 /**
			 * 切换摄像头
			 */ 
			switchCamera() {
				this.pusher.switchCamera();
			},
			switchaudio() {
				console.log('点击了');
			}
				
		}	
	}
	
</script>

<style>
	
	.backols{
	    background: rgba(0, 0, 0, 0.74);
    height: 100%;
    position: absolute;
    width: 100%;
	}
	uni-page{
		background:#000000;
	}
	.butlist{
		height: 140upx;
		position: absolute;
		bottom: 0;
		display: flex;
		width: 100%;
		justify-content: space-around;
	    padding-top: 20upx;
		border-top: 1px solid #fff;
	}
	.buticon{
		height: 120upx;
		width: 120upx;
		color: #fff;
		position: relative;
		text-align: center;
		margin-bottom: 20upx;
	}
	.buticon image{
		height: 90upx;
		width: 90upx;
	}
	.buticon .mar10{
		margin-top: -20upx;
	}
	.martp10{
		margin-top: 10upx;
	
	}
	.becalling-text{
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		padding: 60upx;
		margin-top: 40%;
	}
	.butlist2{
		height: 140upx;
		position: absolute;
		bottom: 5%;
		display: flex;
		width: 100%;
		justify-content: space-around;
	    padding-top: 20upx;
	 
	}
	.buticon2{
		height: 120upx;
		width: 120upx;
		color: #fff;
		position: relative;
		text-align: center;
		margin-bottom: 20upx;
	}
	.buticon2 image{
		height: 110upx;
		width: 110upx;
	}
 
 
	.container {
	  width: 100%;
	  height: 100%;
	}
	/* 被叫 */
	.becalling-wrapper {
	  position: relative;
	  width:100%;
	  height:800upx;
	  background-color:#777;
	  color:#fff;
	  font-size:40rpx;
	}
	.becalling-wrapper .becalling-text {
	  position: absolute;
	  top:400rpx;
	  left:50%;
	  margin-left:-220rpx;
	}
	.becalling-wrapper .becalling-button-group {
	  position: absolute;
	  width:100%;
	  box-sizing:border-box;
	  bottom: 100rpx;
	  padding: 0 40rpx;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	}
	.becalling-button-group .button {
	  width:220rpx;
	  height:80rpx;
	  border-radius:10rpx;
	  justify-content:center;
	  display:flex;
	  align-items:center;
	  font-size:33rpx;
	  color:#000;
	}
	.becalling-button-group .reject-button {
	  background-color:#f00;
	}
	.becalling-button-group .accept-button {
	  background-color:rgb(26, 155, 252);
	}
	
	.calling-coverview {
	  width:100%;
	  height:100rpx;
	  background-color:#ccc;
	  color:#fff;
	  font-size:40rpx;
	  text-align:center;
	  line-height:100rpx;
	}
	/* 视频容器 */
	.video-wrapper {
	  width: 100%;
	  height: 100%;
	  padding-bottom: 100rpx;
	  box-sizing: border-box;
	  position: relative;
	  background-color: #000;
	}
	.control-wrapper {
	  width: 100%;
	  box-sizing: border-box;
	  position: absolute;
	  bottom: 0;
	}
	.calling-voerview {
	  background-color:#ccc;
	  color:#fff;
	  height: 160rpx;
	  font-size: 40rpx;
	  text-align: center;
	  line-height: 160rpx;
	}
	.control-wrapper {
	  position: fixed;
	  bottom: 18px;
	  left:0;
	  display: flex;
	  width: 100%;
	  box-sizing: border-box;
	  flex-direction:row;
	  justify-content: space-between;
	  padding: 0 42rpx;
	  height: 200rpx;
	}
	.control-wrapper .item{
	  width: 92rpx;
	  height: 92rpx;
	  margin-top: 100rpx;
	}
	.netcall-time-text {
	  position:absolute;
	  bottom:160rpx;
	  width:100%;
	  height: 40rpx;
	  color:#fff;
	  font-size:40rpx;
	  text-align:center;
	  left:0;
	}
	
	
	.fullscreen{
		display: flex;
		background: #000000;
		height: 100%;
		width: 100%;
		position: absolute;
	}
	
</style>

15. uni-app模块权限如下。

个人如何搭建Rtmp服务结合uni-app开发直播APP

 


个人如何搭建Rtmp服务结合uni-app开发直播APP

 


个人如何搭建Rtmp服务结合uni-app开发直播APP

 


个人如何搭建Rtmp服务结合uni-app开发直播APP

 


个人如何搭建Rtmp服务结合uni-app开发直播APP

 


个人如何搭建Rtmp服务结合uni-app开发直播APP


Tags:直播APP   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
网络表演经营企业对本单位开展的网络表演经营活动承担主体责任,应当按照《互联网文化管理暂行规定》和《网络文化经营单位内容自审管理办法》的有关要求,建立健全内容审核管理...【详细内容】
2021-07-15  Tags: 直播APP  点击:(59)  评论:(0)  加入收藏
在开发直播APP时,核心要素和基本要素是稳定性,一般各大服务商都有提供demo,并且可以免费测试的,测试可以初步评估下稳定性,看看视频流畅度如何,卡顿是不是很频繁,延时效果怎么样,视...【详细内容】
2021-03-19  Tags: 直播APP  点击:(292)  评论:(0)  加入收藏
前言:由于自己有一个IM类的应用,为了完善它所以决定也加上直播和短视频功能。做直播目前有两种方法,一是直接对接第三方的直播服务产品,二是自己搭服务再开发。所以这里也从这两...【详细内容】
2020-06-16  Tags: 直播APP  点击:(57)  评论:(0)  加入收藏
运营直播APP必须要是要经常跟技术结合的,在运营过程中可能需要技术的支持来实现某一具体功能,一般实力强大的公司都有自己研发团队,针对自己的直播平台开发和维护,当直播平台需...【详细内容】
2019-11-19  Tags: 直播APP  点击:(142)  评论:(0)  加入收藏
一.前端推流1.推流可以采用命令: ffmpeg -i input -vcodec copy -acodec copy -f flv rtmp://127.0.0.1/live/cgstream0input 可以是实时流,也可以是文件,如果是文件 需要加上...【详细内容】
2019-10-25  Tags: 直播APP  点击:(191)  评论:(0)  加入收藏
APP开发并不如想象中的那么简单,看似简单的功能实现,背后不知蕴藏多少复杂的技术。虽然现在很多技术都已经很成熟了,但考虑到客户的预算及快速上线的需要,通常我们都会借助第三...【详细内容】
2019-09-26  Tags: 直播APP  点击:(209)  评论:(0)  加入收藏
如果现在有人说起直播,大家能想到的肯定不再是某个人气主播,如今是“全民直播”时代,每个人都是主播,对直播APP感兴趣的人肯定会好奇开发一套直播APP需要多少钱,哪个环节是最花钱...【详细内容】
2019-08-01  Tags: 直播APP  点击:(272)  评论:(0)  加入收藏
很多人可能不了解直播APP,特别是音视频流内容分发和转发的方面的内容,我们作为前端用户是很难了解到直播APP实现的技术,具体整个直播实现的流程是什么样?实现技术是什么样?现在小...【详细内容】
2019-06-17  Tags: 直播APP  点击:(385)  评论:(0)  加入收藏
▌简易百科推荐
阿里云镜像源地址及安装网站地址https://developer.aliyun.com/mirror/centos?spm=a2c6h.13651102.0.0.3e221b111kK44P更新源之前把之前的国外的镜像先备份一下 切换到yumcd...【详细内容】
2021-12-27  干程序那些事    Tags:CentOS7镜像   点击:(1)  评论:(0)  加入收藏
前言在实现TCP长连接功能中,客户端断线重连是一个很常见的问题,当我们使用netty实现断线重连时,是否考虑过如下几个问题: 如何监听到客户端和服务端连接断开 ? 如何实现断线后重...【详细内容】
2021-12-24  程序猿阿嘴  CSDN  Tags:Netty   点击:(12)  评论:(0)  加入收藏
一. 配置yum源在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repovim /etc/yum.repos.d/google-chrome.repo按i进入编辑模式写入如下内容:[google-chrome]name=googl...【详细内容】
2021-12-23  有云转晴    Tags:chrome   点击:(7)  评论:(0)  加入收藏
一. HTTP gzip压缩,概述 request header中声明Accept-Encoding : gzip,告知服务器客户端接受gzip的数据 response body,同时加入以下header:Content-Encoding: gzip:表明bo...【详细内容】
2021-12-22  java乐园    Tags:gzip压缩   点击:(9)  评论:(0)  加入收藏
yum -y install gcc automake autoconf libtool makeadduser testpasswd testmkdir /tmp/exploitln -s /usr/bin/ping /tmp/exploit/targetexec 3< /tmp/exploit/targetls -...【详细内容】
2021-12-22  SofM    Tags:Centos7   点击:(7)  评论:(0)  加入收藏
Windows操作系统和Linux操作系统有何区别?Windows操作系统:需支付版权费用,(华为云已购买正版版权,在华为云购买云服务器的用户安装系统时无需额外付费),界面化的操作系统对用户使...【详细内容】
2021-12-21  卷毛琴姨    Tags:云服务器   点击:(6)  评论:(0)  加入收藏
参考资料:Hive3.1.2安装指南_厦大数据库实验室博客Hive学习(一) 安装 环境:CentOS 7 + Hadoop3.2 + Hive3.1 - 一个人、一座城 - 博客园1.安装hive1.1下载地址hive镜像路径 ht...【详细内容】
2021-12-20  zebra-08    Tags:Hive   点击:(9)  评论:(0)  加入收藏
以下是服务器安全加固的步骤,本文以腾讯云的CentOS7.7版本为例来介绍,如果你使用的是秘钥登录服务器1-5步骤可以跳过。1、设置复杂密码服务器设置大写、小写、特殊字符、数字...【详细内容】
2021-12-20  网安人    Tags:服务器   点击:(7)  评论:(0)  加入收藏
项目中,遇到了一个问题,就是PDF等文档不能够在线预览,预览时会报错。错误描述浏览器的console中,显示如下错误:nginx代理服务报Mixed Content: The page at ******** was loaded...【详细内容】
2021-12-17  mdong    Tags:Nginx   点击:(7)  评论:(0)  加入收藏
转自: https://kermsite.com/p/wt-ssh/由于格式问题,部分链接、表格可能会失效,若失效请访问原文密码登录 以及 通过密钥实现免密码登录Dec 15, 2021阅读时长: 6 分钟简介Windo...【详细内容】
2021-12-17  LaLiLi    Tags:SSH连接   点击:(16)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条