这是一篇关于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和密匙

•  进入腾讯云实时音视频控制台 创建应用,即可看到 SDKAppId,
•  计算签名用的加密密钥,获取步骤如下:
  •   step1. 进入腾讯云实时音视频控制台,如果还没有应用就创建一个,
  •   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 流程,否则会进入房间失败。