qjd-user-uniapp/jhlive/jhlive.nvue

<template>
	<view class="container-jhlive" data-type="jhlive">
    <JhliveApp 
      class="liveView"
      ref="liveView"
      :sdkAppID="sdkAppID"
      :userSig="userSig"
      :userid="userId" 
      :roomid="roomId" 
      :isAuthor="isAuthor"
      :linkMic="linkMic" 
      :liveEvent="handleLiveEvent" />
    <view class="top_left_box">
      <image class="top_left_box_img" :src="avatar"></image>
      <view class="top_left_box_text">
        <text class="top_left_box_text1">{{name}}</text>
        <text class="top_left_box_text2" >{{num}}</text>
      </view>
    </view>

    <view class="top-right-box">
			<view class="top-right-box-btn" v-if="isAuthor" @click="btnBeautify">
        <text class="top-right-box-btn-text">美颜</text>
      </view>
      <view class="top-right-box-btn" v-if="isAuthor" @click="btnChangeCamera">
        <text class="top-right-box-btn-text">切换</text>
      </view>
    </view>

    <view class="bottom-right-box">
      <view class="bottom-right-box-btn" @click="btnLike">
        <text class="bottom-right-box-btn-text">点赞</text>
      </view>
    </view>
	</view>
</template>

<script>

import LibGenerateTestUserSig from "./lib-generate-test-usersig-es.min";

// #ifdef MP-WEIXIN
import JhliveApp from './live-wechat';
//#endif

const LOGTAG = '--JHLIVE--:';
const EXPIRETIME = 604800;

export default {
  name: 'jhlive',
  // #ifdef MP-WEIXIN
  components: {JhliveApp},
  //#endif

	data() {
		return {
      userSig: '',
      beautifyLevel: false,
		};
	},

	props: {
    sdkAppID: Number,
    secretKey: String,
    userId: String,
    roomId: String,
    isAuthor: Boolean,
    linkMic: Boolean,
    name: String,
    avatar: String,
    num: String,
	},
	onLoad() {
    this.init();
	},
	onUnload() {
		this.destroy();
	},
	methods: {
    init() {
      this.remoteUsers = [];
      uni.setKeepScreenOn({
        keepScreenOn: true
      });
    },
    destroy() {
      uni.setKeepScreenOn({
        keepScreenOn: false
      });
      this.exitRoom()
    },
		enterRoom() {
      if(!this.$refs.liveView) {
        console.log(LOGTAG+'no jhlive');
        uni.showToast({
          title: '直播组件初始化失败',
          duration: 2000
        });
        return;
      }
      console.log(LOGTAG+'enterRoom', this.isAuthor, this.linkMic, this.sdkAppID, this.secretKey, this.userId, this.roomId);
      const generator = new LibGenerateTestUserSig(this.sdkAppID, this.secretKey, EXPIRETIME);
      this.userSig = generator.genTestUserSig(String(this.userId));
      this.$nextTick(() => this.$refs.liveView.enterRoom());
		},
		exitRoom() {
      console.log(LOGTAG+'exitRoom');
			this.$refs.liveView.exitRoom();
    },
    btnChangeCamera() {
      console.log(LOGTAG+'btnChangeCamera');
      this.$refs.liveView.switchCarema();
    },
    btnBeautify() {
      console.log(LOGTAG+'btnBeautify', this.beautifyLevel);
      // blv - 美颜级别取值范围0 - 9； 0表示关闭，1 - 9值越大
      // wlv - 亮度级别取值范围0 - 9； 0表示关闭，1 - 9值越大
      // beautyStyle  美颜风格.三种美颜风格：0 ：光滑 1：自然 2：朦胧
      this.beautifyLevel = !this.beautifyLevel;
      this.$refs.liveView.setBeauty(
        this.beautifyLevel?9:0,
        this.beautifyLevel?9:0,
        this.beautifyLevel?0:0,
      );
    },
    handleLiveEvent(event) {
      if(event.eventName=='onRemoteUserEnterRoom'&&!this.remoteUsers.find(v=>v==event.eventData)) {
        this.remoteUsers.push(event.eventData);
        this.$emit('onRemoteUser', this.remoteUsers);
      }else if(event.eventName=='onRemoteUserLeaveRoom') {
        this.remoteUsers = this.remoteUsers.filter(v=>v!=event.eventData);
        this.$emit('onRemoteUser', this.remoteUsers);
      }else if(event.eventName=='onError') {
        this.$emit('onError', event.eventData.msg);
        uni.showToast({
          title: event.eventData.msg,
          duration: 2000
        });
      }
    },
	}
};
</script>

<style scoped>

.container-jhlive {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: black;
  width: 100%;
  height: 100%;
}

.liveView {
  flex: 1;
}

.top_left_box {
  left: 0;
  top: 0;
  margin-left: 10px;
  margin-top: 10px;
  position: absolute;
  z-index: 100;
  background-color:rgba(0, 0, 0, 0.4);
  border-radius: 1000px;
  display: flex;
  flex-direction: row;
  padding: 10px;
}
.top_left_box_img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 1000px;
  background-color: white;
}
.top_left_box_text {
  margin-left: 10px;
  flex: 1;
}
.top_left_box_text1 {
  font-size: 28rpx;
  color: white;
}
.top_left_box_text2 {
  font-size: 20rpx;
  color: white;
}


.top-right-box {
  right: 0;
  top: 0;
  margin-top: 10px;
  margin-right: 10px;
  position: absolute;
  z-index: 100;
  display: flex;
  flex-direction: row;
}
.top-right-box-btn {
	color: white;
  margin-left: 5px;
}
.top-right-box-btn-text {
  color: white;
}


.bottom-left-box {
  left: 0;
  bottom: 0;
  margin-left: 10px;
  margin-bottom: 10px;
  position: absolute;
  z-index: 100;
}
.bottom-left-box-login {
  color: white;
}
.bottom-left-box-messages {

}
.bottom-left-box-message {

}
.bottom-left-box-input-box {

}
.bottom-left-box-input {
  color: #fff;
  font-size: 30rpx;
}


.bottom-right-box {
  right: 0;
  bottom: 0;
  margin-bottom: 10px;
  margin-right: 10px;
  position: absolute;
  z-index: 100;
  display: flex;
  flex-direction: row;
}
.bottom-right-box-btn {
	color: white;
  margin-left: 5px;
}
.bottom-right-box-btn-text {
	color: white;
}

</style>