There is a full Demo below and it works (VUE syntax)

The preparatory work

Make sure you complete the following steps before integrating the applets SDK

  • Created Tencent cloud real-time audio and video application, purchased corresponding packages, and obtained SDKAppID and key information.
  • Open small program categories and push and pull flow label permission.
  • Applets server domain name configuration.

How to reference

You can reference the file in the NPM package or download the trTC-wx. js file from the SDK resources. (I downloaded trTC-wx.js directly)

NPM installation:

npm install trtc-wx-sdk

import TRTC from 'trtc-wx-sdk'
Copy the code

Step 1: Create a WXML file template that matches your business scenario

Based on your business scenario, write WXML files and create &DXlt; live-pusher&dxgt; And & DXLT; live-player&dxgt; And bind the attributes on the tag to the methods provided by TRTC-WX

<template> <view style="height: 100%;" > <live-pusher class="pusher" :url="pusher.url" :mode="pusher.mode" :autopush="pusher.autopush" :enable-camera="pusher.enableCamera" :enable-mic="pusher.enableMic" :muted="! pusher.enableMic" :enable-agc="pusher.enableAgc" :enable-ans="pusher.enableAns" :enable-ear-monitor="pusher.enableEarMonitor" :auto-focus="pusher.enableAutoFocus" :zoom="pusher.enableZoom" :min-bitrate="pusher.minBitrate" :max-bitrate="pusher.maxBitrate" :video-width="pusher.videoWidth" :video-height="pusher.videoHeight" :beauty="pusher.beautyLevel" :whiteness="pusher.whitenessLevel" :orientation="pusher.videoOrientation" :aspect="pusher.videoAspect" :device-position="pusher.frontCamera" :remote-mirror="pusher.enableRemoteMirror" :local-mirror="pusher.localMirror" :background-mute="pusher.enableBackgroundMute" :audio-quality="pusher.audioQuality" :audio-volume-type="pusher.audioVolumeType" :audio-reverb-type="pusher.audioReverbType" :waiting-image="pusher.waitingImage" :beauty-style="pusher.beautyStyle" :filter="pusher.filter" @statechange="_pusherStateChangeHandler" @netstatus="_pusherNetStatusHandler" @error="_pusherErrorHandler" @bgmstart="_pusherBGMStartHandler" @bgmprogress="_pusherBGMProgressHandler" @bgmcomplete="_pusherBGMCompleteHandler" @audiovolumenotify="_pusherAudioVolumeNotify" /> <! -- The playerList should be an array of length 3, --> <view V -for="(item,index) in playerList" :key="index" :id="'player-'+ item.streamid "> <live-player class="player" :id="item.id" :data-streamid="item.streamid" :src="item.src" :mode="RTC" :autoplay="item.autoplay" :mute-audio="item.muteAudio" :mute-video="item.muteVideo" :orientation="item.orientation" :object-fit="item.objectFit" :background-mute="item.enableBackgroundMute" :min-cache="item.minCache" :max-cache="item.maxCache" :sound-mode="item.soundMode" :enable-recv-message="item.enableRecvMessage" :auto-pause-if-navigate="item.autoPauseIfNavigate" :auto-pause-if-open-native="item.autoPauseIfOpenNative" :debug="debug" @statechange="_playerStateChange" @fullscreenchange="_playerFullscreenChange" @netstatus="_playerNetStatus" @audiovolumenotify="_playerAudioVolumeNotify" /> </view> </view> </template>Copy the code

Exported in the TRTC-WX package is a class called TRTC, which you need to instantiate on the current page during the onLoad life cycle, while creating Pusher and listening for events thrown by TRTC

// Create a new TRTC class in the life cycle */ onLoad: Function (options) {var that = this that.TRTC = new TRTC(that) that.EVENT = that.trtc Thate.trtc.on (thate.event. LOCAL_JOIN, (EVENT) => {console.log(' localhost ', event.stream)}, that) This.pusher = this.trtc.createpusher ({'frontCamera': 'back'}) this.enterroom (); },Copy the code

Step 2: Start pushing the flow

The first step is to enter our TRTC room and call the enterRoom method

enterRoom(options) { var that = this const Signature = genTestUserSig('sssss') console.log(Signature, EnterRoom ({sdkAppID: signature. sdkAppID, // Your Tencent cloud account userID: 'SSSSS ', // userID of current room-user userSig: signature. userSig, // userSig roomID: 1234, // your roomID, enableMic: EnableCamera: enableCamera: True, the default / / into the room to open video uplink debugMode: true,}), that the TRTC. GetPusherInstance (). The start () / / push flow},Copy the code

Below is the complete code, has run, test can call (just run normal audio and video call), can increase the corresponding function according to their own business needs (replication plus GenerateTestUserSig. Js files will do.)

GenerateTestUserSig. See the official documentation for the configuration of js

<template> <view style="height: 100%;" > <live-pusher class="pusher" :url="pusher.url" :mode="pusher.mode" :autopush="pusher.autopush" :enable-camera="pusher.enableCamera" :enable-mic="pusher.enableMic" :muted="! pusher.enableMic" :enable-agc="pusher.enableAgc" :enable-ans="pusher.enableAns" :enable-ear-monitor="pusher.enableEarMonitor" :auto-focus="pusher.enableAutoFocus" :zoom="pusher.enableZoom" :min-bitrate="pusher.minBitrate" :max-bitrate="pusher.maxBitrate" :video-width="pusher.videoWidth" :video-height="pusher.videoHeight" :beauty="pusher.beautyLevel" :whiteness="pusher.whitenessLevel" :orientation="pusher.videoOrientation" :aspect="pusher.videoAspect" :device-position="pusher.frontCamera" :remote-mirror="pusher.enableRemoteMirror" :local-mirror="pusher.localMirror" :background-mute="pusher.enableBackgroundMute" :audio-quality="pusher.audioQuality" :audio-volume-type="pusher.audioVolumeType" :audio-reverb-type="pusher.audioReverbType" :waiting-image="pusher.waitingImage" :beauty-style="pusher.beautyStyle" :filter="pusher.filter" @statechange="_pusherStateChangeHandler" @netstatus="_pusherNetStatusHandler" @error="_pusherErrorHandler" @bgmstart="_pusherBGMStartHandler" @bgmprogress="_pusherBGMProgressHandler" @bgmcomplete="_pusherBGMCompleteHandler" @audiovolumenotify="_pusherAudioVolumeNotify" /> <! -- The playerList should be an array of length 3, --> <view V -for="(item,index) in playerList" :key="index" :id="'player-'+ item.streamid "> <live-player class="player" :id="item.id" :data-streamid="item.streamid" :src="item.src" :mode="RTC" :autoplay="item.autoplay" :mute-audio="item.muteAudio" :mute-video="item.muteVideo" :orientation="item.orientation" :object-fit="item.objectFit" :background-mute="item.enableBackgroundMute" :min-cache="item.minCache" :max-cache="item.maxCache" :sound-mode="item.soundMode" :enable-recv-message="item.enableRecvMessage" :auto-pause-if-navigate="item.autoPauseIfNavigate" :auto-pause-if-open-native="item.autoPauseIfOpenNative" :debug="debug" @statechange="_playerStateChange" @fullscreenchange="_playerFullscreenChange" @netstatus="_playerNetStatus" @audiovolumenotify="_playerAudioVolumeNotify" /> </view> </view> </template><script> import {genTestUserSig} from '.. /.. /debug/GenerateTestUserSig.js' import TRTC from '.. /.. /common/trtc-wx.js' export default { data() { return { pusher: {}, playerList: {}, EVENT: null}}, function / * * * life cycle - listening page load * / onLoad: function(options) { var that = this that.TRTC = new TRTC(that) that.EVENT = that.TRTC.EVENT Thate.trtc.on (thate.event. LOCAL_JOIN, (EVENT) => {console.log(' LOCAL_JOIN ', event.stream)}, that) that.TRTC.on(that.EVENT.REMOTE_USER_JOIN, (event)=>{console.log(' remote access ',event.stream)},that) this.trtc.on (tha.event.local_leave, (event)=>{console.log(' local check-out succeeded ',event.stream)}) Thate.pusher = thate.trtc.createpusher ({'frontCamera': 'back'}) thate.enterroom (); }, onShow() { }, methods: { enterRoom(options) { var that = this const Signature = genTestUserSig('sssss') console.log(Signature, EnterRoom ({sdkAppID: signature. sdkAppID, // Your Tencent cloud account userID: 'SSSSS ', // userID of current room-user userSig: signature. userSig, // userSig roomID: 1234, // your roomID, enableMic: EnableCamera: enableCamera: True, the default / / into the room to open video uplink debugMode: true,}), that the TRTC. GetPusherInstance (). The start () / / push flow}, } } </script> <style scoped lang="scss"> .pusher{ height: 100%; } </style>Copy the code