uniapp 腾讯云-----直播

<template>

<view class="chatBox" >

<TX-PlayView

appId=1400249380

appKey="e1262d907666861cefb431c67a859d9ac0cf369bd9126c4f337116e9571b8073"

:roomId="roomId"

:userId="userName"

role=20

scene=0

ref="maxTxPlayView"

class="maxTxPlayView"

:style="{height:windowHeight}"

whiteness=9

ruddiness=2

beauty=9

beatyStyle=0

videoResolution=108

videoBitrate=500

videoFps=15

resMode=1

enableLocalPreview=true

enableLocalAudio=true

@statechange="onPush"

></TX-PlayView>

<view class="header">

<text @click="changeMode" class="viewIco">&#xe600;</text>

<TX-PlayView

:remoteUserId="hisId"

ref="minTxPlayView"

class="minTxPlayView"

:style="minStyle"></TX-PlayView>

</view>

<view class="foot">

<view class="inputBoxAll">

<view>

<picker class="inputBox" @change="roomId = roomIdS[$event.detail.value]" :range="roomIdS">

<text class="inputTitle">房间号</text>

<view class="input" >{{roomId}}</view>

</picker>

</view>

<text class="join" @click="join()">进入</text>

</view>

<view class="circleBoxAll">

<view class="circleBox" @click="startAll()">

<text class="circleIco phone">&#xe626;</text>

<text class="hint">开始推流</text>

</view>

<view class="circleBox" @click="stopAll">

<text class="circleIco phone">&#xe6f9;</text>

<text class="hint">取消推流</text>

</view>

<view class="circleBox" @click="switchCamera()">

<text class="circleIco phone">&#xe6aa;</text>

<text class="hint">转换摄像头</text>

</view>

</view>

</view>

</view>

</template>

<script>

const trtcCloud = uni.requireNativePlugin('TX-TRTCCloud');

export default {

data() {

return {

roomIdS:[666,888,686,868],

roomId: 868,

hisId:null,

userName:"aa",

windowHeight:0,

mode:"me",//大小窗口显示模式

}

},

onLoad() {

this.windowHeight = uni.getSystemInfoSync().windowHeight;

//设备的唯一标识

this.userName = plus.device.uuid;

},

onReady() {

this.join();

},

onNavigationBarButtonTap() {

uni.navigateBack({

delta: 1,

animationType: 'pop-out',

animationDuration: 200

});

},

onBackPress() {

trtcCloud.exitRoom();

trtcCloud.destroySharedIntance();

},

methods: {

switchCamera(){

trtcCloud.switchCamera();

},

startAll(){

this.$refs.maxTxPlayView.startLocalPreview();

this.$refs.minTxPlayView.startRemoteView(this.hisId);

},

stopAll(){

this.$refs.maxTxPlayView.stopLocalPreview();

this.$refs.minTxPlayView.stopRemoteView(this.hisId);

},

hideKeyboard(){

console.log('hideKeyboard');

},

onPush(e){

var result = e.detail

switch (result.type) {

case 'onFirstVideoFrame':

console.log('onFirstVideoFrame');

break;

case 'onUserEnter':

this.hisId = result.userId;

// this.$refs.minTxPlayView.startRemoteView(result.userId);

break;

}

},

join(){

//主要步骤如下：

//1. 开启本地视频的预览画面，并开启声音

this.$refs.maxTxPlayView.joinRoom();

}

},

beforeCreate : function(){

// #ifdef APP-PLUS-NVUE

const domModule = weex.requireModule('dom')

domModule.addRule('fontFace', {

'fontFamily': "iconfont",

'src': 'url("'+"file:/" + plus.io.convertLocalFileSystemURL("_www/static/iconfont.ttf")+'")'

});

// #endif

},

}

</script>

<style lang="scss">

.chatBox{

width: 750upx;

flex: 1;

flex-direction: column;

background-color:#111111;

}

.header{

width: 750upx;

position: fixed;

top:0 ;

left: 0;

margin:20upx 0;

flex-direction: row;

justify-content: space-between;

}

.viewIco{

margin-left: 20upx;

font-family:iconfont;

font-size:60upx;

color: #FFFFFF;

}

.maxTxPlayView{

width:750upx;

background-color:#111111;

position: fixed;

top: 0;

right: 0;

}

.minTxPlayView{

width:300upx;

height:400upx;

position: fixed;

background-color:#000000;

right:20upx;

top:20upx;

/* border-radius: 10px; */

/* border-style: solid;

border-width: 1px;

border-color:#fefefe;

*/

}

.foot{

width: 710upx;

position: fixed;

bottom:0;

left: 0;

margin:20upx;

align-items: center;

justify-content: center;

flex-direction: row;

flex-direction: column;

}

.circleBoxAll{

flex-direction: row;

justify-content: center;

align-items: center;

}

.inputBoxAll{

flex-direction: row;

align-items: center;

}

.inputBox{

flex-direction: row;

margin: 15upx;

padding: 15upx;

background-color: #FFFFFF;

border-radius: 6px;

}

.inputTitle{

height:80upx;

line-height: 80upx;

}

.input{

height:80upx;

width:340upx;

font-size:30upx;

padding: 15upx;

}

.join{

background-color: #DD524D;

width: 80px;

height: 130px;

line-height: 130px;

text-align: center;

color: #FFFFFF;

border-radius: 10px;

}

.circleBox{

width: 200upx;

padding:30upx 0;

margin:10upx;

align-items: center;

flex-direction: column;

}

.circleIco{

font-size:30upx;

width:100upx;

height:100upx;

line-height:100upx;

border-radius: 500px;

border-style: solid;

border-width: 1px;

border-color:#FFFFFF;

text-align: center;

font-family:iconfont;

color: #FFFFFF;

font-size:50upx;

}

.phone{

background-color:#c5433a;

border-style: solid;

border-width: 1px;

border-color:#c5433a;

}

.hint{

font-size:30upx;

color: #FFFFFF;

padding-top:20upx;

}

</style>