跑通通话模式(小程序)

最近更新时间:2020-04-29 10:29:39

本文主要介绍腾讯云 TRTC SDK 的几个最基本功能的使用方法,阅读此文档有助于您对 TRTC 的基本使用流程有一个简单的认识。

准备工作

在使用基本功能前,请确保您已完成以下步骤,详情请参见 跑通Demo(小程序)快速集成(小程序)

  • 创建了腾讯云实时音视频应用,购买了相应的套餐,并获取到 SDKAppID 和密钥信息。
  • 开通小程序类目与推拉流标签权限。
  • 小程序服务器域名配置。
  • 在您的小程序项目中集成 <trtc-room> 组件。

部署签名服务

在初始化组件时需要签名服务进行签发 UserSig,详情请参见 如何计算 UserSig

组装参数

要使用 <trtc-room> 组件,必须准备好如下参数:

  • scene
    • rtc:实时通话,采用优质线路,同一房间中的人数不应超过300人。
    • live:直播模式,采用混合线路,支持单一房间十万人在线(同时上麦的人数应控制在20人以内)。
  • SDKAppID
    进入腾讯云实时音视频 控制台 创建一个新的应用,获得 SDKAppID
  • UserID
    UserID为字符串类型,您可以自定义指定。例如,直接与您现有的账号体系保持一致,或直接使用小程序的 openid。
    注意:

    同一个音视频房间里不能存在两个相同的 userID

  • UserSig
    基于 SDKAppID 和 UserID 可以计算出 UserSig,计算方法请参见 如何计算 UserSig
  • template
    组件内置的画面排版模式,支持如下三种模式:
    • "1v1":大小画面上下叠加。
    • "grid":网格模版,画面间相互重叠,最多显示9路画面。
    • "custom":自定义,需要您通过 setViewRect 和 setViewZIndex 等接口自行处理或者修改组件的 custom 模版。
  • roomID
    房间号是数字类型,您可以自定义指定。
    注意:

    同一个应用里的两个音视频房间不能分配同一个 roomID

集成组件

  1. 在需要引入组件的页面目录下,配置相应页面的 xxx.json 文件。
    // index.json
    "usingComponents": {
    "trtc-room": "/components/trtc-room/trtc-room"
    }
  2. 在相应页面的 xxx.wxml 文件中使用标签。
    // index.wxml
    <trtc-room id="trtcroom" config="{{trtcConfig}}"></trtc-room>

进入(或创建)房间

设置 <trtc-room> 组件的属性后,获取 <trtc-room> 组件的对象实例,并调用对象实例的 enterRoom() 方法即可完成初始化和进入房间。

Page({
    // ...
    enterRoom: function (options) {
        this.setData({
            userID: res.data.userID, // [必选]用户 ID,可以由您的服务指定,或者使用小程序的openid
            sdkAppID: res.data.sdkAppID, // [必选]开通实时音视频服务创建应用后分配的 sdkAppID
            userSig: res.data.userSig, // [必选]身份签名,需要从自行搭建的签名服务获取
            template: 'grid'        // 画面排版模式
        }, function() {
            let trtcRoomContext = this.selectComponent('#trtcroom')
            let EVENT = trtcRoomContext.EVENT
            this.trtcRoomContext = trtcRoomContext
            if(trtcRoomContext) {
                trtcRoomContext.on(EVENT.LOCAL_JOIN, (event)=>{
                    // 本地进房成功,发布本地音频流和视频流
                    trtcRoomContext.publishLocalVideo()
                    trtcRoomContext.publishLocalAudio()
                })

                // 监听远端用户的视频流的变更事件
                trtcRoomContext.on(EVENT.REMOTE_VIDEO_ADD, (event)=>{
                    // 订阅(即播放)远端用户的视频流
                    let userID = event.data.userID
                    let streamType = event.data.streamType// 'main' or 'aux'            
                    trtcRoomContext.subscribeRemoteVideo({userID: userID, streamType: streamType})
                    // 或者取消订阅远端用户的视频流
                    // trtcRoomContext.unsubscribeRemoteVideo({userID: userID, streamType: streamType})
                })

                // 监听远端用户的音频流的变更事件
                trtcRoomContext.on(EVENT.REMOTE_AUDIO_ADD, (event)=>{
                    // 订阅(即播放)远端用户的音频流
                    let userID = event.data.userID
                    trtcRoomContext.subscribeRemoteAudio(userID)
                    // 或者取消订阅远端用户的音频流
                    // trtcRoomContext.unsubscribeRemoteAudio(userID)
                })

                // 进入房间
                trtcRoomContext.enterRoom({roomID: 1002}).catch((res)=>{
                    //注意:进入房间成功通过事件 LOCAL_JOIN 通知
                    console.error('room joinRoom 进房失败:', res)
                })
            }
        })
    },
    // ...
})

开启(或关闭)本地声音采集

通过组件实例的 API publishLocalAudio() unpublishLocalAudio() 即可控制开启(或关闭)本地声音采集。

Page({
    // ...
    enableLocalAudio: function () {
        this.trtcRoomContext.publishLocalAudio()
    },
    // ...
})

开启(或关闭)本地视频采集

通过组件实例的 API publishLocalVideo() unpublishLocalVideo() 即可控制开启(或关闭)本地视频采集。

Page({
    // ...
    enableLocalCamera: function (isEnableCamera) {
        this.trtcRoomContext.publishLocalVideo()
    },
    // ...
})

切换摄像头

调用组件实例方法 switchCamera() 即可切换摄像头。

Page({
    // ...
    changeCamera: function () {
        this.trtcRoomContext.switchCamera()
    },
    // ...
})

退出房间

调用组件实例方法 stop() 即可退出房间。

Page({
    // ...
    exitRoom: function () {
        this.trtcRoomContext.exitRoom().then(()=>{
            // 退出房间成功
        })
    },
    // ...
})

界面定制

<trtc-room> 组件支持定制多个视频画面的排布位置,如果已有的模版不能满足您的需求,可以按照如下步骤进行定制。

  1. 新建 /pages/templates/mytemplate 文件夹。
  2. 创建并编辑 mytemplate.wxml。
    //mytemplate.wxml
    <template name='mytemplate'>
     <view class='videoview'>
         <view class="pusher-box">
             <live-pusher
                 class="pusher"
                 url="{{pusher.url}}"
                 mode="{{pusher.mode}}"
                 autopush="{{pusher.autopush}}"
                 enable-camera="{{pusher.enableCamera}}"
                 enable-mic="{{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}}"
                 debug="{{debug}}"
                 bindstatechange="_pusherStateChangeHandler"
                 bindnetstatus="_pusherNetStatusHandler"
                 binderror="_pusherErrorHandler"
                 bindbgmstart="_pusherBGMStartHandler"
                 bindbgmprogress="_pusherBGMProgressHandler"
                 bindbgmcomplete="_pusherBGMCompleteHandler"
             />
         </view>
         <view class="player-box" wx:for="{{streamList}}" wx:key="streamID">
             <view class='poster'>
                 <cover-image class='set' src="https://miniprogram-1252463788.file.myqcloud.com/roomset_{{index + 2}}.png">
                 </cover-image>
             </view>
             <live-player
                 class="player"
                 id="{{item.streamID}}"
                 data-userid="{{item.userID}}"
                 data-streamid="{{item.streamID}}"
                 data-streamtype="{{item.streamType}}"
                 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}}"
                 bindstatechange="_playerStateChange"
                 bindfullscreenchange="_playerFullscreenChange"
                 bindnetstatus="_playerNetStatus"
                 bindaudiovolumenotify  ="_playerAudioVolumeNotify"
             />
         </view>
     </view>
    </template>
  3. 创建并编辑 mytemplate.wxss 文件。
    //mytemplate.wxss
    .videoview {
     background-repeat:no-repeat;
     background-size: cover;
     width: 100%;
     height: 100%;
    }
  4. 在 <trtc-room> 组件里引入模版。
    //为 <trtc-room> 组件中的 trtc-room.wxml 文件添加自定义模版
    <import src='/pages/templates/mytemplate/mytemplate.wxml'/>
    <view class="trtc-room-container">
    // ...
    <block wx:if="{{template === 'mytemplate'}}">
     <template is='mytemplate' data="{{pusher, streamList}}"></template>
    </block>
    // ...
    </view>
    //为 <trtc-room> 组件中的 trtc-room.wxss 文件添加自定义样式
    @import "../templates/mytemplate/mytemplate.wxss";
目录