新知实验室

这篇具有很好参考价值的文章主要介绍了新知实验室。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

项目是开源的项目,根据自己 的需求设计项目。

创建步骤如下 :

一、  开通腾讯云实时音视频及即时通信服务

TUIRoom 基于腾讯云实时音视频和即时通信服务进行开发。

1.创建实时音视频 TRTC 应用

如果您还没有腾讯云账号,请 注册腾讯云账号 ,并完成 实名认证。

在 实时音视频控制台 单击 应用管理 > 创建应用 创建新应用。

2.获取 TRTC 应用及密钥信息

2.1在 应用管理 > 应用信息 中获取 SDKAppID 信息。SDKAppID 为 TRTC 的应用 ID,用于业务隔离,即不同的 SDKAppID 的通话不能互通;

腾讯rtc sdk appid,腾讯云,云计算



2.2在 应用管理 > 快速上手 中获取应用的 secretKey 信息。SecretKey 为 TRTC 的应用密钥,需要和 SDKAppID 配对使用,用于签出合法使用 TRTC 服务的鉴权用票据 UserSig。

腾讯rtc sdk appid,腾讯云,云计算

签发 UserSig UserSig 是腾讯云设计的一种安全保护签名,目的是为了阻止恶意攻击者盗用您的云服务使用权。TUIRoom 初始化需要您提供 UserSig 参数。

调试跑通阶段签发 userSig 的方式请参见 调试跑通阶段如何计算 UserSig。

生产环境签发 userSig 的方式参见 正式运行阶段如何计算 UserSig。



步骤二:准备 Vue 工程代码

打开业务侧已有 Vue 项目,支持使用 Vite 及 Webpack 打包方式。如果无 Vue 项目,可选择以下任意一种方式生成模版工程。

生成 Vue3 + Vite + TS 模版工程

# npm 6.x

npm create vite@latest TUIRoom-demo --template vue-ts



# npm 7+, extra double-dash is needed:

npm create vite@latest TUIRoom-demo -- --template vue-ts



# yarn

yarn create vite TUIRoom-demo --template vue-ts



# pnpm

pnpm create vite TUIRoom-demo --template vue-ts

注意

执行生成模板工程脚本的过程中,第一步直接回车,第二步选择 Vue,第三步选择 vue-ts。

成功生成 Vue3 + Vite + TS 模板工程后,执行以下脚本:

cd TUIRoom-demo

npm install

npm run dev

步骤三:下载并引用 TUIRoom 组件

1.下载 TUIRoom 组件代码

单击 Github , 克隆或下载 TUIRoom 仓库代码。

2.引用 TUIRoom 组件

Vue3 项目引入 TUIRoom 组件

复制 TUIRoom/Web/vue3/src/TUIRoom 文件夹到已有项目 src/ 目录下。

在页面中引用 TUIRoom 组件。例如:在 App.vue 组件中引入 TUIRoom 组件。

TUIRoom 组件将用户分为主持人角色及普通成员角色。组件对外提供了 init、createRoom、enterRoom 方法。

主持人及普通成员可通过 init 方法向 TUIRoom 组件初始化应用及用户数据,主持人可通过 createRoom 方法创建并加入房间,普通成员可通过 enterRoom 方法加入主持人已经创建好的房间。

<template>

<room ref="TUIRoomRef"></room>

</template>



<script setup lang="ts">

import { ref, onMounted } from 'vue';

// 引入 TUIRoom 组件,注意确认引入路径是否正确

import Room from './TUIRoom/index.vue';

// 获取 TUIRoom 组件元素,用于调用 TUIRoom 组件的方法

const TUIRoomRef = ref();



onMounted(async () => {

// 初始化 TUIRoom 组件

// 主持人在创建房间前需要先初始化 TUIRoom 组件

// 普通成员在进入房间前需要先初始化 TUIRoom 组件

await TUIRoomRef.value.init({

// 获取 sdkAppId 请您参考 步骤一

sdkAppId: 0,

// 用户在您业务中的唯一标示 Id

userId: '',    // 修改此处

// 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系

userSig: '',

// 用户在您业务中使用的昵称

userName: '',

// 用户在您业务中使用的头像链接

userAvatar: '',

// 用户用于屏幕分享的唯一 Id,要求 shareUserId = `share_${userId}`, 无屏幕分享功能需求可不传入

shareUserId: '',

// 请您参考本文 步骤一 > 第三步 并使用 sdkAppId 及 shareUserId 签发 shareUserSig

shareUserSig: '',

})

// 默认执行创建房间,实际接入可按需求择机执行 handleCreateRoom 方法

await handleCreateRoom();

})



// 主持人创建房间,该方法只在创建房间时调用

async function handleCreateRoom() {

// roomId 为用户进入的房间号, 要求 roomId 类型为 number

// roomMode 包含'FreeSpeech'(自由发言模式) 和'ApplySpeech'(举手发言模式) 两种模式,默认为'FreeSpeech',注意目前仅支持自由发言模式

// roomParam 指定了用户进入房间的默认行为(是否默认开启麦克风,是否默认开启摄像头,默认媒体设备Id)

const roomId = 123456;

const roomMode = 'FreeSpeech';

const roomParam = {

isOpenCamera: true,

isOpenMicrophone: true,

}

await TUIRoomRef.value.createRoom(roomId, roomMode, roomParam);

}



// 普通成员进入房间,该方法在普通成员进入已创建好的房间时调用

async function handleEnterRoom() {

// roomId 为用户进入的房间号, 要求 roomId 类型为 number

// roomParam 指定了用户进入房间的默认行为(是否默认开启麦克风,是否默认开启摄像头,默认媒体设备Id)

const roomId = 123456;

const roomParam = {

isOpenCamera: true,

isOpenMicrophone: true,

}

await TUIRoomRef.value.enterRoom(roomId, roomParam);

}

</script>



<style>

html, body {

width: 100%;

height: 100%;

margin: 0;

}



#app {

width: 100%;

height: 100%;

}

</style>

注意

在页面中复制以上代码之后,需要修改 TUIRoom 接口的参数为实际数据。



步骤四:配置开发环境

TUIRoom 组件引入之后,为了确保项目可以正常运行,需要进行以下配置:

配置 Vue3 + Vite + TS 项目开发环境

1.安装依赖

安装开发环境依赖:

npm install sass typescript unplugin-auto-import unplugin-vue-components -S -D

安装生产环境依赖:

npm install element-plus events mitt pinia rtc-beauty-plugin tim-js-sdk trtc-js-sdk tsignaling vue-i18n -S

2.注册 Pinia TUIRoom 使用 Pinia 进行房间数据管理,您需要在项目入口文件中注册 Pinia,项目入口文件为 src/main.ts 文件。

// src/main.ts 文件

import { createPinia } from 'pinia';



const app = createApp(App);

// 注册 pinia

app.use(createPinia());

app.mount('#app');

3.配置 element-plus 按需引入

TUIRoom 使用 element-plus UI 组件,为避免引入所有 element-plus组件,需要您在 vite.config.ts 中配置 element-plus 组件按需加载。

注意

以下配置项为增量配置,不要删除已经存在的 Vite 配置项。

// vite.config.ts

import AutoImport from 'unplugin-auto-import/vite';

import Components from 'unplugin-vue-components/vite';

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';



export default defineConfig({

// ...

plugins: [

AutoImport({

resolvers: [ElementPlusResolver()],

}),

Components({

resolvers: [ElementPlusResolver({

importStyle: 'sass',

})],

}),

],

css: {

preprocessorOptions: {

scss: {

// ...

additionalData: `

@use "./src/TUIRoom/assets/style/element.scss" as *;

`,

},

},

},

});

同时为了保证 element-plus 带 UI 组件能够正常显示样式,需要您在入口文件 src/main.ts 中加载 element-plus 组件样式。

// src/main.ts

import 'element-plus/theme-chalk/el-message.css';

import 'element-plus/theme-chalk/el-message-box.css';

4.配置中英文切换

TUIRoom 目前支持中英文语言切换,需要您在 main.ts 文件中注册 i18n 实例。

// src/main.ts

// 引入 locales/index.ts 文件,请确认引入路径是否正确

import VueI18n from './TUIRoom/locales/index';

app.use(VueI18n);

步骤五:开发环境运行

在控制台执行开发环境运行脚本,使用浏览器打开包含 TUIRoom 的页面,即可在页面中使用 TUIRoom 组件。

Vue3 + Vite + TS 项目

1.执行开发环境命令。

npm run dev

2.在浏览器中打开页面

 http://localhost:3000/

注意

因 TUIRoom 按需引入 element-plus 组件,会导致开发环境路由页面第一次加载时反应较慢,等待 element-plus 按需加载完成即可正常使用。element-plus 按需加载不会影响打包之后的页面加载。

3.体验 TUIRoom 组件功能

步骤六:生产环境部署

1.打包 dist 文件

npm run build

说明:

实际打包命令请查看 package.json 文件

2.部署 dist 文件到服务器上

注意:

生产环境要求使用 HTTPS 域名:



腾讯rtc sdk appid,腾讯云,云计算

 文章来源地址https://www.toymoban.com/news/detail-780002.html

到了这里,关于新知实验室的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【新知实验室 TRTC&IM】实时互动课堂最佳实践

    活动链接:https://marketing.csdn.net/p/637c852aedd21c0ef20754a7d7635e6d 活动链接:https://marketing.csdn.net/p/637c852aedd21c0ef20754a7d7635e6d 活动链接:https://marketing.csdn.net/p/637c852aedd21c0ef20754a7d7635e6d 在线上线下一体化、虚拟现实加速融合的趋势下,音视频已经演进成一种基本能力,深刻变革了社会的交

    2024年01月16日
    浏览(47)
  • 腾讯扣叮虚拟仿真实验室机器人自动导航+陨石样本收集

    前言 本文为腾讯coding入门教程,具体为以下四步骤 一、自动导航的思路与操作 二、躲避障碍 三、陨石样本收集 四、退出事件 最终效果如下:     首先进入课程练习,找到中学Python的规则解读后点击大展身手进入 此时右侧右侧会出现背景和规则,主要是以下五个任务 本文

    2024年02月02日
    浏览(94)
  • 腾讯机器人实验室一号员工创业,人形机器人又添重磅玩家

    衡宇 发自 凹非寺 量子位 | 公众号 QbitAI 腾讯RobticsX机器人实验室一号员工创业的仿生机器人项目,刚刚浮出水面。 量子位获悉,其创业公司名为 星尘智能 ,主打项目是 以轮式为底盘、以人形为上身 的一体化设计仿生机器人。 从特斯拉擎天柱亮相开始,爆火的风还是吹到了

    2024年02月08日
    浏览(50)
  • [论文阅读] (27) AAAI20 Order Matters: 基于图神经网络的二进制代码相似性检测(腾讯科恩实验室)

    《娜璋带你读论文》系列主要是督促自己阅读优秀论文及听取学术讲座,并分享给大家,希望您喜欢。由于作者的英文水平和学术能力不高,需要不断提升,所以还请大家批评指正,非常欢迎大家给我留言评论,学术路上期待与您前行,加油。 前一篇文章介绍Excel论文可视化

    2024年02月14日
    浏览(39)
  • 来自腾讯AI实验室的Real-ESRGAN将模糊老照片和视频修复成高清晰(一些错误处理)

            Real-ESRGAN:Enhanced Super-Resolution GAN: 增强的超分辨率的对抗生成网络 ,对于GAN相信大家都比较熟悉,前有阿尔法狗,现有很多GAN的延伸版本,StyleGAN1~3系列以及DragGAN对于图片的生成和编辑,出来的效果都很惊艳。         一些旧照片,时代比较久远了,那个时候

    2024年02月08日
    浏览(66)
  • 计算机毕业设计------基于SpringCloud的实验室管理系统

    实验室管理系统的用户可以分为两种:系统管理员和普通用户。 系统管理员 主要功能: 登录登出、分析数据、管理用户、管理日志、管理实验室、管理预约、维护个人资料、实验室保修管理 用户主要功能: 注册登录、查询实验室、实验室预约、实验室报修、维护个人资料

    2024年02月03日
    浏览(46)
  • nodejs+vue高校实验室预约管理系统-计算机毕业设计

    开发一款实验室预约管理系统,解决当前学校存在的实验室信息不透明,实验室空余时间不清晰,预约实验室过程繁琐费时的问题。提高实验室利用率。 对于学生, 系统应该分为实验室管理员模块和用户模块。实验室管理员模 块使用者为用户进行录入信息操作,查看实验室

    2024年02月06日
    浏览(53)
  • 基于微信小程序的计算机实验室排课与查询系统

    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了基于微信小程序的计算机实验室排课与查询系统的开发全过程。通过分析基于微信小程序的计算机实验室排课与查询系统管理的不足,创建了一个计算机管理基于微信小程

    2024年02月19日
    浏览(42)
  • 计算机团队毕业设计:JAVA教室实验室预约系统+微信小程序系统设计与实现

    本次选用JAVA进行教室实验室预约系统团队毕业设计开发,包含:WEB网站系统+微信小程序系统。   开发操作系统:windows10 + 8G内存 + 500G WEB开发环境:JDK1.8 + Tomcat8 WEB开发语言:Java WEB开发框架:springboot WEB模板引擎:Thymeleaf WEB常规技术:html + css +javascript WEB开发工具:Idea 数据

    2024年02月13日
    浏览(49)
  • 全国大数据与计算智能挑战赛:面向低资源的命名实体识别基线方案,排名13/64,组织单位:(大数据与决策实验室)

    NLP专栏简介:数据增强、智能标注、意图识别算法|多分类算法、文本信息抽取、多模态信息抽取、可解释性分析、性能调优、模型压缩算法等 专栏详细介绍:NLP专栏简介:数据增强、智能标注、意图识别算法|多分类算法、文本信息抽取、多模态信息抽取、可解释性分析、性

    2024年02月13日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包