[play with Tencent cloud] & lt; trtc-room＆gt; Applet component usage

< trtc-room > It is a multi terminal real-time audio and video processing scheme launched by Tencent , Official address Introduction . Here are some personal experiences of using this component . use TRTC after , Interworking at each end , You can even use small programs , stay QQ Communicate with wechat , On the web side ,pc Both ends have good support （Electron Also have , Front end Gospel ）. add TIM Instant messaging capabilities , You can directly build an enterprise level live broadcast application , If you add Tencent whiteboard , Directly become a small helper in the meeting , Teaching killer , Business scenarios can be freely combined on real-time audio and video services .

Get the code

Can be in github Download the latest code , You can also download the code package directly on the official website , Two addresses are posted here github Tencent cloud official website Code clone Come down or decompress it , Will see trtc-room Code package of a component of , If you just want to access it quickly , Can directly Get through the official website demo, Pay attention to opening up here live-pusher and live-player Authority , The official applet requires separate authorization for these two components .

Code Introduction

pages

• index Index pages of three scene portals
• meeting Multiplayer meeting setup page
• room Multiplayer meeting page
• videocall Two person conversation
• voice-room Speech room

The above is a picture of the app on Tencent's official website ,demo There are three scenarios , Speech room , Two person conversation , A meeting of many people , In this meeting scenario , There are still a lot of places to set ,live-pusher and live-player There are many other properties that can be set . Just to mention here , The page Jump in the component is used uniformly navigateTo, If you use redirectTo Page Jump , Android return key , A false phenomenon that may cause the applet to hang , Here, the recovery time of the page depends on the memory recovery mechanism of the wechat applet , It is not recommended to have live-pusher or live-player The page is placed at the top of the page stack . in addition , For the problem that the applet hangs , Wechat is already launching official solutions , You can always follow the latest developments .

Components trtc-room

• common Inside is the event that the component provides to the outside , Including local and remote default States, etc , There will be detailed notes in this
• user-controller Here is the communication member management module , There are remote members （ downstream ） Management module , It will handle the events thrown by wechat . Here is a brief introduction to the events ,1031 Notification of entry of remote member , 1032 Remote member check out notification , 1033 Notification of remote user video status bit change （ close / Opening and closing ）, 1034 Notification of remote user audio status bit change .
• model It defines the local flow （pusher）, Distal flow （stream）, And the user （user） The basic data structure , One user Maybe there are two stream Of , because pc End or web After screen sharing is enabled, the client will share the same userId Of
• template It contains three templates , Namely 1v1,custom,grid, You can choose according to your type ,custom It can be directly through API To set the display position , I don't think it is in line with the development habits of the front end ,1v1 Call mode , and grid The conference mode of can be directly modified .

Components use

1. Sign up for Tencent cloud account . Is to register a good account SDKAppid and SECRETKEY Fill in .

2、 Enter the room after filling in the corresponding data

this.setData({
 trtcConfig:{
     sdkAppID: '1401000123',  //  Open the real-time audio and video service and allocate the data after creating the application  SDKAppID
     userID: 'test_user_001', //  user  ID, It can be specified by your account system 
     userSig: 'xxxxxxxxxxxx', //  Identity signature , Equivalent to the role of login password 
     template: 'grid',        //  Screen layout mode 
 }
}

     //  Publish local audio and video streams 
     trtcRoomContext.publishLocalVideo()
     trtcRoomContext.publishLocalAudio()

     //  Listen for the change event of the video stream of the remote user 
     trtcRoomContext.on(EVENT.REMOTE_VIDEO_ADD, (event)=>{
         //  subscribe （ Play now ） Remote user's video stream 
         let userID = event.data.userID
         let streamType = event.data.streamType// 'main' or 'aux'            
         trtcRoomContext.subscribeRemoteVideo({userID: userID, streamType: streamType})
     })

     //  Listen for the change event of the audio stream of the remote user 
     trtcRoomContext.on(EVENT.REMOTE_AUDIO_ADD, (event)=>{
         //  subscribe （ Play now ） Remote user's audio stream 
         let userID = event.data.userID
         trtcRoomContext.subscribeRemoteAudio(userID)
     })

     //  get into the room 
     trtcRoomContext.enterRoom({roomID: 1002}).catch((res)=>{
         console.error('room joinRoom  Failed to enter the house :', res)
     })

3、 Disable remote audio and video streaming

unsubscribeRemoteVideo(params)
unsubscribeRemoteAudio(params)

4、 Turn off local audio and video

unpublishLocalVideo()
unpublishLocalAudio()

5、 Check out

exitRoom()

more API