【新知实验室】快速实现视频应用

介绍：

         腾讯云音视频（TRTC）提供一站式视频解决方案，包括点播直播、实时视频通话、短视频等视频服务，广泛应用于在线视频、电商、游戏直播、在线教育等场景。

        我也是在偶然的机会下接触到了本次活动，作为一名程序员能够看到如此优秀的SDK并能够上手体验我觉得是非常棒的一件事情。

        接下来就让我们一起来体验下产品吧。

        对了，体验之前，我们需要先注册一个腾讯云账号，然后在产品里面搜索【实时音视频】，接下来开通产品，并给他一个名字。

        

1. 进入 腾讯云音视频

在腾讯云首页搜索 ，点击产品文档

 2. 查看产品文档

在左侧菜单栏找到“含UI集成方案 -> 多人视频会议 -> 集成TUIRoom（Web）”（需要有web基础及vue基础）

        接下来就很简单了，我们一步步跟着操作就可以快速完成了 。

        TRTC确实实现了快速上手，对于广大开发者来说确实是福音，期待后续更好的功能实现。

3. 组件介绍

TUIRoom 是一个包含 UI 的开源音视频组件，通过集成 TUIRoom，您可以在业务中快速上线音视频房间，屏幕分享，聊天等功能。

TUIRoom 组件使用 Vue3 + TS + Pinia + SCSS 开发，要求接入项目使用 Vue3 或 Vue2.7，支持 typescript。

TUIRoom API：

// 初始化
TUIRoomRef.value.createRoom(roomId, roomMode, roomParam);

// 主持人创建房间
TUIRoomRef.value.createRoom(roomId, roomMode, roomParam);

 

// 普通成员加入房间
TUIRoomRef.value.enterRoom(roomId, roomParam);

 

// 创建房间回
<template>
  <room ref="TUIRoomRef" @on-create-room="handleRoomCreate"></room>
</template>


<script setup lang="ts">
  // 引入 TUIRoom 组件，注意确认引入路径是否正确
  import Room from './TUIRoom/index.vue';


  function handleRoomCreate(info) {
    if (info.code === 0) {
      console.log('创建房间成功')
    }
  }
</script>

 

// 进入房间回调
<template>
  <room ref="TUIRoomRef" @on-enter-room="handleRoomEnter"></room>
</template>


<script setup lang="ts">
  // 引入 TUIRoom 组件，注意确认引入路径是否正确
  import Room from './TUIRoom/index.vue';


  function handleRoomEnter(info) {
    if (info.code === 0) {
      console.log('进入房间成功')
    }
  }
</script>

// 主持人销毁房间
<template>
  <room ref="TUIRoomRef" @on-destroy-room="handleRoomDestroy"></room>
</template>


<script setup lang="ts">
  // 引入 TUIRoom 组件，注意确认引入路径是否正确
  import Room from './TUIRoom/index.vue';


  function handleRoomDestroy(info) {
    if (info.code === 0) {
      console.log('主持人销毁成功')
    }
  }
</script>

// 普通成员退出房间
<template>
  <room ref="TUIRoomRef" @on-exit-room="handleRoomExit"></room>
</template>


<script setup lang="ts">
  // 引入 TUIRoom 组件，注意确认引入路径是否正确
  import Room from './TUIRoom/index.vue';


  function handleRoomExit(info) {
    if (info.code === 0) {
      console.log('普通成员退出房间成功')
    }
  }
</script>

// 普通成员被主持人踢出房间
<template>
  <room ref="TUIRoomRef" @on-kick-off="handleKickOff"></room>
</template>


<script setup lang="ts">
  // 引入 TUIRoom 组件，注意确认引入路径是否正确
  import Room from './TUIRoom/index.vue';


  function handleKickOff(info) {
    if (info.code === 0) {
      console.log('普通成员被主持人踢出房间')
    }
  }
</script>

        这款组件样式精致，功能完善，不追求个性化设置的话完全是够用的，从一个程序员的角度出发，快速搭建应用，并上线，这个功能简直是太棒了！