已收藏,可在 我的资料库 中查看
关注作者
您可能还需要

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

运营实操

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。

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

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

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

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

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

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

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

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

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

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

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

——OTSession组件

——OTPublisher组件

——OTStreams组件

——OTSubscriber组件

——createSession助手

- preloadScript高阶组件

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

配置设置

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

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

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

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

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

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

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

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

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

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

构建可重用的React组件 

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

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

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

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

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

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

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

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

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

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

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

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

现在,在 中,让我们先处理错误并调用组件

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

构建 组件

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

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

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

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

构建组件

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

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

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

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

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

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

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

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

构建组件

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

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

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

构建组件

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

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

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

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

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

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

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

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

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

运行视频聊天应用程序

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

——Publisher

——User

——连接状态

——复选框

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

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

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

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

编辑:江同

分享到:

--
评论
最新 热门 资讯 资料 专题 服务 果园 标签

收藏

--

--

分享