OpenTok手把手：如何定制视频聊天和React组件

Vonage(Nexmo)的开发者团队最近开始着手修改TokBox的OpenTok API，并构建了一些带有视频聊天功能的入门应用程序。

相对于典型的视频会议，自行动手构建视频聊天功能会有什么好处呢？下面，就让我们用Vonage(Nexmo)开发者团队为Ada Developers Academy开发的一个视频聊天程序来具体说明一下。

什么是Ada Developers Academy？

Ada是一个为期一年的免费项目，以供不同的人学习编程。我觉得自己非常幸运，能够在短短一年的时间里从一名英语教师转变为一名软件工程师。

因此，我认为一个很好的回馈方式是为学生创建一个门户，让他们与导师取得联系，并从行业导师那里得到实时、面对面的帮助。另外，我还可以同时学习更多关于OpenTok API的知识!

发现OpenTok的小美好

在这个过程中，我发现了许多工程师以前不曾拥有的东西 ——在一个完全开放的平台上，拥有对代码功能的完全所有权和控制权是多么爽的一件事。我可以根据学生和导师的需求定制应用程序和代码。

我专门研究了OpenTok的React包装器OpenTok React，它本质上是OpenTok JS SDK的一个web组件。将高质量的视频流和音频流集成到任何React应用程序中都非常简单。它提供了可定制的组件，足够灵活，可以很容易地嵌入到我的任何React应用程序中。

重点来了——教程请参见下方！

前提条件

node . js安装

注册一个TokBox帐户

如何用OpenTok创建自定义视频聊天和反应组件

您需要完成以下任务来创建您的应用程序: 

1、创建一个TokBox项目

2、使用create-react-app创建一个React应用程序

3、构建可重用的React组件:

Publisher

Subscriber

连接状态

复选框

4、运行视频聊天应用程序

本教程将从头开始介绍这个过程。如果您希望看到完成的代码，您可以为这个项目克隆git存储库。 

创建一个TokBox项目 

登录到TokBox帐户后，在页面的左下角选择Projects，然后从下拉菜单中单击Create New Project。

选择Create Custom Project并随意命名。创建项目之后，单击View project并保存顶部的API键。接下来，向下滚动到标题为Project Tools的部分，并单击蓝色按钮Create、Session ID。

复制并粘贴该会话ID到下面的Generate Token部分。如果您愿意，可以将过期时间延长到超过默认的1小时。接下来，单击蓝色的Generate Token按钮并保存生成的Token。 

使用create-react-app创建一个React应用程序

在我们开始之前，请确保通过终端中运行node-v，在您的机器上安装了更新版本的Node(至少5.2)。

接下来，在你想要这个项目运行的目录下运行命令: 

我将我的项目命名为react-components-tokbox，但是您可以随意命名它。进入您的项目，并安装我们将在此项目中使用的两个依赖项: 

opentok-react库是一个React包装器，由我们今天使用的几个组件组成:

——OTSession组件

——OTPublisher组件

——OTStreams组件

——OTSubscriber组件

——createSession助手

- preloadScript高阶组件

运行npm start以确保所有安装都正确。localhost:3000应该会自动打开并运行样板反应启动代码。 

配置设置

移动到src文件夹并创建config.js文件: 

打开这个新文件，添加刚才创建TokBox项目时生成的凭证: 

现在打开src/index.js文件，导入congfig.js文件:

现在，要实际使用这些凭证，请确保将它们传递到 组件: 

在src/App.js文件中，让我们从React包装器导入一些组件:

构建可重用的React组件 

在src中创建一个新的components文件夹。在该文件夹中，创建组件: 

同样，在src/App.js文件中，导入其中三个组件: 

让我们将该文件中的组件更改为基于类的，而不是函数的。 

在构造函数中，添加一些状态和两个会话活动来检测连接状态: 

在构造函数外部，创建一个函数onError(): 

在render()函数中，添加 组件，该组件传递来自src/index.js文件的凭据: 

现在，在 中，让我们先处理错误并调用组件 、 和 : 

构建 组件

在src/components/ConnectionStatus.js文件中，让我们考虑一下向用户显示连接状态的最佳方式: 

现在回到src/App.js文件中，将状态传递给 组件: 

构建组件

现在，在src/components/Publisher.js文件的顶部，从opentok-react导入文件和OTPublisher:

下面，让我们创建一个基于类的组件发布器: 

让我们用某种状态来填充这些函数: 

在 中，让我们将publishAudio、publishVideo和videoSource传递给属性道具，并将函数onError()传递给onError道具: 

构建组件

现在，在src/components/Subscriber.js文件中，让我们导入文件和组件，并在 中创建一个基于类的组件订阅器，其中subscribeToAudio和subscribeToVideo作为属性: 

构建组件

我们将在和组件中使用组件: 

现在让我们在src/components/Publisher.js文件中同时使用 组件: 

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

最后，让我们在src/app.CSS文件中为应用程序添加一些简单的CSS: 

运行视频聊天应用程序

您现在已经创建了所有的React组件:

——Publisher

——User

——连接状态

——复选框

您可以测试您的应用程序，在您的终端从您的根项目运行npm start。

这些组件是模块化的，可以为未来的React应用程序重用。

现在，你可以轻松快速地将它们插入你的应用程序，以启用视频聊天功能。

以上内容属作者个人观点，不代表雨果网立场！

编辑：江同