1.需要先在uni-app插件时长找到 《腾讯云原生音视频插件》 带官方标识

image.png

2.开通腾讯云服务

• 1：创建即时通信 IM 应用

登录 即时通信 IM 控制台，单击 创建新应用 将弹出对话框

image.png

• 2:输入您的应用名称，单击 确认 即可完成创建。

image.png

• 3:可在 即时通信 IM 控制台 总览页面查看新建应用的状态、业务版本、SDKAppID、创建时间以及到期时间。请记录 SDKAppID 信息。

• 4:登录设置

  1. 在登录与消息页面，单击登录设置右侧的编辑。
  2. 在弹出的登录设置对话框中，选择多端登录类型，设置 Web 端以及其他平台实例同时在线数量。

  image.png

• 5:单击确定保存设置。

!请务必开启多终端

• 6:获取 IM 密钥并开通实时音视频服务

1. 在 即时通讯 IM 控制台 总览页单击您创建完成的即时通信 IM 应用，随即跳转至该应用的基础配置页。在 基本信息 区域，单击 显示密钥，复制并保存密钥信息。
   
   image.png

!请妥善保管密钥信息，谨防泄露。

2. 在该应用的基础配置页，开通腾讯云实时音视频服务。

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>