uniIM/imcall/webRTCVideoView.nvue

<template>
	<view >
		<view class="SvideoView">
			<wrs-uts-webrtc-view ref='localView' :style="'width:'+width+'px;height:'+height+'px;background-color:black;'"
				@onLoadView="onLoadLocalView"></wrs-uts-webrtc-view>
		</view>
			<wrs-uts-webrtc-view v-for="item in otherPersons"
				:style="'width:'+width+'px;height:'+height+'px;margin-top:20px;background-color: black;'"
				:userId="item.userId" @onLoadView="onLoadRemoteView(index)"></wrs-uts-webrtc-view>
		
		<view class="bottomfloatV">
			<view class="cInRowS" style="width: 700rpx;margin-left: 25rpx;">
				<image style="width: 100rpx;height: 100rpx;" src="/static/mine/qiehunsxt.png" mode="scaleToFill" @click="switchCamera"></image>
				<text class="text-black text-lg">{{stateNote}}</text>
				<image style="width: 100rpx;height: 100rpx;margin-left: 40rpx;" src="/static/mine/icon_off.png" mode="scaleToFill" @click="guangduan"></image>
				<!-- <image style="width: 100rpx;height: 100rpx;margin-left: 40rpx;" src="/static/mine/ysq_off.png" mode="scaleToFill" @click="jingyin"></image> -->
			</view>
		</view>
<!-- <button @click="switchCamera">切换摄像头</button>
<button @click="pause">暂停</button>
<button @click="resume">继续</button> -->
	</view>
</template>

<script>		
	export default {
		data() {
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			let height = windowWidth / (16.0 / 9.0);
			return {
				width: windowWidth/2.5,
				height: height,
				windowWidth: windowWidth,
				windowHeight: windowHeight,
				isFront: true,
				friendId:'',
				otherPersons:[],
				stateNote:'已连接'
			}
		},
		onLoad(option) {
			uni.$on('webRTCvideoE', (data) => {
			    console.log('Received webRTCvideoE:', data.msg);
				let js=JSON.parse(data.msg);
				console.log(js)
				if(js.type=='isClose'){
					uni.navigateBack();
				}
				if(js.type=='users'){
					this.otherPersons = js.users;
					console.log('this.users',this.users)
				}
				if(js.type=='state'){
					this.stateNote = js.stateNote;
				}
			});
		},
		onUnload() {
			uni.$off('webRTCvideoE');
		},
		methods: {
			pause(){
				this.$refs.localView.stopCapture()
			},
			resume(){
				this.$refs.localView.resumeCapture()
			},
			onLoadLocalView(p) {
				console.log("onLoadLocalView")
				// 渲染本地视频界面
				this.$refs.localView.renderLocalVideo()
			},
			onLoadRemoteView(p) {
				console.log("显示远程视频流:",this.friendId)
				//this.$refs.remoteView.renderRemoteVideo(''+this.friendId)
			},
			switchCamera(){
				this.isFront = !this.isFront
				this.$refs.localView.switchCamera(this.isFront)
			},
			guangduan(){
				uni.navigateBack();
			}
		}
	}
</script>

<style>
   .container {
	   display: flex;
	   flex-direction: row;
   }
   
   .SvideoView{
	   position: fixed;
	   flex-direction: row;
	   align-items: center;
	   right: 0;
	   top: 0;
	   z-index: 999;
   }
   
   .bottomfloatV{
   	position: fixed;
   	flex-direction: row;
   	align-items: center;
   	left: 0;
   	right: 0;
   	bottom: 0;
   	z-index: 999;
   	height: 180rpx;
   }
   
   .cInRowS{
   	display: flex;
   	flex-direction: row;
   	align-items: center;
   	justify-content:space-between;
   }
</style>