jhlive.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <view class="container-jhlive" data-type="jhlive">
  3. <liveView
  4. class="liveView"
  5. ref="liveView"
  6. :sdkAppID="sdkAppID"
  7. :userSig="userSig"
  8. :userid="userId"
  9. :roomid="roomId"
  10. :isAuthor="isAuthor"
  11. :linkMic="linkMic" />
  12. <view class="top_left_box">
  13. <image class="top_left_box_img" :src="avatar"></image>
  14. <view class="top_left_box_text">
  15. <text class="top_left_box_text1">{{name}}</text>
  16. <text class="top_left_box_text2" >{{num}}</text>
  17. </view>
  18. </view>
  19. <view class="top-right-box">
  20. <view class="top-right-box-btn" v-if="isAuthor" @click="btnBeautify">
  21. <text class="top-right-box-btn-text">美颜</text>
  22. </view>
  23. <view class="top-right-box-btn" v-if="isAuthor" @click="btnChangeCamera">
  24. <text class="top-right-box-btn-text">切换</text>
  25. </view>
  26. </view>
  27. <view class="bottom-right-box">
  28. <view class="bottom-right-box-btn" @click="btnLike">
  29. <text class="bottom-right-box-btn-text">点赞</text>
  30. </view>
  31. </view>
  32. </view>
  33. </template>
  34. <script>
  35. import LibGenerateTestUserSig from "./lib-generate-test-usersig-es.min";
  36. // #ifdef MP-WEIXIN
  37. import liveView from './live-wechat';
  38. //#endif
  39. // #ifdef H5
  40. import liveView from './live-app';
  41. //#endif
  42. // #ifdef APP-PLUS
  43. import liveView from './live-app';
  44. //#endif
  45. const LOGTAG = '--JHLIVE--:';
  46. const EXPIRETIME = 604800;
  47. export default {
  48. name: 'jhlive',
  49. components: { liveView },
  50. data() {
  51. return {
  52. userSig: '',
  53. beautifyLevel: false,
  54. };
  55. },
  56. props: {
  57. sdkAppID: Number,
  58. secretKey: String,
  59. userId: String,
  60. roomId: String,
  61. isAuthor: Boolean,
  62. linkMic: Boolean,
  63. name: String,
  64. avatar: String,
  65. num: Number,
  66. },
  67. onLoad() {
  68. this.init();
  69. },
  70. onUnload() {
  71. this.destroy();
  72. },
  73. methods: {
  74. init() {
  75. uni.setKeepScreenOn({
  76. keepScreenOn: true
  77. });
  78. },
  79. destroy() {
  80. uni.setKeepScreenOn({
  81. keepScreenOn: false
  82. });
  83. this.exitRoom()
  84. },
  85. enterRoom() {
  86. console.log(LOGTAG+'enterRoom', this.isAuthor, this.linkMic, this.sdkAppID, this.secretKey, this.userId, this.roomId);
  87. const generator = new LibGenerateTestUserSig(this.sdkAppID, this.secretKey, EXPIRETIME);
  88. this.userSig = generator.genTestUserSig(String(this.userId));
  89. this.$nextTick(() => this.$refs.liveView.enterRoom());
  90. },
  91. exitRoom() {
  92. console.log(LOGTAG+'exitRoom');
  93. this.$refs.liveView.exitRoom();
  94. },
  95. btnChangeCamera() {
  96. console.log(LOGTAG+'btnChangeCamera');
  97. this.$refs.liveView.switchCarema();
  98. },
  99. btnBeautify() {
  100. console.log(LOGTAG+'btnBeautify', this.beautifyLevel);
  101. // blv - 美颜级别取值范围0 - 9; 0表示关闭,1 - 9值越大
  102. // wlv - 亮度级别取值范围0 - 9; 0表示关闭,1 - 9值越大
  103. // beautyStyle 美颜风格.三种美颜风格:0 :光滑 1:自然 2:朦胧
  104. this.beautifyLevel = !this.beautifyLevel;
  105. this.$refs.liveView.setBeauty(
  106. this.beautifyLevel?9:0,
  107. this.beautifyLevel?9:0,
  108. this.beautifyLevel?0:0,
  109. );
  110. }
  111. }
  112. };
  113. </script>
  114. <style scoped>
  115. .container-jhlive {
  116. position: relative;
  117. display: flex;
  118. flex-direction: column;
  119. align-items: stretch;
  120. background-color: black;
  121. width: 100%;
  122. height: 100%;
  123. }
  124. .liveView {
  125. flex: 1;
  126. }
  127. .top_left_box {
  128. left: 0;
  129. top: 0;
  130. margin-left: 10px;
  131. margin-top: 10px;
  132. position: absolute;
  133. z-index: 100;
  134. background-color:rgba(0, 0, 0, 0.4);
  135. border-radius: 1000px;
  136. display: flex;
  137. flex-direction: row;
  138. padding: 10px;
  139. }
  140. .top_left_box_img {
  141. width: 80rpx;
  142. height: 80rpx;
  143. border-radius: 1000px;
  144. background-color: white;
  145. }
  146. .top_left_box_text {
  147. margin-left: 10px;
  148. flex: 1;
  149. }
  150. .top_left_box_text1 {
  151. font-size: 28rpx;
  152. color: white;
  153. }
  154. .top_left_box_text2 {
  155. font-size: 20rpx;
  156. color: white;
  157. }
  158. .top-right-box {
  159. right: 0;
  160. top: 0;
  161. margin-top: 10px;
  162. margin-right: 10px;
  163. position: absolute;
  164. z-index: 100;
  165. display: flex;
  166. flex-direction: row;
  167. }
  168. .top-right-box-btn {
  169. color: white;
  170. margin-left: 5px;
  171. }
  172. .top-right-box-btn-text {
  173. color: white;
  174. }
  175. .bottom-left-box {
  176. left: 0;
  177. bottom: 0;
  178. margin-left: 10px;
  179. margin-bottom: 10px;
  180. position: absolute;
  181. z-index: 100;
  182. }
  183. .bottom-left-box-login {
  184. color: white;
  185. }
  186. .bottom-left-box-messages {
  187. }
  188. .bottom-left-box-message {
  189. }
  190. .bottom-left-box-input-box {
  191. }
  192. .bottom-left-box-input {
  193. color: #fff;
  194. font-size: 30rpx;
  195. }
  196. .bottom-right-box {
  197. right: 0;
  198. bottom: 0;
  199. margin-bottom: 10px;
  200. margin-right: 10px;
  201. position: absolute;
  202. z-index: 100;
  203. display: flex;
  204. flex-direction: row;
  205. }
  206. .bottom-right-box-btn {
  207. color: white;
  208. margin-left: 5px;
  209. }
  210. .bottom-right-box-btn-text {
  211. color: white;
  212. }
  213. </style>