TRTC on Electron
image
跑通 DEMO
<span id="step1"></span>
步驟1：創(chuàng)建新的應(yīng)用
- 登錄實(shí)時(shí)音視頻控制臺(tái)呻引，選擇【開(kāi)發(fā)輔助】>【快速跑通Demo】苞七。
- 單擊【立即開(kāi)始】挪丢，輸入應(yīng)用名稱乾蓬，例如
TestTRTC任内，單擊【創(chuàng)建應(yīng)用】。
<span id="step2"></span>
步驟2：下載 SDK 和 Demo 源碼
- 鼠標(biāo)移動(dòng)至對(duì)應(yīng)卡片趋距，單擊【Github】跳轉(zhuǎn)至 Github（或單擊【ZIP】）节腐，下載相關(guān) SDK 及配套的 Demo 源碼。
image - 下載完成后饱苟，返回實(shí)時(shí)音視頻控制臺(tái)箱熬，單擊【我已下載城须，下一步】酿傍，可以查看 SDKAppID 和密鑰信息赤炒。
<span id="step3"></span>
步驟3：配置 Demo 工程文件
- 解壓 步驟2 中下載的源碼包莺褒。
- 找到并打開(kāi)
TRTCSDK/Electron/js/GenerateTestUserSig.js文件雪情。 - 設(shè)置
GenerateTestUserSig.js文件中的相關(guān)參數(shù)：
<ul><li>SDKAPPID：默認(rèn)為0尘执，請(qǐng)?jiān)O(shè)置為實(shí)際的 SDKAppID誊锭。</li>
<li>SECRETKEY：默認(rèn)為空字符串弥锄，請(qǐng)?jiān)O(shè)置為實(shí)際的密鑰信息籽暇。</li></ul>
<img src="https://main.qcloudimg.com/raw/a82e1c7c3b4edde3b9ac1326b2556147.png"/> - 返回實(shí)時(shí)音視頻控制臺(tái)戒悠，單擊【粘貼完成，下一步】惶看。
- 單擊【關(guān)閉指引纬黎，進(jìn)入控制臺(tái)管理應(yīng)用】本今。
<span id="step4"></span>
步驟4：編譯運(yùn)行
Windows 平臺(tái)
- 下載最新版本的 Node.js 安裝包冠息，如果您的電腦是64位操作系統(tǒng)逛艰，請(qǐng)選擇 Windows Installer (.msi) 64-bit搞旭，32位操作系統(tǒng)請(qǐng)選擇 Windows Installer (.msi) 32-bit肄渗。
image - 打開(kāi)應(yīng)用程序列表中的
Node.js command prompt翎嫡，啟動(dòng)命令行窗口，并將目錄定位到 步驟3 中解壓到的目標(biāo)路徑具伍，并運(yùn)行如下命令：
npm install
image
- 如果您在中國(guó)大陸人芽，可能會(huì)遭遇下載 electron 壓縮包很慢的問(wèn)題：
image
此時(shí)可以通過(guò)配置國(guó)內(nèi)的鏡像地址，或者從 Github 下載對(duì)應(yīng)的版本和SHASUMS256.txt文件到C:\Users\[您的用戶名]\AppData\Local\electron\Cache目錄下祈坠，如下圖：
image - 待 npm 的依賴包都安裝完成后赦拘，繼續(xù)在命令行窗口運(yùn)行如下命令躺同，即可運(yùn)行起 Electron Demo蹋艺。
npm start
image
Mac OS 平臺(tái)
- 打開(kāi)終端（Terminal）窗口民效，輸入如下命令安裝 Homebrew畏邢，如果已經(jīng)安裝請(qǐng)?zhí)^(guò)此步驟检吆。
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- 繼續(xù)鍵入如下命令臂寝，安裝 Node.js：
$ brew install node
- 如果您在中國(guó)大陸交煞，可能會(huì)發(fā)現(xiàn)使用 Homebrew 的默認(rèn)地址安裝 Node.js 會(huì)比較慢素征，此時(shí)可以考慮替換為國(guó)內(nèi)鏡像地址御毅。
$ cd `brew --repo`
$ git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git
$ brew update
- 通過(guò) cd 命令定位到 步驟3 中解壓到的目標(biāo)路徑端蛆，并運(yùn)行如下命令：
npm install
image
- 待 npm 的依賴包都安裝完成后今豆，繼續(xù)在命令行窗口運(yùn)行如下命令柔袁，即可運(yùn)行起 Electron Demo。
npm start
image
參考文檔
https://trtc-1252463788.file.myqcloud.com/electron_sdk/docs/index.html
快速集成
step1. 通過(guò)npm下載trtc庫(kù)(確認(rèn)聯(lián)網(wǎng)狀態(tài))
npm install trtc-electron-sdk@latest --save-dev
step2. 對(duì)接基本功能函數(shù)
//1插掂、引入庫(kù)
const TRTCCloud = require('trtc-electron-sdk');
const {
TRTCVideoStreamType,
TRTCAppScene,
TRTCVideoResolution,
TRTCVideoResolutionMode,
TRTCParams
} = require('trtc-electron-sdk/liteav/trtc_define');
//2、構(gòu)建 TRTCCloud
this.rtcCloud = new TRTCCloud();
//3、注冊(cè)回調(diào)
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);
});
// 注冊(cè)遠(yuǎn)程視頻的可用狀態(tài)
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辅甥、進(jìn)入房間
enterroom () {
//1. 進(jìn)房參數(shù)
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. 編碼參數(shù)
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. 打開(kāi)采集和預(yù)覽本地視頻酝润、采集音頻
enableVideoCapture(true);
enableAudioCapture(true);
},
//5、退出房間
exitroom() {
this.rtcCloud.exitRoom();
},
//6璃弄、開(kāi)啟視頻
enableVideoCapture(bEnable) {
if (bEnable) {
let view = this.findView("local", TRTCVideoStreamType.TRTCVideoStreamTypeBig);
this.rtcCloud.startLocalPreview(view);
}
else {
this.rtcCloud.stopLocalPreview();
}
},
//7要销、開(kāi)啟音頻
enableAudioCapture(bEnable) {
if (bEnable) {
this.rtcCloud.startLocalAudio();
}
else {
this.rtcCloud.stopLocalAudio();
}
},
//8、找個(gè)DOM結(jié)點(diǎn)谢揪，作為視頻顯示的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蕉陋、在視頻退出時(shí)，清掉一個(gè)DOM結(jié)點(diǎn)
destroyVideoView(uid, streamtype) {
let key = uid + String(streamtype);
var userVideoEl = document.getElementById(key);
if (userVideoEl) {
document.querySelector("#video_wrap").removeChild(userVideoEl);
}
},
常見(jiàn)問(wèn)題
1. 查看密鑰時(shí)只能獲取公鑰和私鑰信息拨扶，要如何獲取密鑰？
TRTC SDK 6.6 版本（2019年08月）開(kāi)始啟用新的簽名算法 HMAC-SHA256。在此之前已創(chuàng)建的應(yīng)用印蓖，需要先升級(jí)簽名算法才能獲取新的加密密鑰。如不升級(jí)，您也可以繼續(xù)使用 老版本算法 ECDSA-SHA256。
升級(jí)操作：
- 登錄 實(shí)時(shí)音視頻控制臺(tái)。
- 在左側(cè)導(dǎo)航欄選擇【應(yīng)用管理】，單擊目標(biāo)應(yīng)用所在行的【應(yīng)用信息】。
- 選擇【快速上手】頁(yè)簽灸芳，單擊【第二步 獲取簽發(fā)UserSig的密鑰】區(qū)域的【點(diǎn)此升級(jí)】谒获。
2. 兩臺(tái)設(shè)備同時(shí)運(yùn)行 Demo，為什么看不到彼此的畫面？
請(qǐng)確保兩臺(tái)設(shè)備在運(yùn)行 Demo 時(shí)使用的是不同的 UserID权悟，TRTC 不支持同一個(gè) UserID （除非 SDKAppID 不同）在兩個(gè)設(shè)備同時(shí)使用榔昔。
image
3. 防火墻有什么限制茧彤？
由于 SDK 使用 UDP 協(xié)議進(jìn)行音視頻傳輸珠洗，所以對(duì) UDP 有攔截的辦公網(wǎng)絡(luò)下無(wú)法使用，如遇到類似問(wèn)題自阱，請(qǐng)參考文檔：應(yīng)對(duì)公司防火墻限制加派。
