uniapp利用内置组件live-pusher和video实现app端的简单视频聊天功能

一.视频功能的介绍：视频聊天功能怎么实现呢? 我做这个功能时，第一个想到的就是这个跟直播功能没啥区别。都是利用推流工具把视频流推送到流媒体服务器，然后在利用拉流软件拿到视频流进行播放。

二.实现方案

   1.首先我查了uniapp官方文档，他们给我们内置了一个live-pusher组件，专门用来进行推流。如果是app端拉流直接用video组件，微信小程序就得用live-player。

  推流代码html部分：

<template>
	 <view>
			<live-pusher id='livePusher' ref="livePusher" class="livePusher" url="rtmp://192.168.1.70:1935/live/sss"
			 mode="HD" :muted="false" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
			 aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error" style="width:300px;height:200px"></live-pusher>
			
	        <button class="btn" @click="pause">暂停推流</button>
	        <button class="btn" @click="resume">resume</button>
	        <button class="btn" @click="stop">停止推流</button>
	        <button class="btn" @click="snapshot">快照</button>
	        <button class="btn" @click="startPreview">开启摄像头预览</button>
	        <button class="btn" @click="stopPreview">关闭摄像头预览</button>
	        <button class="btn" @click="switchCamera">切换摄像头</button>
	    </view>
</template>

  推流代码js部分：

<script>
    export default {
        data() {
			return {
				context:'',
			}
        },
        created() {
            // 注意：需要在onReady中 或 onLoad 延时
            this.context = uni.createLivePusherContext("livePusher", this);
			
        },
        methods: {
			waTing(e){
				console.log(e)
			},
			
			playState(e){
				console.log(e)
			},
			
			controlee(e){
				console.log(e)
			},
			
            statechange(e) {
                console.log("statechange:" + JSON.stringify(e));
            },
            netstatus(e) {
                console.log(e);
				
				if(e.detail.info.videoFPS!=0){
					this.videoSrc='rtmp://192.168.1.70:1935/live/sss'
					this.TimeYanChi=4
				}else{
					this.videoSrc=''
				}
            },
            error(e) {
                console.log("error:" + JSON.stringify(e));
            },
			
			
            start: function() {
				
                this.context.start({
				
                    success: (a) => {
                        console.log("livePusher.start:" + JSON.stringify(a));
                    },
					
					
                });
            },
            close: function() {
                this.context.close({
                    success: (a) => {
                        console.log("livePusher.close:" + JSON.stringify(a));
                    }
                });
            },
            snapshot: function() {
                this.context.snapshot({
                    success: (e) => {
                        console.log(JSON.stringify(e));
                    }
                });
            },
            resume: function() {
                this.context.resume({
                    success: (a) => {
                        console.log("livePusher.resume:" + JSON.stringify(a));
                    }
                });
            },
            pause: function() {
                this.context.pause({
                    success: (a) => {
                        console.log("livePusher.pause:" + JSON.stringify(a));
                    }
                });
            },
            stop: function() {
                this.context.stop({
                    success: (a) => {
                        console.log(JSON.stringify(a));
                    }
                });
            },
            switchCamera: function() {
                this.context.switchCamera({
                    success: (a) => {
                        console.log("livePusher.switchCamera:" + JSON.stringify(a));
                    }
                });
            },
            startPreview: function() {
                this.context.startPreview({
                    success: (a) => {
                        console.log("livePusher.startPreview:" + JSON.stringify(a));
                    }
                });
            },
            stopPreview: function() {
                this.context.stopPreview({
                    success: (a) => {
                        console.log("livePusher.stopPreview:" + JSON.stringify(a));
                    }
                });
            }
        }
    }
</script>

js代码的方法都是uniapp官方提供的，用来控制推流的。大家可以去官网看看。

这样我们的单项视频聊天就实现了，要想实现双向的，就重复上面的操作，再建一个组件进行推流和拉流就可以了。

2.当我们把前端页面搭建之后，就得考虑到推流的视频流放在哪里，拉流从哪里拉到视频流。

这就得搭建我们自己的流媒体服务器了。

3.怎么搭建流媒体服务器

网上有很多的搭建流媒体的软件。我这里用的是nginx搭建的流媒体服务。从网上下载nginx服务器

Index of /download/

因为不是所有的nginx服务器都支持rtmp流的，在下载页面中下载

nginx 1.7.11.3 Gryphon.zip 压缩包

然后在下载nginx-rtmp-module模块，上网搜一下地址就可以下载了。

下载完之后解压到nginx的目录下

完成上面的操作之后，就可以配置我们的nginx了，找到nginx.conf文件。（提醒一下，在conf文件夹内，可能没有nginx.conf文件。但是有其他带有conf的文件，把其中一个文件改成nginx.conf就行）

打开nginx.conf文件，在http代码上面添加如下代码：

rtmp {
    server {
        listen 1935;#监听端口,若被占用,可以更改
        chunk_size 1000;#上传flv文件块儿的大小
        application live { #创建一个叫live的应用
             live on;#开启live的应用
             allow publish 127.0.0.1;#
             allow play all;
        }
    }
}

 到这一步我们用nginx搭建的流媒体服务就可以启动了。

 点击nginx.exe启动我们的服务。然后在live-pusher输入我们的rtmp地址就行自己电脑的ip地址加上配置好的端口 1935（ http://192.168.1.12:1935/live/exp）标红的是我的电脑ip。

video的地址也是一样的 http://192.168.1.12:1935/live/exp。

这样就完成啦。