uni-app App端 單人 多人 視頻通話 - 草稿

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

!請妥善保管密鑰信息,謹防泄露。

  1. 在該應用的基礎配置頁,開通騰訊云實時音視頻服務。
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>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
禁止轉載,如需轉載請通過簡信或評論聯系作者。

推薦閱讀更多精彩內容