Skip to content
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
209 lines (180 sloc) 7.86 KB

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

准备工作

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

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

部署签名服务

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

集成<webrtc-room> 组件

阅读文档 集成SDK(小程序),并按照里面的步骤将 <webrtc-room> 组件导入到您的小程序工程中之后,即可以按照如下步骤操作基本的音视频功能。

组装参数

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

  • sdkAppID 进入腾讯云实时音视频 控制台 创建一个新的应用,获得 SDKAPPID:

!SDKAPPID 是腾讯云后台用来区分不同实时音视频应用的唯一标识,在后续开发过程中需要用到。

  • userID 您可以随意指定,由于是字符串类型,可以直接跟您现有的账号体系保持一致,或者直接使用小程序的 openid,但请注意,同一个音视频房间里不应该有两个同名的 userID

  • userSig 基于 sdkAppID 和 userID 可以计算出 userSig,计算方法请参见 如何计算 UserSig

  • roomID 房间号是数字类型,您可以随意指定,但请注意,同一个应用里的两个音视频房间不能分配同一个 roomID

  • template 标识组件使用的界面模版,组件内置了 bigsmall,float,grid 三种布局,默认值为 float。

  • bindRoomEvent 监听 <webrtc-room> 组件返回的事件,便于定位问题。

准备好上面这些参数,我们就可以创建(或加入)一个音视频房间了。

进入(或创建)房间

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

Page({
    // ...
    joinRoom: function (res) {
        this.setData({
            userID: res.data.userID, // [必选]用户 ID,可以由您的服务指定,或者使用小程序的openid
            sdkAppID: res.data.sdkAppID, // [必选]开通实时音视频服务创建应用后分配的 sdkAppID
            roomID: res.data.roomID, // [必选]房间号,可以由您的服务指定
            userSig: res.data.userSig, // [必选]身份签名,需要从自行搭建的签名服务获取
            privateMapKey: '' // 一般不需要填
        }, function() {
            var webrtcroomCom = this.selectComponent('#webrtcroom');
            if (webrtcroomCom) {
                webrtcroomCom.start();
            }
            
        })
    },
    // ...
})

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

修改组件属性 muted 即可控制开启(或关闭)本地声音采集。

Page({
    // ...
    changeMute: function (isMuteMute) {
        this.data.muted = isMuteMute; // true or false
        this.setData({
            muted: this.data.muted
        });
    },
    // ...
})

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

修改组件属性 enableCamera 即可控制开启(或关闭)本地视频采集。

Page({
    // ...
    enableCamera: function (isEnableCamera) {
        this.data.enableCamera = isEnableCamera; // true or false
        this.setData({
            enableCamera: this.data.enableCamera
        });
    },
    // ...
})

切换摄像头

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

Page({
    // ...
    changeCamera: function () {
        this.data.webrtcroomComponent.switchCamera();
    },
    // ...
})

退出房间

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

Page({
    // ...
    exitRoom: function () {
        this.data.webrtcroomComponent.stop();
    },
    // ...
})

界面定制

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

  • setp1: 新建 /pages/templates/mytemplate 文件夹,并创建 mytemplate.wxml 和 mytemplate.wxss 文件。
  • setp2: 编写 mytemplate.wxml 和 mytemplate.wxss 文件。
//mytemplate.wxml
<template name='mytemplate'>
    <view class='videoview'>
        <view class="pusher-box">
            <live-pusher
                id="rtcpusher"
                autopush
                mode="RTC"
                url="{{pushURL}}"
                aspect="{{aspect}}"
                min-bitrate="{{minBitrate}}"
                max-bitrate="{{maxBitrate}}"
                audio-quality="high"
                beauty="{{beauty}}"
                muted="{{muted}}"
                waiting-image="https://mc.qcloudimg.com/static/img/daeed8616ac5df256c0591c22a65c4d3/pause_publish.jpg"
                background-mute="{{true}}"
                debug="{{debug}}"
                bindstatechange="onPush"
                binderror="onError">
                <cover-image  class='character' src="/pages/Resources/mask.png"></cover-image>
                <cover-view class='character' style='padding: 0 5px;'>我</cover-view>
            </live-pusher>
        </view>
        <view class="player-box" wx:for="{{members}}" wx:key="userID">
            <view class='poster'>
                <cover-image class='set' src="https://miniprogram-1252463788.file.myqcloud.com/roomset_{{index + 2}}.png">
                </cover-image>
            </view>
            <live-player
                id="{{item.userID}}"
                autoplay
                mode="RTC"
                wx:if="{{item.accelerateURL}}"
                object-fit="fillCrop"
                min-cache="0.1"
                max-cache="0.3"
                src="{{item.accelerateURL}}"
                debug="{{debug}}"
                background-mute="{{true}}"
                bindstatechange="onPlay">
                <cover-view class='loading' wx:if="{{item.loading}}">
                    <cover-image src="/pages/Resources/loading_image0.png"></cover-image>
                </cover-view>
                <cover-image  class='character' src="/pages/Resources/mask.png"></cover-image>
                <cover-view class='character' style='padding: 0 5px;'>{{item.userName}}</cover-view>
            </live-player>
        </view>
    </view>
</template>
//mytemplate.wxss
.videoview {
    background-repeat:no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}
  • setp3: 在 <webrtc-room> 组件里引入模版。
//为 <webrtc-room> 组件中的 webrtcroom.wxml 文件添加自定义模版
<import src='/pages/templates/mytemplate/mytemplate.wxml'/>
<view class='conponent-box'>
    <view styles="width:100%;height=100%;" wx:if="{{template=='1v3'}}">
        <template is='mytemplate' data="{{pushURL, aspect,
                      minBitrate, maxBitrate, beauty, muted, debug, members}}"/>
    </view>
</view>

//为 <webrtc-room> 组件中的 webrtcroom.wxss 文件添加自定义样式
@import "../templates/mytemplate/mytemplate.wxss";

! 当前版本中 <live-pusher> 和 <live-player> 标签跟小程序的 view 渲染体系的兼容性还不是很完美,zOrder 控制还有不少 bug,我们正在跟微信团队一起努力。

You can’t perform that action at this time.