uni-app利用renderjs+webrtc 实现App音视频通话功能

<template>
	<view class="moveArea">
		<movable-area class="movablearea" style="right: 0rpx;">
			<movable-view :x="x" :y="y" :direction="direction" class="movableview" :animation="false" :disabled="!telMinShow"
				@touchend="handleTouchEnd" @change="handleChange" style="width:100vw;" :style="{'padding-left':telMinShow?'200rpx':'0rpx'}">
				<view class="frame" :style="{'--background-image':'url' +'(' + avatar + ')'}" @click="telMax" :class="telMinShow? 'frame-min':''">
					<image :src="udata.Avatar"
						style="position: fixed;filter: blur(10px);top: 0rpx;left: 0rpx;width: 100%;height: 100vh;">
					</image>
					
					<u-navbar :is-back="false" :title="`${(teltype>0?'视频':'语音')}通话`"
						:background="{'background' :'rgba(255, 255, 255, 0)'}" :title-color="'#ffffff'">
						<view class="slot-wrap" style="margin-left: 30rpx;" @click.stop="telMin">
								<image src="/https/blog.csdn.net/static/message/68997b56a4789c4230ebedc8aa7ff95.png" style="width: 40rpx;height: 40rpx;"></image>
						</view>
					</u-navbar>
					<!-- <image :src="avatar" class="img"></image> -->

					<!-- 群聊视频/语音通话 -->
					<view class="frame-content flexcumal" v-if="RoomType == 1">
						<view class="avatar">
							<view :class="[computedAvatar(telusers)]" :id="`viewVideo_${items.ID}`"
								v-for="(items,indexs) in telusers" :key="indexs" v-if="items.state<2">
								<!-- <image :src="items.Avatar" :class="[computedAvatar(list)]" /> -->
							</view>
						</view>
						<!-- items.ID!=udata.ID&& -->
						<!-- <view v-else>
					<view style="border: 2rpx solid black;" :id="`viewVideo_${udata.ID}`" ></view>
					<view style="border: 2rpx solid black;position: fixed;top:10%;right: 10%;" :id="`viewVideo_${userId}`" >
					</view>
			</view> -->
						<!-- <view style="position: fixed;top: 60%;"> -->
						<view class="name">{
  {udata.UserName}}</view>
						<view class="text" v-if="answer">{
  {formatTime}}</view>
						<view class="text" v-else>等待对方接受邀请...</view>
						<!-- </view> -->
					</view>

					<!-- 单聊视频/语音通话 -->
					<view class="frame-content flexcumal" style="margin-left: 0rpx;" v-else>
						<view v-if="teltype">
							<!-- <view>1122</view> -->
							<view class="myVideoClass" :id="`viewVideo_${udata.ID}`" v-if="myOtherIs == 0"></view>
							<view class="myVideoClass" :id="`viewVideo_${userId}`" v-if="myOtherIs == 1"></view>
							<view class="otherVideoClass" :id="`viewVideo_${userId}`" v-if="myOtherIs == 0"
								@click.stop="Toggle(1)">
							</view>
							<view class="otherVideoClass" :id="`viewVideo_${udata.ID}`" v-if="myOtherIs == 1"
								@click.stop="Toggle(0)"></view>
						</view>
						<view v-else>
							<view style="margin-top: 25%;width: 100vw;" class="flexcumal">
								<image :src="userAvatar" style="height: 300rpx;width: 300rpx;"></image>
							</view>
							<view class="myVideoClass" :id="`viewVideo_${udata.ID}`" v-show="false"></view>
							<view class="myVideoClass" :id="`viewVideo_${userId}`" v-show="false"></view>
							<!-- <view class="otherVideoClass" :id="`viewVideo_${userId}`"></view> -->
						</view>

						<view style="position: fixed;top: 60%;width: 100vw;" class="flexcumal">
							<view class="name">{
  {udata.UserName}}</view>
							<view class="text" v-if="answer">{
  {formatTime}}</view>
							<view class="text" v-else>等待对方接受邀请...</view>
						</view>
					</view>

					<!-- 接通 -->
					<view class="frame-buttom flexal" style="padding-left: 23rpx;justify-content: center;"
						v-if="answer">

						<!-- 麦克风 -->
						<view>
							<view class="flexcumal" style="margin: 0rpx 47rpx;" v-if="isMicrophone"
								@click="isMicrophone = !isMicrophone">
								<image src="/https/blog.csdn.net/static/video/f88d404003adc4cef0bd294e108a8b0.png"
									style="width: 134rpx;height: 134rpx;">
								</image>
								<view style="font-weight: 400;font-size: 30rpx;color: #FFFFFF;margin-top: 20rpx;">麦克风
								</view>
							</view>
							<view class="flexcumal" style="margin: 0rpx 47rpx;" v-else
								@click="isMicrophone = !isMicrophone">
								<view class="frame-icon flexcen">
									<image src="/https/blog.csdn.net/static/video/96807520ac0c78fbe419e3ac0a95443.png"
										style="width: 40rpx;height: 48rpx;">
									</image>
								</view>
								<view style="font-weight: 400;font-size: 30rpx;color: #FFFFFF;margin-top: 20rpx;">麦克风已关
								</view>
							</view>
						</view>



						<!-- 取消 -->
						<view class="flexcumal" style="margin: 0rpx 47rpx;" @click="overTelFun()">
							<image src="/https/blog.csdn.net/static/video/a90daeaeaaf3ef48bc0685042f66e00.png"
								style="width: 134rpx;height: 134rpx;">
							</image>
							<view style="font-weight: 400;font-size: 30rpx;color: #FFFFFF;margin-top: 20rpx;">取消</view>
						</view>

						<!-- 摄像头 -->
						<view v-if="teltype == 1">
							<view class="flexcumal" style="margin: 0rpx 47rpx;" v-if="isCamera"
								@click="isCamera = !isCamera">
								<image src="/https/blog.csdn.net/static/video/b69f4bca24df9641bd3b5d13b4b7887.png"
									style="width: 134rpx;height: 134rpx;">
								</image>
								<view style="font-weight: 400;font-size: 30rpx;color: #FFFFFF;margin-top: 20rpx;">摄像头
								</view>
							</view>
							<view class="flexcumal" style="margin: 0rpx 47rpx;" v-else @click="isCamera = !isCamera">
								<view class="frame-icon flexcen">
									<image src="/https/blog.csdn.net/static/video/5be3dcd235de1bacace1a3db17b8cfb.png"
										style="width: 48rpx;height: 48rpx;">
									</image>
								</view>
								<view style="font-weight: 400;font-size: 30rpx;color: #FFFFFF;margin-top: 20rpx;">摄像头已关
								</view>
							</view>
						</view>

						<!-- @click="isCamera = !isCamera" -->
						<view v-if="teltype == 0">
							<view class="flexcumal" style="margin: 0rpx 47rpx;" v-if="loudspeaker"
								@click="loudspeaker = !loudspeaker">
								<!-- <view class="frame-icon flexcen"> -->
								<image src=&#