2020-04-22

TRTC on Electron

image

跑通 DEMO

<span id="step1"></span>

步骤1:创建新的应用

  1. 登录实时音视频控制台,选择【开发辅助】>【快速跑通Demo】。
  2. 单击【立即开始】,输入应用名称,例如TestTRTC,单击【创建应用】。

<span id="step2"></span>

步骤2:下载 SDK 和 Demo 源码

  1. 鼠标移动至对应卡片,单击【Github】跳转至 Github(或单击【ZIP】),下载相关 SDK 及配套的 Demo 源码。
    image
  2. 下载完成后,返回实时音视频控制台,单击【我已下载,下一步】,可以查看 SDKAppID 和密钥信息。

<span id="step3"></span>

步骤3:配置 Demo 工程文件

  1. 解压 步骤2 中下载的源码包。
  2. 找到并打开 TRTCSDK/Electron/js/GenerateTestUserSig.js 文件。
  3. 设置 GenerateTestUserSig.js 文件中的相关参数:
    <ul><li>SDKAPPID:默认为0,请设置为实际的 SDKAppID。</li>
    <li>SECRETKEY:默认为空字符串,请设置为实际的密钥信息。</li></ul>
    <img src="https://main.qcloudimg.com/raw/a82e1c7c3b4edde3b9ac1326b2556147.png"/>
  4. 返回实时音视频控制台,单击【粘贴完成,下一步】。
  5. 单击【关闭指引,进入控制台管理应用】。

<span id="step4"></span>

步骤4:编译运行

Windows 平台

  1. 下载最新版本的 Node.js 安装包,如果您的电脑是64位操作系统,请选择 Windows Installer (.msi) 64-bit,32位操作系统请选择 Windows Installer (.msi) 32-bit。
    image
  2. 打开应用程序列表中的 Node.js command prompt,启动命令行窗口,并将目录定位到 步骤3 中解压到的目标路径,并运行如下命令:
npm install
image
  1. 如果您在中国大陆,可能会遭遇下载 electron 压缩包很慢的问题:
    image

    此时可以通过配置国内的镜像地址,或者从 Github 下载对应的版本和 SHASUMS256.txt 文件到 C:\Users\[您的用户名]\AppData\Local\electron\Cache 目录下,如下图:
    image
  2. 待 npm 的依赖包都安装完成后,继续在命令行窗口运行如下命令,即可运行起 Electron Demo。
npm start
image

Mac OS 平台

  1. 打开终端(Terminal)窗口,输入如下命令安装 Homebrew,如果已经安装请跳过此步骤。
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. 继续键入如下命令,安装 Node.js:
$ brew install node
  1. 如果您在中国大陆,可能会发现使用 Homebrew 的默认地址安装 Node.js 会比较慢,此时可以考虑替换为国内镜像地址。
$ cd `brew --repo`
$ git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git
$ brew update
  1. 通过 cd 命令定位到 步骤3 中解压到的目标路径,并运行如下命令:
npm install
image
  1. 待 npm 的依赖包都安装完成后,继续在命令行窗口运行如下命令,即可运行起 Electron Demo。
npm start
image

参考文档

https://trtc-1252463788.file.myqcloud.com/electron_sdk/docs/index.html

快速集成

step1. 通过npm下载trtc库(确认联网状态)

npm install trtc-electron-sdk@latest --save-dev

step2. 对接基本功能函数

//1、引入库
const TRTCCloud = require('trtc-electron-sdk');
const {
    TRTCVideoStreamType,
    TRTCAppScene,
    TRTCVideoResolution,
    TRTCVideoResolutionMode,
    TRTCParams
} = require('trtc-electron-sdk/liteav/trtc_define');

//2、构建 TRTCCloud
this.rtcCloud = new TRTCCloud();

//3、注册回调
subscribeEvents = (rtcCloud) => {
    rtcCloud.on('onError', (errcode, errmsg) => {
        console.info('trtc_demo: onError :' + errcode + " msg" + errmsg);
    }); 

    rtcCloud.on('onEnterRoom', (elapsed) => {
        console.info('trtc_demo: onEnterRoom elapsed:' + elapsed);
    });
    rtcCloud.on('onExitRoom', (reason) => {
        console.info('trtc_demo: onExitRoom reason:' + reason);
    });

    // 注册远程视频的可用状态
    rtcCloud.on('onUserVideoAvailable', (uid, available) => {
        console.info('trtc_demo: onUserVideoAvailable uid:' + uid + " available:" + available);
        if (available) {
            let view = this.findVideoView(uid, TRTCVideoStreamType.TRTCVideoStreamTypeBig);
            this.rtcCloud.startRemoteView(uid, view);
        }
        else {
            this.rtcCloud.stopRemoteView(uid);
            this.destroyVideoView(uid, TRTCVideoStreamType.TRTCVideoStreamTypeBig);
        }
    });

    //.....
    //.....
};
subscribeEvents(this.rtcCloud);

//4、进入房间
enterroom () {
    //1. 进房参数
    let param = new TRTCParams();
    param.sdkAppId = sdkInfo.sdkappid;
    param.roomId = parseInt(this.roomId);
    param.userSig = userSig;
    param.userId = this.userId;
    param.privateMapKey = '';
    param.businessInfo = '';
    this.rtcCloud.enterRoom(param, TRTCAppScene.TRTCAppSceneVideoCall);
    //2. 编码参数
    let encparam = new TRTCVideoEncParam();
    encparam.videoResolution = TRTCVideoResolution.TRTCVideoResolution_640_360;
    encparam.resMode = TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape;
    encparam.videoFps = 15;
    encparam.videoBitrate = 550;
    this.rtcCloud.setVideoEncoderParam(encparam);
    //3. 打开采集和预览本地视频、采集音频
    enableVideoCapture(true);
    enableAudioCapture(true);
},

//5、退出房间
exitroom() {
    this.rtcCloud.exitRoom();
},

//6、开启视频
enableVideoCapture(bEnable) {
    if (bEnable) {
        let view = this.findView("local", TRTCVideoStreamType.TRTCVideoStreamTypeBig);
        this.rtcCloud.startLocalPreview(view);
    }
    else {
        this.rtcCloud.stopLocalPreview();
    }
},

//7、开启音频
enableAudioCapture(bEnable) {
    if (bEnable) {
        this.rtcCloud.startLocalAudio();
    }
    else {
        this.rtcCloud.stopLocalAudio();
    }
},

//8、找个DOM结点,作为视频显示的view
findVideoView(uid, streamtype) {
    let key = uid + String(streamtype);
    var userVideoEl = document.getElementById(key);
    if (!userVideoEl) {
    userVideoEl = document.createElement('div');
    userVideoEl.id = key;
    userVideoEl.classList.add('video_view');
    document.querySelector("#video_wrap").appendChild(userVideoEl);
    }
    return userVideoEl;
},

//9、在视频退出时,清掉一个DOM结点
destroyVideoView(uid, streamtype) {
    let key = uid + String(streamtype);
    var userVideoEl = document.getElementById(key);
    if (userVideoEl) {
    document.querySelector("#video_wrap").removeChild(userVideoEl);
    }
},

常见问题

1. 查看密钥时只能获取公钥和私钥信息,要如何获取密钥?

TRTC SDK 6.6 版本(2019年08月)开始启用新的签名算法 HMAC-SHA256。在此之前已创建的应用,需要先升级签名算法才能获取新的加密密钥。如不升级,您也可以继续使用 老版本算法 ECDSA-SHA256

升级操作:

  1. 登录 实时音视频控制台
  2. 在左侧导航栏选择【应用管理】,单击目标应用所在行的【应用信息】。
  3. 选择【快速上手】页签,单击【第二步 获取签发UserSig的密钥】区域的【点此升级】。

2. 两台设备同时运行 Demo,为什么看不到彼此的画面?

请确保两台设备在运行 Demo 时使用的是不同的 UserID,TRTC 不支持同一个 UserID (除非 SDKAppID 不同)在两个设备同时使用。

image

3. 防火墙有什么限制?

由于 SDK 使用 UDP 协议进行音视频传输,所以对 UDP 有拦截的办公网络下无法使用,如遇到类似问题,请参考文档:应对公司防火墙限制

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,744评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,505评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,105评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,242评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,269评论 6 389
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,215评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,096评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,939评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,354评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,573评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,745评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,448评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,048评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,683评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,838评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,776评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,652评论 2 354

推荐阅读更多精彩内容