学网站开发前景,网站备案通过后,西安网站制作公司,域名注册 阿里云查询多人视频聊天室搭建#xff0c;官网已有相关demo和案例#xff0c;需要快速搭建多人聊天室直接进入以下网站#xff1a;
实时音视频 Web H5 (Vue2/Vue3)-视频通话#xff08;含 UI#xff09;-文档中心-腾讯云说明#xff1a;https://cloud.tencent.com/document/…多人视频聊天室搭建官网已有相关demo和案例需要快速搭建多人聊天室直接进入以下网站
实时音视频 Web H5 (Vue2/Vue3)-视频通话含 UI-文档中心-腾讯云说明https://cloud.tencent.com/document/product/647/78731#step1
以下仅介绍1v1视频聊天demo的搭建仅前段也可以实现
步骤一 登录到 即时通信 IM 控制台单击创建新应用在弹出的对话框中输入您的应用名称并单击确定。 申请成功后会有以上列表。
步骤二单击刚刚创建的应用进入基本配置页面并在页面的右下角找到含 UI 低代码场景方案标题单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。 步骤三在同一页面找到 SDKAppID 和密钥SecretKey并记录下来它们会在后续的步骤中被用到。 步骤四下载相应依赖
npm install tencentcloud/call-uikit-vue2.6 vue/composition-api 将 debug 目录复制到您的项目。
MacOSo端
cp -r node_modules/tencentcloud/call-uikit-vue2.6/debug ./src
Windows
xcopy node_modules\tencentcloud\call-uikit-vue2.6\debug .\src /i /e
步骤五创建虚拟userId 步骤六创建虚拟UserSig用户签名上线后由后端提供 登录 - 腾讯云腾讯云为数百万的企业和开发者提供安全、稳定的云服务器、云主机、CDN、对象存储、域名注册、云存储、云数据库等云服务帮助用户解决游戏、视频、移动、微信、互联网等行业的架构难题是全球领先的云计算服务商。https://console.cloud.tencent.com/trtc/usersigtool 步骤七引入依赖main.js中
import VueCompositionAPI from vue/composition-api
Vue.use(VueCompositionAPI)
如下图 步骤八创建index.vue页面页面名字自行定义。内容如下
templatedivdiv v-iftime time ! 10剩余时间{{ time }}/divdivspanuserID/spaninput typetext v-modeluserID //divdiv stylemargin-top: 6px;spancallUserID/spaninput typetext v-modelcallUserID //divbutton clickinit(userID) 用户1 /buttonbutton clickinit(callUserID) 用户2 /buttonbutton clickcall() 打电话 /buttondiv styleheight: 50vh; border: 1px solid salmon;TUICallKit :statusChangedstatusChanged //div/div
/template
script
import { TUICallKit, TUICallKitServer, TUICallType } from tencentcloud/call-uikit-vue2.6;export default {name: App,data() {return {time: 10,// SDKAppID、userSig 的获取参考下面步骤userID: test-user1, // 主叫的 userID 创建的用户1callUserID: test-user2, // 被叫的 userID 创建的用户1SDKAppID: 1600021236849, // 替换成你对应的SDKAppIDSecretKey: e5ca336b2888356fdd0b90311df4d7bc5364d403bf, // 替换成对应的SecretKey};},components: {TUICallKit},methods: {async init(id) {console.log(init:, TUICallKitServer)try {// userSig 用拷贝过来的userSina替换const userSig RYHsacc4jTKJsKvgxZHFwIAUOa1FP7tyTkAGkEszq6D*e3pm6hR4qL7Rs3RqZO7jQUF5Md97qsslJ2VvW6ThanNfv*AFaPMv4_await TUICallKitServer.init({SDKAppID: Number(this.SDKAppID),userID: id,userSig,// tim: this.tim // 如果工程中已有 tim 实例需在此处传入});alert([TUICallKit] Initialization succeeds.);} catch (error) {alert([TUICallKit] Initialization failed. Reason: ${error});}},async call() {try {// 1v1 video callawait TUICallKitServer.call({ userID: this.callUserID, type: TUICallType.VIDEO_CALL });} catch (error) {alert([TUICallKit] Call failed. Reason: ${error});}},statusChanged(option) {console.log(option:, option)if (option.newStatus calling-c2c-video) {let timer window.setInterval(() {if (this.time) {this.time--;} else {window.clearInterval(timer)console.log(TUICallEngine:, TUICallKitServer)TUICallKitServer.hangup();}}, 1000)}}},
}
/script 最后打包上测试服测试注意测试只能在测试服测试本地无法测试注意用户1点击用户1按钮用户2点击用户2按钮最后就是用户1对用户2发起视频测试就通了
