這是一篇關于TRTC的Web應用的初級入門文章,高手請略過。經過一段時間對騰訊云的TRTC的Web端和安卓端SDK學習和摸索,分幾個周末把這個學習過程給大家整理成為筆記,如有錯漏的地方,歡迎指正。

小要求:

• NodeJs
• VueJS
• ElementUI
• TRTC JSSDK

小目標:

• 使用TRTC創建一個無服務器(Servless)的在線課堂WEB應用。
• 老師可以通過瀏覽器打開主頁,輸入手機號,使用攝像頭和麥克風在線開課,然后可以把課堂鏈接分享到學生/家長群。
• 學生可以通過瀏覽器打開老師發送的鏈接或通過家長手機掃碼進入老師房間,觀看老師的課件和音視頻的講解。
• 學生和老師可以在房間內進行文字、連麥、答疑等互動交流。

小步驟:

• 第一步:構建教師端頁面模塊,接入TRTC JSSDK,完成音視頻流的采集和數據的發送功能,創建教師專用的房間和生成唯一的地址。
• 第二步:構建學生端頁面模塊,讀取鏈接參數引導學生進入教師房間,并播放老師側推送的音視頻流以及屏幕影像。
• 第三步:完成教師端和學生端音視頻的交流。

在建立這個在線課堂應用過程中,可能會使用到騰訊云的IM、云直播等服務,以及對應安卓端SDK,下面將通過三篇文章來記錄這個過程,本文為第一篇。

一、Vue開發環境的搭建

# 安裝VUEJS開發手腳架npm install -g @vue/cli# 創建新項目vue create ClassRoomVue# 進入工程目錄cd ClassRoomVue# 引入base64 模塊 生成轉碼URInpm install --save js-base64# 引入md5 模塊 生產房間ID摘要npm install --save js-md5# 啟動VUE開發服務程序npm run serve

打開瀏覽器訪問 http://localhost:8080,可以看到正確渲染的頁面。

使用Visual Studio Code 或者其他代碼編輯器打開 ClassRoomVue目錄,如下圖所示:

二、獲取TRTC的sdkAppID和密匙

• ?進入騰訊云實時音視頻[控制臺](https://console.cloud.tencent.com/rav?)?創建應用,即可看到?SDKAppId,
• ?計算簽名用的加密密鑰,獲取步驟如下:
  • ??step1.?進入騰訊云實時音視頻[控制臺](https://console.cloud.tencent.com/rav?),如果還沒有應用就創建一個,
  • ??step2.?單擊“應用配置”進入基礎配置頁面,并進一步找到“帳號體系集成”部分。
  • ??step3.?點擊“查看密鑰”按鈕,就可以看到計算?UserSig?使用的加密的密鑰了。

三、安裝TRTC JSSDK

方式一,通過 NPM安裝SDK:

# npm install trtc-js-sdk

方式二,通過<script>標簽嵌入trtc腳本文件:

• 從https://github.com/tencentyun/TRTCSDK下載Web版SDK壓縮包。
• 解壓后到目錄后,下面的文件拷貝到工程放在工程的public/js目錄
  • TRTCSimpleDemo/js/debug/GenerateTestUserSig.js
  • TRTCSimpleDemo/js/lib-generate-test-usersig.min.js
  • TRTCSimpleDemo/js/trtc.js

# 在index.html文件中插入以下代碼 <script src="js/GenerateTestUserSig.js"></script> <script src="js/lib-generate-test-usersig.min.js"></script> <script src="js/trtc.js"></script>

四、按模塊來創建教師端相關頁面

1. 在工程的components 目錄下創建以下文件

AppTitleBar.vue  // 標題欄組件                (通用)ClassRoom.vue    // 教師房間UI組件            (通用)LoginBox.vue     // 登錄組件                  (通用)MessageBox.vue    //消息發送框組件            (通用)StudentVideo.vue    // 學生視頻顯示組件        (教師端)TeacherLocalVideo.vue    //教師本地視頻顯示組件 (教師端)TeacherVideo.vue    // 教師遠程視頻顯示組件     (學生端)TeacherWhiteBoard.vue    // 教師白板         (教師端)

登錄界面

2 . 在工程目錄創建TRTC服務模塊 TRTC.Sevice.js,方便各組件調用TRTC的api

 import TRTC from 'trtc-js-sdk'; import { genTestUserSig } from "./GenerateTestUserSig";   export let roomId = null;export let userSig = null;export const streamInfo = {};export const userInfo = {name:"MyName"};export let sdkAppId = null; export let client = null;  export const createLocalStream = function(userId,callback){    console.log("create local stream "+userId);    streamInfo.localStream = TRTC.createStream({ userId:userId, audio: true, video: true });     streamInfo.localStream.setVideoProfile('480p');     streamInfo.localStream.initialize().then(() => {         callback(streamInfo.localStream);    });    return streamInfo.localStream;};export const createNewLiveClient = function(userId){    return TRTC.createClient({ sdkAppId, userId, userSig, mode: 'live'});};// 房間控制器export const RoomControl = {    //創建課堂房間    createClassRoom : function( roomId_,callback){        console.log("createClassRoom "+roomId_);        roomId = roomId_;        const UserSig = genTestUserSig(roomId);        sdkAppId = UserSig.sdkAppID;        userSig = UserSig.userSig;        client = TRTC.createClient({            'mode': 'rtc',            'sdkAppId':sdkAppId,            'userId':roomId,            'userSig':userSig        });        callback(client);        return client;    },    // 進入課堂    enterClassRoom:function(roomId,callback){        client.join({ 'roomId':roomId })        .catch(error => {          console.error('進房失敗 ' + error);        })        .then(() => {          console.log('進房成功 '+roomId+" "+userSig);           callback(client);        });    },    exitClassRoom : function(callback){        if(window.confirm("確定退出課堂嗎?")){            callback();        }    }}

3. 在LoginBox.vue 模塊編寫用戶登錄頁面,收集教師用戶的名字、手機等信息,為后面創建課堂的唯一URI做準備。

<template>       <p>       <el-row>        <el-col :span="12" :offset="6">          <el-card click="alert('aa');userInfo.role=0" :body-style="{ padding: '0px' }" :shadow="userInfo.role==0?'always':'never'">            <img style="height:200px" src="teacher.jpeg" >            <p style="padding: 14px;">              <span>我是老師,準備開課。</span>              <p >               </p>            </p>          </el-card>        </el-col>      </el-row>        <el-form style="margin:36px" label-width="80px" :model="userInfo">          <el-form-item label="我的名字">            <el-input v-model="userInfo.name"></el-input>          </el-form-item>           <el-form-item label="手機號">            <el-input v-model="userInfo.phone"></el-input>          </el-form-item>             <el-form-item>              <el-button type="primary" @click="enterRoom()"> 進入課堂 </el-button>             </el-form-item>        </el-form>      </p> </template><script>import {RoomControl} from './../TRTC.Service';  import {userInfo} from './../TRTC.Service'; export default {  name: 'LoginBox',  props: {    msg: String  },    data:function(){    return {        userInfo:{role:0,name:"My Name",phone:"0001"}    };  },  created:function(){        userInfo.name = this.userInfo.name;  },  methods:    {       enterRoom:function(){        userInfo.name = this.userInfo.name;        userInfo.phone = this.userInfo.phone;        RoomControl.createClassRoom(this.userInfo.phone,()=>{           this.$emit("enterroom");        });           }    }}</script> <style scoped> </style>

4. 在ClassRoom.vue 模塊里編寫課堂的實現邏輯代碼,流程如下,進入房間,顯示本地視頻流,然后通過client.publish() 把本地音視頻流推送到TRTC。

import Vue from 'vue'; import WhiteBoard from './TeacherWhiteBoard.vue';import TeacherLocalVideo from './TeacherLocalVideo.vue'; import StudentVideo from './StudentVideo.vue';import {createLocalStream} from './../TRTC.Service';  import {RoomControl} from './../TRTC.Service';  import {userInfo} from './../TRTC.Service';  import {roomId} from './../TRTC.Service'; import {client} from './../TRTC.Service'; let Base64 = require('js-base64').Base64;export default {  name: 'TeacherClassRoom',   components: {    WhiteBoard,     TeacherLocalVideo,    StudentVideo  },  props: {      },  created:function(){        // 房間內容有新鏈路加入事件    client.on('stream-added', event => {      console.log('stream added ');      this.students.push(event);       this.onStudentEnterRoom(event);    });    // 房間內容有新鏈路退出事件    client.on('stream-removed', event => {      console.log('stream removed ');      this.onStudenExitRoom(event);    });     RoomControl.enterClassRoom(roomId,()=>{      this.visitURI = window.location.href+"#"+ Base64.encode( roomId+"|"+userInfo.name);      createLocalStream(roomId,(stream)=>{          Vue.nextTick(()=>{              stream.play("local_stream");            client.publish(stream).then(() => {               console.log('publish');                 callback(stream);            });           });      });     });      },  methods:{    onStudenExitRoom:function(event){         console.log('onStudenExitRoom ');    },    onStudentEnterRoom:function(event){         console.log('onStudentEnterRoom ');    }  },  data:function(){    return {         visitURI:"",       students:[]    };  }}

五、在后臺儀表盤查看運行數據。

開發好教師端課堂相關模塊后,可以看到音視頻流成功地發送出去,下一步是在TRTC儀表盤看一下,剛剛發布的數據是否真的已經被TRTC服務器所接收。

從儀表盤看,老師端的音視頻數據已經進入TRTC的服務器,并顯示終端設備的一些信息。

本篇小結

• 接入TRTC SDK 必須先在TRTC后臺創建應用,并把正確的sdkAPPID 傳入,并且需要注意 userSig生成步驟不能出錯。
• 生成UserSig的時候注意每個用戶的UserId必須唯一,同時,不能跟RoomId混肴了。
• 必須嚴格遵循 client 的 createClient -> join -> createStream 流程,否則會進入房間失敗。