uni-app ( uts插件 )

操作步骤

参考Demo示例（UniApp 目录）：https://github.com/aliyun/AliRTCSample/tree/master/UniApp

1. 初始化SDK。

   您需要创建IUDingRtcEngine实例，并注册回调。

   <script setup lang="uts">
       import { APP_ID, TOKEN, GSLB_SERVER, USER_NAME } from "@/store/index.uts"
       import { IUDingRtcEngine,
   	     UDingRtcEventListener,
   	     createRtcEngine } from "@/uni_modules/Dingtalk-DingRTC"
       let engine : IUDingRtcEngine | null = null
       
       ...
   </script>

   function createDingRtcEngine() {
           engine = createRtcEngine({
               onJoinChannelResult: (result: Number, channel: String, userId: String, elapsed: Number) => {
                   console.log(`onJoinChannelResult result = ${result}`)
                   if (result == 0) {
                       uni.showToast({
                           title: `入会成功，耗时: ${elapsed}ms`,
                           icon: 'none',
                       })
                   } else {
                       console.log(`join channel failed，error code = ${result}`);
                   }
               },
               onLeaveChannelResult: (result: Number) => {
                   console.log(`onLeaveChannelResult result = ${result}`)
                   uni.showToast({
                       title: `离会成功: ${result}`,
                       icon: 'none',
                   })
               },
               onRemoteUserOnLineNotify: (userId: String, elapsed: Number) => {
                   console.log(`remote user join channel,uid = ${userId}`)
                   remoteUserId.value = userId
                   uni.showToast({
                       title: `远端用户入会: ${userId}`,
                       icon: 'none',
                   })
               },
               onRemoteUserOffLineNotify: (userId: String, reason: UDingRtcUserOfflineReason) => {
                   console.log(`remote user leave channel,uid = ${userId}`)
                   uni.showToast({
                       title: `远端用户离会: ${userId}, reason: ${reason}`,
                       icon: 'none',
                   })
               },
               onOccurError: (error: Number, msg: String) => {
                   console.log(`occur error ${error}, msg = ${msg}`)
                   uni.showToast({
                       title: `SDK报错: ${error}`,
                       icon: 'none',
                   })
               }
           } as UDingRtcEventListener)
       }

   1. 本地预览。在创建完IUDingRtcEngine实例后，您可以创建RtcSurfaceView布局进行本地预览视频。

      <template>
      ...
      <view>
          <RtcSurfaceView :id="userId" style="height: 403.84rpx;flex: 1;"></RtcSurfaceView>
      </view>
      ...
      </template>

      import { UDingRtcVideoCanvas } from "@/uni_modules/Dingtalk-DingRTC"
      		
      function startLocalPreview() {
              // 1. 绑定view
              engine?.setLocalViewConfig({
                  viewId: userId,
                  renderMode: 2,
                  mirrorMode: 0,
                  backgroundColor: 0xffffff,
                  rotationMode: 0,
              } as UDingRtcVideoCanvas, 1)
              // 2. 开启本地预览
              engine?.startPreview()
          }

      说明

      • UDingRtcRenderMode提供四种渲染模式：

        • 0: auto, 自动模式。

        • 1: stretch, 拉伸平铺模式 ，如果外部输入的视频宽高比和推流设置的宽高比不一致时，将输入视频拉伸到推流设置的比例，画面会变形。

        • 2: fill, 填充黑边模式，如果外部输入的视频宽高比和推流设置的宽高比不一致时，将输入视频上下或者左右填充黑边。

        • 3: crop, 裁剪模式，如果外部输入的视频宽高比和推流设置的宽高比不一致时，将输入视频宽或者高进行裁剪，画面内容会丢失。

      • UDingRtcRenderMirrorMode在本地或远端均可设置镜像模式，并提供三种镜像模式：

        • 0: onlyFrontCameraPreviewEnabled, 只有前置摄像头预览镜像，其余不镜像。

        • 1: allEnabled, 镜像开启。

        • 2: allDisabled, 镜像关闭。

   2. 可选：取消本地预览。

      engine?.stopPreview() 

   3. 设置发布与订阅。

      • SDK默认入会后不会自动发布音频流与视频流，如果您希望自动发布音频和视频，可以在入会前通过以下接口设置：

        engine?.publishLocalAudioStream(true)//默认发布音频流
        engine?.publishLocalVideoStream(true)//默认发布视频流

      • SDK默认入会后自动订阅远端的音频流与视频流，如果您不希望自动订阅音频与视频，可以在入会前通过以下接口设置：

        engine?.subscribeAllRemoteAudioStreams(false)//不订阅音频流
        engine?.subscribeAllRemoteVideoStreams(false)//不订阅视频流

2. 加入频道。

   import { UDingRtcAuthInfo } from "@/uni_modules/Dingtalk-DingRTC"
   
   function joinChannel() {
           let ret = engine?.joinChannel({
               channelId: channelId, // 您的channelId
               userId: userId, // 您的userId
               appId: APP_ID, // 您的Appid
               token: TOKEN, // 您的token
               gslbServer: GSLB_SERVER // 您的gslb地址
           } as UDingRtcAuthInfo, USER_NAME)
           if (ret != 0) {
               console.log(`joinChannel error = ${ret}`)
           } else {
               uni.showToast({
                   title: 'joinChannel ',
                   icon: 'none',
               });
           }
       }

   加入频道结果通过 onJoinChannelResult 回调接口获取

   参数	描述
   appId	应用ID，在控制台应用管理页面创建和查看。
   channelId	频道ID。1~64位，由大小写字母、数字、下划线（_）、短划线（-）组成。
   userId	用户ID。1~64位，由大小写字母、数字、下划线（_）、短划线（-）组成。 说明 同一个用户ID在其他端登录，先入会的端会被后入会的端踢出频道。
   token	频道鉴权令牌。
   gslbServer	服务地址，可为空，默认值为："https://gslb.dingrtc.com"，请您通过业务服务器下发到客户端SDK，不建议您将该地址固化在客户端代码。 强烈建议：不要传空值，而应当使用从业务服务器（即AppServer）返回的gslb地址。

3. 发布或取消发布本地流。

   • 发布本地音频流和视频流

     如果您在入会前没有设置发布音频流和视频流，则入会后不会自动发布本地的音频流和视频流，需要调用以下接口进行手动发布：

     engine?.publishLocalAudioStream(true)//发布音频流
     engine?.publishLocalVideoStream(true)//发布视频流

   • 取消发布本地音频流和视频流

     如果您需要取消发布本地的音频流和视频流，请调用以下接口：

     engine?.publishLocalAudioStream(false)//取消发布音频流
     engine?.publishLocalVideoStream(false)//取消发布视频流

4. 订阅或取消订阅远程流。

   • 订阅远端音频流和视频流

     如果您在入会前没有设置订阅音频流和视频流，则入会后会自动订阅远端的音频流和视频流；如果您在入会前设置取消订阅音频流和视频流，则入会后需要调用以下接口进行手动订阅：

     engine?.subscribeAllRemoteAudioStreams(true)//订阅全部的远端音频流
     engine?.subscribeAllRemoteVideoStreams(true)//订阅全部的远端视频流

   • 渲染远端的视频画面前，请先创建RtcSurfaceView布局

     <template>
     ...
     <view>
         <RtcSurfaceView v-if="remoteUserId" :id="remoteUserId" style="height: 403.84rpx;flex: 1">
         </RtcSurfaceView>
     </view>
     ...
     </template>

   • 订阅成功后，您可以在收到onRemoteTrackAvailableNotify回调后渲染远端的视频画面：

     function startRemoteView() {
             console.log(`startRemoteView, user = ${remoteUserId.value}`)
             engine?.setRemoteViewConfig({
                 viewId: remoteUserId.value,
     	    renderMode: 2,
     	    mirrorMode: 0,
                 backgroundColor: 0xffffff,
     	    rotationMode: 0,
             } as UDingRtcVideoCanvas, remoteUserId.value, 1)
         } 

   • 取消订阅远端音频流和视频流

     如果您需要取消订阅远端的音频流和视频流，请调用以下接口：

     engine?.subscribeAllRemoteAudioStreams(false)//取消订阅全部的远端音频流
     engine?.subscribeAllRemoteVideoStreams(false)//取消订阅全部的远端视频流

   • 订阅特定用户的音频流和视频流

     当已取消订阅所有的音频流和视频流之后，如果您需要订阅某个远端用户的音频流和视频流，可以通过调用以下接口实现

     engine?.subscribeRemoteVideoStream(remoteUserId.value, 1, true)//订阅特定用户的视频流

5. 离开频道。

   engine?.leaveChannel()