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.引入原生插件
如何引入原生插件 可查看 該文章 :http://www.lxweimin.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>