• rtc-room 实时音视频通话房间
  • 属性说明
    • device-position 有效值
    • local-mirror 有效值
    • sound-mode 有效值
    • 状态码
    • 错误码
  • 示例
    • 图片示例
    • 代码示例

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>