uni-app App端 单人 多人 视频通话 - 草稿
2024-08-12 本文已影响0人
加冰宝贝
1.需要先在uni-app插件时长找到 《腾讯云原生音视频插件》 带官方标识
image.png
2.开通腾讯云服务
- 1：创建即时通信 IM 应用
登录 即时通信 IM 控制台，单击 创建新应用 将弹出对话框
image.png
- 2:输入您的应用名称，单击 确认 即可完成创建。
image.png
-
3:可在 即时通信 IM 控制台 总览页面查看新建应用的状态、业务版本、SDKAppID、创建时间以及到期时间。请记录 SDKAppID 信息。
-
4:登录设置
- 在登录与消息页面，单击登录设置右侧的编辑。
- 在弹出的登录设置对话框中，选择多端登录类型，设置 Web 端以及其他平台实例同时在线数量。
image.png -
5:单击确定保存设置。
!请务必开启多终端
- 6:获取 IM 密钥并开通实时音视频服务
- 在 即时通讯 IM 控制台 总览页单击您创建完成的即时通信 IM 应用，随即跳转至该应用的基础配置页。在 基本信息 区域，单击 显示密钥，复制并保存密钥信息。
image.png
!请妥善保管密钥信息，谨防泄露。
- 在该应用的基础配置页，开通腾讯云实时音视频服务。
image.png
3.引入原生插件
如何引入原生插件 可查看 该文章 ：https://www.jianshu.com/p/4b85a44f1435
4.需要先下载一个官方是实例包
地址如下：https://github.com/TencentCloud/TIMSDK/blob/master/uni-app
5.如果有用到以下插件 需要安装依赖 tim-wx-sdk tim-upload-plugin
import TIM from 'tim-wx-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';
6.代码写入
<template>
<view class="video-index u-rela bg-0364E1">
<view class="container" v-show="showlogin">
<image class="background-image" src="../../static/background.svg"></image>
<view class="counter-warp">
<view class="header-content">
<image src="../../static/calling-logo.png" class="icon-box" />
<view class="text-header">腾讯云音视频插件</view>
</view>
<view class="box">
<view class="list-item">
<label class="list-item-label">用户ID</label>
<input class="input-box" type="text" v-model="userID" placeholder="请输入用户ID"
placeholder-style="color:#BBBBBB;" />
</view>
<view class="login">
<button class="loginBtn" @click="loginHandler">登录</button>
</view>
</view>
</view>
</view>-->
<view class="container" v-show="!showlogin">
<view class="input-container">
<label class="list-item-label" style="margin-bottom: 10px;">呼叫用户ID:<span
style="color:#C0C0C0;margin-left: 8px;">user1;user2(“;”为英文分号)</span></label>
<input class="input-box" v-model="callUserID" maxlength="140" type="text" placeholder="输入userID"
placeholder-style="color:#BBBBBB;">
</view>
<view class="guide-box">
<view class="single-box" :id="index" @click="callingHandle(item.type)"
v-for="(item, index) in entryInfos" :key="index">
<image class="icon" mode="aspectFit" :src="item.icon" role="img"></image>
<view class="single-content">
<view class="label">{{ item.title }}</view>
<view class="desc">{{ item.desc }}</view>
</view>
</view>
</view>
<view class="login" style="width: 70%; margin: 15px auto 0;">
<button class="loginBtn" @click="logoutHandler">登出</button>
</view>
</view>
</template>
<script>
// #ifdef APP
import {
genTestUserSig
} from '../../debug/GenerateTestUserSig.js';
import TIM from 'tim-wx-sdk';
import TIMUploadPlugin from 'tim-upload-plugin';
const TUICalling = uni.requireNativePlugin("TUICallingUniPlugin-TUICallingModule");
// #endif
export default {
data() {
return {
entryInfos: [{
icon: 'https://web.sdk.qcloud.com/component/miniApp/resources/audio-card.png',
title: '语音通话',
desc: '丢包率70%仍可正常语音通话',
type: 1
},
{
icon: 'https://web.sdk.qcloud.com/component/miniApp/resources/video-card.png',
title: '视频通话',
desc: '丢包率50%仍可正常视频通话',
type: 2
}
],
userID: '',
showlogin: true,
callUserID: '',
}
},
onLoad() {
// console.log(uni);
// let options = {
// SDKAppID: 1400686667// 接入时需要将 0 替换为您的云通信应用的 SDKAppID，类型为 Number
// };
// // 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
// let tim = TIM.create(options); // SDK 实例通常用 tim 表示
// // 设置 SDK 日志输出级别，详细分级请参见 setLogLevel 接口的说明
// tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
// // tim.setLogLevel(1); // release级别，SDK 输出关键信息，生产环境时建议使用
// // 注册腾讯云即时通信 IM 上传插件
// tim.registerPlugin({
// 'tim-upload-plugin': TIMUploadPlugin
// });
},
methods: {
loginHandler() {
// console.log(TUICalling);
// console.log(uni);
const userID = this.userID
const userSig = genTestUserSig(userID).userSig;
TUICalling.login({
sdkAppID: 1400686667,
userID: userID,
userSig: userSig
})
// const userID = this.userID
// console.log(userID);
// console.log(userSig);
// 登录 IM
// uni.$TUIKit.login({
// userID: userID,
// userSig: userSig
// });
// // 登录原生插件
// uni.$TUICalling.login({
// sdkAppID: genTestUserSig('').sdkAppID,
// userID: userID,
// userSig: userSig
// }, (res) => {
// console.log(res.msg)
// uni.showToast({
// title: 'login',
// icon: "none"
// })
// })
this.showlogin = false
},
callingHandle(type) {
// const userIDs = this.callUserID.split(";");
// if (this.callUserID === '') {
// uni.showToast({
// title: '请在上方输入userID',
// icon: "none"
// })
// return
// }
// // 在自己的项目中可优化
// uni.$TUIKit.getUserProfile({
// userIDList: userIDs
// }).then((res) => {
// if (res.data.length < userIDs.length) {
// uni.showToast({
// title: '该用户不存在，请重新输入userID',
// icon: "none"
// })
// return
// }
// if (res.data.length == 1) {
// uni.$TUICalling.call({
// userID: userIDs[0],
// type: type
// }, (res) => {
// console.log(JSON.stringify(res))
// })
// }
// if (res.data.length > 1) {
// uni.$TUICalling.groupCall({
// userIDList: userIDs,
// type: type,
// groupID: ''
// }, (res) => {
// console.log(JSON.stringify(res))
// })
// }
// })
// .catch(() => {
// uni.showToast({
// title: '该用户不存在，请重新输入userID',
// icon: "none"
// })
// })
TUICalling.call({
userID: 'boss',
type: 2,
}, (res) => {
console.log(JSON.stringify(res))
})
// TUICalling.call({ userID: 'user1', type: 1 })
},
logoutHandler() {
this.showlogin = true;
this.callUserID = '';
// IM 登出
// TUICalling.logout();
// 登出 原生插件
TUICalling.logout((res) => {})
},
}
}
</script>
<style scoped>
.video-index {
width: 100vw;
height: 100vh;
/* background-color: #F4F5F9; */
background: #ffffff;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
.counter-warp {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.background-image {
width: 100%;
}
.header-content {
display: flex;
width: 100vw;
padding: 50px 20px 10px;
box-sizing: border-box;
top: 100rpx;
align-items: center;
}
.icon-box {
width: 56px;
height: 56px;
}
.text-header {
height: 72rpx;
font-size: 48rpx;
line-height: 72rpx;
color: #FFFFFF;
margin: 40px auto;
}
.text-content {
height: 36rpx;
font-size: 24rpx;
line-height: 36rpx;
color: #FFFFFF;
}
.box {
width: 80%;
height: 50vh;
position: relative;
background: #ffffff;
border-radius: 4px;
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: left;
padding: 30px 20px;
}
.input-box {
flex: 1;
display: flex;
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(0, 0, 0, 0.8);
letter-spacing: 0;
}
.login {
display: flex;
box-sizing: border-box;
margin-top: 15px;
width: 100%;
}
.login button {
background: rgba(0, 110, 255, 1);
border-radius: 30px;
font-size: 16px;
color: #FFFFFF;
letter-spacing: 0;
/* text-align: center; */
font-weight: 500;
}
.loginBtn {
margin-top: 64px;
background-color: white;
border-radius: 24px;
border-radius: 24px;
/* display: flex;
justify-content: center; */
width: 100% !important;
font-family: PingFangSC-Regular;
font-size: 16px;
color: #FFFFFF;
letter-spacing: 0;
}
.list-item {
display: flex;
flex-direction: column;
font-family: PingFangSC-Medium;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #EEF0F3;
}
.input-container {
width: 90%;
margin: 50px auto 0;
display: flex;
flex-direction: column;
font-family: PingFangSC-Medium;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #EEF0F3;
}
/* .input-box {
height: 20px;
padding: 5px;
width: 100%;
border: 1px solid #999999;;
} */
.list-item .list-item-label {
font-weight: 500;
padding: 10px 0;
}
.guide-box {
width: 100vw;
box-sizing: border-box;
padding: 16px;
display: flex;
flex-direction: column;
}
.single-box {
flex: 1;
border-radius: 10px;
background-color: #ffffff;
margin-bottom: 16px;
display: flex;
align-items: center;
}
.icon {
display: block;
width: 180px;
height: 144px;
}
.single-content {
padding: 36px 30px 36px 20px;
color: #333333;
}
.label {
display: block;
font-size: 18px;
color: #333333;
letter-spacing: 0;
font-weight: 500;
}
.desc {
display: block;
font-size: 14px;
color: #333333;
letter-spacing: 0;
font-weight: 500;
}
.logo-box {
position: absolute;
width: 100vw;
bottom: 36rpx;
text-align: center;
}
}
</style>
