Vonage(Nexmo)的開發(fā)者團(tuán)隊最近開始著手修改TokBox的OpenTok API，并構(gòu)建了一些帶有視頻聊天功能的入門應(yīng)用程序。

相對于典型的視頻會議，自行動手構(gòu)建視頻聊天功能會有什么好處呢？下面，就讓我們用Vonage(Nexmo)開發(fā)者團(tuán)隊為Ada Developers Academy開發(fā)的一個視頻聊天程序來具體說明一下。

什么是Ada Developers Academy？

Ada是一個為期一年的免費(fèi)項目，以供不同的人學(xué)習(xí)編程。我覺得自己非常幸運(yùn)，能夠在短短一年的時間里從一名英語教師轉(zhuǎn)變?yōu)橐幻浖こ處煛?

因此，我認(rèn)為一個很好的回饋方式是為學(xué)生創(chuàng)建一個門戶，讓他們與導(dǎo)師取得聯(lián)系，并從行業(yè)導(dǎo)師那里得到實時、面對面的幫助。另外，我還可以同時學(xué)習(xí)更多關(guān)于OpenTok API的知識!

發(fā)現(xiàn)OpenTok的小美好

在這個過程中，我發(fā)現(xiàn)了許多工程師以前不曾擁有的東西 ——在一個完全開放的平臺上，擁有對代碼功能的完全所有權(quán)和控制權(quán)是多么爽的一件事。我可以根據(jù)學(xué)生和導(dǎo)師的需求定制應(yīng)用程序和代碼。

我專門研究了OpenTok的React包裝器OpenTok React，它本質(zhì)上是OpenTok JS SDK的一個web組件。將高質(zhì)量的視頻流和音頻流集成到任何React應(yīng)用程序中都非常簡單。它提供了可定制的組件，足夠靈活，可以很容易地嵌入到我的任何React應(yīng)用程序中。

重點來了——教程請參見下方！

前提條件

node . js安裝

注冊一個TokBox帳戶

如何用OpenTok創(chuàng)建自定義視頻聊天和反應(yīng)組件

您需要完成以下任務(wù)來創(chuàng)建您的應(yīng)用程序: 

1、創(chuàng)建一個TokBox項目

2、使用create-react-app創(chuàng)建一個React應(yīng)用程序

3、構(gòu)建可重用的React組件:

Publisher

Subscriber

連接狀態(tài)

復(fù)選框

4、運(yùn)行視頻聊天應(yīng)用程序

本教程將從頭開始介紹這個過程。如果您希望看到完成的代碼，您可以為這個項目克隆git存儲庫。 

創(chuàng)建一個TokBox項目 

登錄到TokBox帳戶后，在頁面的左下角選擇Projects，然后從下拉菜單中單擊Create New Project。

選擇Create Custom Project并隨意命名。創(chuàng)建項目之后，單擊View project并保存頂部的API鍵。接下來，向下滾動到標(biāo)題為Project Tools的部分，并單擊藍(lán)色按鈕Create、Session ID。

復(fù)制并粘貼該會話ID到下面的Generate Token部分。如果您愿意，可以將過期時間延長到超過默認(rèn)的1小時。接下來，單擊藍(lán)色的Generate Token按鈕并保存生成的Token。 

使用create-react-app創(chuàng)建一個React應(yīng)用程序

在我們開始之前，請確保通過終端中運(yùn)行node-v，在您的機(jī)器上安裝了更新版本的Node(至少5.2)。

接下來，在你想要這個項目運(yùn)行的目錄下運(yùn)行命令: 

我將我的項目命名為react-components-tokbox，但是您可以隨意命名它。進(jìn)入您的項目，并安裝我們將在此項目中使用的兩個依賴項: 

opentok-react庫是一個React包裝器，由我們今天使用的幾個組件組成:

——OTSession組件

——OTPublisher組件

——OTStreams組件

——OTSubscriber組件

——createSession助手

- preloadScript高階組件

運(yùn)行npm start以確保所有安裝都正確。localhost:3000應(yīng)該會自動打開并運(yùn)行樣板反應(yīng)啟動代碼。 

配置設(shè)置

移動到src文件夾并創(chuàng)建config.js文件: 

打開這個新文件，添加剛才創(chuàng)建TokBox項目時生成的憑證: 

現(xiàn)在打開src/index.js文件，導(dǎo)入congfig.js文件:

現(xiàn)在，要實際使用這些憑證，請確保將它們傳遞到 組件: 

在src/App.js文件中，讓我們從React包裝器導(dǎo)入一些組件:

構(gòu)建可重用的React組件 

在src中創(chuàng)建一個新的components文件夾。在該文件夾中，創(chuàng)建組件: 

同樣，在src/App.js文件中，導(dǎo)入其中三個組件: 

讓我們將該文件中的組件更改為基于類的，而不是函數(shù)的。 

在構(gòu)造函數(shù)中，添加一些狀態(tài)和兩個會話活動來檢測連接狀態(tài): 

在構(gòu)造函數(shù)外部，創(chuàng)建一個函數(shù)onError(): 

在render()函數(shù)中，添加 組件，該組件傳遞來自src/index.js文件的憑據(jù): 

現(xiàn)在，在 中，讓我們先處理錯誤并調(diào)用組件 、 和 : 

構(gòu)建 組件

在src/components/ConnectionStatus.js文件中，讓我們考慮一下向用戶顯示連接狀態(tài)的最佳方式: 

現(xiàn)在回到src/App.js文件中，將狀態(tài)傳遞給 組件: 

構(gòu)建組件

現(xiàn)在，在src/components/Publisher.js文件的頂部，從opentok-react導(dǎo)入文件和OTPublisher:

下面，讓我們創(chuàng)建一個基于類的組件發(fā)布器: 

讓我們用某種狀態(tài)來填充這些函數(shù): 

在 中，讓我們將publishAudio、publishVideo和videoSource傳遞給屬性道具，并將函數(shù)onError()傳遞給onError道具: 

構(gòu)建組件

現(xiàn)在，在src/components/Subscriber.js文件中，讓我們導(dǎo)入文件和組件，并在 中創(chuàng)建一個基于類的組件訂閱器，其中subscribeToAudio和subscribeToVideo作為屬性: 

構(gòu)建組件

我們將在和組件中使用組件: 

現(xiàn)在讓我們在src/components/Publisher.js文件中同時使用 組件: 

在src/components/ subscribe .js文件中: 

最后，讓我們在src/app.CSS文件中為應(yīng)用程序添加一些簡單的CSS: 

運(yùn)行視頻聊天應(yīng)用程序

您現(xiàn)在已經(jīng)創(chuàng)建了所有的React組件:

——Publisher

——User

——連接狀態(tài)

——復(fù)選框

您可以測試您的應(yīng)用程序，在您的終端從您的根項目運(yùn)行npm start。

這些組件是模塊化的，可以為未來的React應(yīng)用程序重用。

現(xiàn)在，你可以輕松快速地將它們插入你的應(yīng)用程序，以啟用視頻聊天功能。

以上內(nèi)容屬作者個人觀點，不代表雨果網(wǎng)立場！

編輯：江同