rtc-room 实时音视频通话房间

基础库 v3.200.106 起支持，默认为同层渲染。

解释：实时音视频 RTC 房间，内部由多个 rtc-room-item 组件。该组件还提供丰富的 API 来控制登录、退出房间，发布 / 取消发布本地流，订阅 / 取消订阅远端流，控制远端流音视频等，详见 swan.createRtcRomContext 。只针对以下一级类目及其二级类目开放，详见支持服务类目。需要先通过类目审核，再在小程序管理后台，“开发管理 -> 功能管理”页面的“实时音视频通话”模块中自助开通该组件权限，详见接入流程。
Web 态说明：Web 态使用降级方案支持 rtc 实时音视频。设置 rtc-room 组件的相关属性和方法无效。

支持服务类目

接入流程

1.【小程序】支持在“开发者平台 -> 开发管理 -> 功能管理 -> 实时音视频通话”开通使用。

当该小程序类目不属于上述类目时，暂不支持开通该服务，支持服务类目见文中支持服务类目。

2. 【小程序】符合类目要求时，点击开通后引导进入智能云平台进行登录。

3. 注册完成后进“云资源访问授权页面”，点击授权后进行实名认证判断：

3.1 当实名认证已完成后，则跳转至小程序开发者平台，表示开通完成；

3.2 当实名认证未完成时，则跳转至实名认证页面进行认证，按照页面指引进行认证。

认证申请提交后等待审核结果，预计半小时左右。

（1）审核通过后智能云短信通知，重新打开小程序开发者平台，表示开通完成。

（2）审核未通过后智能云短信通知，重新打开小程序开发者平台，表示未审核成功，点击『立即认证』查看认证失败原因并重新认证。

4. 在开发者平台点击『实时音视频通话』进入智能云 RTC 控制台，创建应用获取 SDKAppID ，按照操作指南进行开发。

5. 开发完成后可在小程序平台进行 RTC 更多操作和查看：

• 查看费用：跳转到智能云平台快速查看消耗费用明细情况。
• 关闭：快速暂停该能力使用，暂停后不再耗费费用，该能力也无法使用。
• 开通：重新使用该能力，开通后该能力可以继续使用，随着使用开始消耗费用。

属性说明

device-position 有效值

local-mirror 有效值

sound-mode 有效值

状态码

错误码

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

图片示例

代码示例

• SWAN
• JS

<view class="doubleroom-container">
    <rtc-room
        id="doubleRoom"
        class="rtc-room"
        enable-camera="{{enableCamera}}"
        enable-auto-focus="{{enableAutoFocus}}"
        enable-zoom="{{enableZoom}}"
        device-position="{{devicePosition}}"
        enable-mic="{{enableMic}}"
        enable-agc="{{enableAgc}}"
        enable-ans="{{enableAns}}"
        bitrate="{{bitrate}}"
        video-width="{{videoWidth}}"
        video-height="{{videoHeight}}"
        enable-remote-mirror="{{enableRemoteMirror}}"
        local-mirror="{{localMirror}}"
        sound-mode="{{soundMode}}"
        bindstatechange="handleStateChange"
        binderror="handleError">
        <rtc-room-item
            id="localView"
            type="local"
            user-id="{{localUserId}}"
            data-key="local"
            class="{{isLocalMainView ? 'main-view' : 'small-view'}}"
            bindtap="toggleMainView">
            <view class="loading" s-if="{{streamList.length === 0}}">
                <image
                    src="https://b.bdstatic.com/searchbox/icms/searchbox/img/loading-icon.png"
                    class="rotate-img">
                </image>
                <view class="loading-text">等待接听...</view>
            </view>
            <view s-if="{{!enableCamera}}" class="camera-off-container">
                <image
                    class="camera-off-image"
                    src="https://b.bdstatic.com/searchbox/icms/searchbox/img/off-camera.png">
                </image>
                <view class="camera-off-text">本地摄像头未打开</view>
            </view>
        </rtc-room-item>
        <rtc-room-item
            id="remoteView"
            s-if="streamList.length !== 0"
            type="remote"
            user-id="{{streamList[0].userId}}"
            data-key="remote"
            class="{{isLocalMainView ? 'small-view' : 'main-view'}}"
            bindtap="toggleMainView">
        </rtc-room-item>
    </rtc-room>
    <view class="handle-btns">
        <view class="btn-normal {{enableMic ? '' : 'btn-active'}}" bindtap="toggleAudio">
            <image
                class="btn-image"
                src="{{enableMic
                    ? 'https://b.bdstatic.com/searchbox/icms/searchbox/img/audio-off.png'
                    : 'https://b.bdstatic.com/searchbox/icms/searchbox/img/audio-on.png'
                    }} ">
            </image>
        </view>
        <view class="btn-normal {{soundMode === 'ear' ? 'btn-active' : ''}}" bindtap="toggleSoundMode">
            <image
                class="btn-image"
                src="{{soundMode === 'ear'
                    ? 'https://b.bdstatic.com/searchbox/icms/searchbox/img/speaker-off.png'
                    : 'https://b.bdstatic.com/searchbox/icms/searchbox/img/speaker-on.png'}} ">
            </image>
        </view>
        <view class="btn-normal btn-hangup" bindtap="hangUp">
            <image
                class="btn-image"
                src="https://b.bdstatic.com/searchbox/icms/searchbox/img/hangup.png">
            </image>
        </view>
        <view class="btn-normal {{enableCamera ? '' : 'btn-active'}}" bindtap="toggleVideo">
            <image
                class="btn-image"
                src="{{enableCamera
                    ? 'https://b.bdstatic.com/searchbox/icms/searchbox/img/camera-off.png'
                    : 'https://b.bdstatic.com/searchbox/icms/searchbox/img/camera-on.png'}} ">
            </image>
        </view>
        <view class="btn-normal" bindtap="switchCamera" >
            <image
                class="btn-image"
                src="https://b.bdstatic.com/searchbox/icms/searchbox/img/switch.png">
            </image>
        </view>
    </view>
    <view class="top-mask"></view>
    <view class="bottom-mask"></view>
</view>