<!--
 * @Author: caodongdong caodongdoong@gmail.com
 * @Date: 2023-05-17 15:46:34
 * @LastEditors: caodongdong caodongdoong@gmail.com
 * @LastEditTime: 2023-06-30 16:20:04
 * @FilePath: \h5-uniApp-miniprogrgm\webgl\pages\webgl_rxdz\webgl_rxdz.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<div class="main-view">
	<!-- <mynavbar :barData='navbar' @navbarBackCallback="navbarBackClk" /> -->
	<!-- 主要操作视图 -->
	<!-- <viewShell pageType="2" :spaceObj="curSpaceObj" @hideOrShowActor="hideOrShowActor"></viewShell> -->
	<!-- <my-loading ref="myLoading" :myLoadingStatus="myLoadingStatus"></my-loading>
	<div id="status" style="position:fixed;top:100px;left:30px;cursor:pointer;opacity:0.9;z-index:10000">
		<canvas id="FPS" type="2d" style="width:80px;height:48px"></canvas>
		<canvas id="MS" type="2d" style="width:80px;height:48px"></canvas>
	</div> -->
	<div class="mapDiv" ref="webgl">
		<div class="voice-btn rows justify-center" @click="updateMuted">
			<span :class="[muted?'iconfont icon-jingyin':'iconfont icon-yinliang']" style="color: #ffffff;"></span>
		</div>
	</div>
	<canvas id="canvas_webgl" type="webgl" ref="glcanvas"
		 width="100vw" 
		:style="{'height':canvasHeight+'px'}">
	</canvas>
	<div class="slide-mask"></div>
	<!-- 数字人大小滚动条 -->
	<div class="slide-view columns rows-between">
		<div class="slide-tips">数字人<br>大小</div>
		<div class="slide-word">放大</div>
		<el-slider
			class="rangeview"
		    v-model="rangeValue"
		    vertical
			:min="10"
			:max="100"
			:show-tooltip="false"
			@change="rangeChange"
		    >
		</el-slider>
		<div class="slide-word">缩小</div>
	</div>
	<div class="guide-mask" id="guide-mask" v-if="!isIOS">
		<img src="https://dm.static.elab-plus.com/guide-mask.png">
	</div>
	<!-- AI数字人组件 -->
	<viewAI ref="viewAI" @aiPeopleChange="aiPeopleChange" style="z-index: 13;"></viewAI>
	<!-- 生成截屏的画布对象 -->
	<canvas id="canvas" type="2d" :style="{'height':canvasHeight+'px','top':'100vh'}"></canvas>
	<video id="myvideo" style="display: none;" loop :muted="muted" 
	autoplay controls="false" ></video>
</div>