groupConnected.wxml 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <view class="{{callType === 2?'TUICalling-connected-video':'TUICalling-connected-layout'}}">
  2. <!-- 语音通话 -->
  3. <view wx:if="{{callType === 1}}">
  4. <swiper class="swiper" indicator-dots="{{allUsers.length/4 > 1}}" indicator-color="white"
  5. indicator-active-color="black">
  6. <block wx:for="{{(allUsers.length)/4}}" wx:key="*this" wx:for-index="pos">
  7. <swiper-item class="invite-calling-list">
  8. <view wx:for="{{allUsers}}" wx:key="userID" class="invite-calling-item"
  9. wx:if="{{index >= pos*4 && index < pos*4+4}}">
  10. <view id="{{item.userID}}" class="invite-calling-item-message" wx:if="{{!item.isEnter}}">
  11. <view class="invite-calling-item-loadimg">
  12. <image src="../../static/loading.png"></image>
  13. </view>
  14. <view class="invite-calling-item-id">{{item.nick || item.userID}}</view>
  15. </view>
  16. <image class="avatar" src="{{item.avatar || '../../static/default_avatar.png'}}"
  17. binderror="handleErrorImage"/>
  18. <!-- 音量图标 -->
  19. <view class="player-control">
  20. <image src="{{item.avatar || '../../static/default_avatar.png'}}"></image>
  21. <view class="name">{{item.userID===ownUserId?'我':item.nick || item.userID}}</view>
  22. </view>
  23. </view>
  24. </swiper-item>
  25. </block>
  26. </swiper>
  27. </view>
  28. <view class="{{callType === 1 ? 'pusher-audio' : ''}}">
  29. <swiper class="swiper" indicator-dots="{{allUsers.length/4 > 1}}" indicator-color="white"
  30. indicator-active-color="black">
  31. <block wx:for="{{(allUsers.length)/4}}" wx:key="*this" wx:for-index="pos">
  32. <swiper-item class="invite-calling-list">
  33. <view wx:for="{{allUsers}}" wx:key="userID" class="invite-calling-item"
  34. wx:if="{{index >= pos*4 && index < pos*4+4}}">
  35. <view id="{{item.userID}}" class="invite-calling-item-message" wx:if="{{!item.isEnter}}">
  36. <view class="invite-calling-item-loadimg">
  37. <image src="../../static/loading.png"></image>
  38. </view>
  39. <image class="avatar" src="{{item.avatar || '../../static/default_avatar.png'}}" binderror="handleErrorImage" />
  40. <view class="invite-calling-item-id">{{item.nick || item.userID}}</view>
  41. </view>
  42. <view wx:else>
  43. <!-- 本地流 -->
  44. <view wx:if="{{item.userID===ownUserId}}"
  45. class="{{callType === 1 ? 'pusher-audio' : 'play-item'}}" data-screen="pusher"
  46. catch:tap="toggleViewSize">
  47. <live-pusher class="{{callType === 1 ? 'pusher-audio' : 'pusher-ownvideo'}}"
  48. url="{{pusher.url}}" mode="{{pusher.mode}}" autopush="{{true}}"
  49. enable-camera="{{pusher.enableCamera}}" enable-mic="{{true}}"
  50. muted="{{!pusher.enableMic}}" enable-agc="{{true}}" enable-ans="{{true}}"
  51. enable-ear-monitor="{{pusher.enableEarMonitor}}"
  52. auto-focus="{{pusher.enableAutoFocus}}" zoom="{{pusher.enableZoom}}"
  53. min-bitrate="{{pusher.minBitrate}}" max-bitrate="{{pusher.maxBitrate}}"
  54. video-width="{{pusher.videoWidth}}" video-height="{{pusher.videoHeight}}"
  55. beauty="{{pusher.beautyLevel}}" whiteness="{{pusher.whitenessLevel}}"
  56. orientation="{{pusher.videoOrientation}}" aspect="{{pusher.videoAspect}}"
  57. device-position="{{pusher.frontCamera}}"
  58. remote-mirror="{{pusher.enableRemoteMirror}}"
  59. local-mirror="{{pusher.localMirror}}"
  60. background-mute="{{pusher.enableBackgroundMute}}"
  61. audio-quality="{{pusher.audioQuality}}"
  62. audio-volume-type="{{pusher.audioVolumeType}}"
  63. audio-reverb-type="{{pusher.audioReverbType}}"
  64. waiting-image="{{pusher.waitingImage}}"
  65. beauty-style="{{pusher.beautyStyle}}" filter="{{pusher.filter}}"
  66. bindstatechange="pusherStateChangeHandler" bindnetstatus="pusherNetStatus"
  67. binderror="pusherErrorHandler"
  68. bindaudiovolumenotify="pusherAudioVolumeNotify"/>
  69. <view class="player-control">
  70. <image src="{{item.avatar || '../../static/default_avatar.png'}}"></image>
  71. <view class="name">我</view>
  72. </view>
  73. </view>
  74. <!-- 远端流 -->
  75. <view catch:tap="toggleViewSize" class="{{callType === 1 ? 'pusher-audio' : 'play-item'}}"
  76. wx:else>
  77. <live-player
  78. wx:if="{{playerProcess[item.userID]}}"
  79. wx:if="{{ playerProcess[item.userID].hasAudio || playerProcess[item.userID].hasVideo }}"
  80. class="{{callType === 1 ? 'pusher-audio' : 'pusher-ownvideo'}}"
  81. id="{{playerProcess[item.userID].id}}"
  82. data-userid="{{playerProcess[item.userID].userID}}"
  83. data-streamid="{{playerProcess[item.userID].streamID}}"
  84. data-streamtype="{{playerProcess[item.userID].streamType}}"
  85. src="{{playerProcess[item.userID].src}}" mode="RTC"
  86. autoplay="{{playerProcess[item.userID].autoplay}}"
  87. mute-audio="{{playerProcess[item.userID].muteAudio}}"
  88. mute-video="{{playerProcess[item.userID].muteVideo}}"
  89. orientation="{{playerProcess[item.userID].orientation}}"
  90. object-fit="{{playerProcess[item.userID].objectFit}}"
  91. background-mute="{{playerProcess[item.userID].enableBackgroundMute}}"
  92. min-cache="{{playerProcess[item.userID].minCache}}"
  93. max-cache="{{playerProcess[item.userID].maxCache}}"
  94. sound-mode="{{soundMode}}"
  95. enable-recv-message="{{playerProcess[item.userID].enableRecvMessage}}"
  96. auto-pause-if-navigate="{{playerProcess[item.userID].autoPauseIfNavigate}}"
  97. auto-pause-if-open-native="{{playerProcess[item.userID].autoPauseIfOpenNative}}"
  98. bindstatechange="playerStateChange"
  99. bindfullscreenchange="playerFullscreenChange" bindnetstatus="playNetStatus"
  100. bindaudiovolumenotify="playerAudioVolumeNotify"/>
  101. <!-- 音量图标 -->
  102. <view class="player-control">
  103. <image src="{{item.avatar || '../../static/default_avatar.png'}}"></image>
  104. <view class="name">{{item.nick || item.userID}}</view>
  105. </view>
  106. </view>
  107. </view>
  108. </view>
  109. </swiper-item>
  110. </block>
  111. </swiper>
  112. </view>
  113. <!-- 菜单 -->
  114. <view class="handle-btns">
  115. <view class="other-view {{callType === 1 ? 'black' : 'white'}}">
  116. <text>{{pusher.chatTime}}</text>
  117. </view>
  118. <view class="btn-list">
  119. <view class="button-container">
  120. <view class="btn-normal" bindtap="pusherAudioHandler">
  121. <image class="btn-image"
  122. src="{{pusher.enableMic? '../../static/audio-true.png': '../../static/audio-false.png'}} "></image>
  123. </view>
  124. <view class="{{callType === 2 ? 'white' : ''}}">麦克风</view>
  125. </view>
  126. <view class="button-container" wx:if="{{callType === 1}}">
  127. <view class="btn-hangup" bindtap="hangup">
  128. <image class="btn-image" src="../../static/hangup.png"></image>
  129. </view>
  130. <view class="{{callType === 2 ? 'white' : ''}}">挂断</view>
  131. </view>
  132. <view class="button-container">
  133. <view class="btn-normal" bindtap="toggleSoundMode">
  134. <image class="btn-image"
  135. src="{{soundMode === 'ear' ? '../../static/speaker-false.png': '../../static/speaker-true.png'}} "></image>
  136. </view>
  137. <text class="{{callType === 2 ? 'white' : ''}}">扬声器</text>
  138. </view>
  139. <view class="button-container" wx:if="{{callType === 2}}">
  140. <view class="btn-normal" bindtap="pusherVideoHandler">
  141. <image class="btn-image"
  142. src="{{pusher.enableCamera ? '../../static/camera-true.png': '../../static/camera-false.png'}} "></image>
  143. </view>
  144. <text class="white">摄像头</text>
  145. </view>
  146. </view>
  147. <view class="btn-list" wx:if="{{callType===2}}">
  148. <view class="btn-list-item other-view">
  149. <view class="btn-container">
  150. <view class="btn-hangup" bindtap="hangup">
  151. <image class="btn-image" src="../../static/hangup.png"></image>
  152. </view>
  153. <view wx:if="{{pusher.enableCamera}}" class="invite-calling-header-left">
  154. <image src="../../static/switch_camera.png" data-device="{{pusher.frontCamera}}"
  155. catch:tap="toggleSwitchCamera"/>
  156. </view>
  157. </view>
  158. <text class="white">挂断</text>
  159. </view>
  160. </view>
  161. </view>
  162. </view>