OpenTok手把手：如何定制視頻聊天和React組件

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

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

什么是Ada Developers Academy？

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

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

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

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

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

重點(diǎn)來了——教程請(qǐng)參見下方！

前提條件

node . js安裝

注冊(cè)一個(gè)TokBox帳戶

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

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

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

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

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

Publisher

Subscriber

連接狀態(tài)

復(fù)選框

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

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

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

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

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

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

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

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

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

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

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

——OTSession組件

——OTPublisher組件

——OTStreams組件

——OTSubscriber組件

——createSession助手

- preloadScript高階組件

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

配置設(shè)置

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

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

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

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

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

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

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

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

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

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

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

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

現(xiàn)在，在 中，讓我們先處理錯(cuò)誤并調(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)建一個(gè)基于類的組件發(fā)布器: 

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

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

構(gòu)建組件

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

構(gòu)建組件

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

現(xiàn)在讓我們?cè)趕rc/components/Publisher.js文件中同時(shí)使用 組件: 

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

最后，讓我們?cè)趕rc/app.CSS文件中為應(yīng)用程序添加一些簡(jiǎn)單的CSS: 

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

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

——Publisher

——User

——連接狀態(tài)

——復(fù)選框

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

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

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

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

編輯：江同