uniIM/imcall/iOSVideoView.nvue

<template>
	<view>
		<view class="SvideoView">
			<wrs-uts-webrtc-view ref='localView' :style="'width:'+width+'px;height:'+height+'px;'"
				@onLoadView="onLoadLocalView"></wrs-uts-webrtc-view>
		</view>
			<wrs-uts-webrtc-view ref='remoteView' :style="'width:'+windowWidth+'px;height:'+windowHeight+'px;'"
				@onLoadView="onLoadRemoteView"></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>
				<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>
	</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:''
			}
		},
		onLoad(option) {
			this.friendId = option.friendId;
		},
		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)
				var that = this;
				setTimeout(function() {
				  that.$refs.remoteView.renderRemoteVideo(that.friendId)
				}, 1300); 
				
			},
			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>