65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 OpenTok 和 React Native 构建简单的视频流应用程序

Manjunath Matathamana
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (2投票s)

2018年10月28日

CPOL

5分钟阅读

viewsIcon

17627

关于使用 OpenTok 和 React Native 构建视频流应用程序的开发者教程。


构建一个移动应用程序可能具有挑战性，尤其是当您想做一些许多用户尚未尝试过的事情时。这是因为 React-Native API 只有几年历史，您不能期望它在所有方面都成熟。用户总是乐于接受和适应这些挑战，并确保开发过程尽可能简单。

在本指南中，我们将进行一项实验，构建一个简单的移动应用程序，该应用程序将允许用户通过 OpenTok 和 React Native 直播他们的手机摄像头。以下步骤将指导您完成将 OpenTok 与 React Native 集成的过程。让我们开始吧！

关于 React Native 中的流媒体

React Native，正如您可能已经知道的，是 Facebook 开发的一个平台，用于在 Android 和 iOS 上构建原生移动应用程序。视频流是现代移动应用程序应涵盖的重要方面。以下是您可能期望从流媒体平台/库获得的一些功能。

  • 直播和播放支持。
  • 选择带字幕的音频和文本轨道
  • 实时生成字幕
  • 可配置的速率和质量（增加或减少质量）。
  • 即使应用程序在后台运行，也可以进行音频播放。
  • 外部播放。
  • 同时支持 iOS 和 Android 设备。

您可以从头开始创建一个，也可以使用与 React 兼容的现有库和平台。如果您要为 Web 进行此操作，可以使用 HTTP 直播功能和 HTML5 视频播放器。或者，您可以使用 HTTP 直播和视频播放的库，如 Videojs、Cloudinary、hls.js 等与 React 一起使用。

然而，这种技术对于原生应用程序来说可能相当麻烦。这时 OpenTok 这样的平台就派上用场了。

OpenTok 是一个由 TokBox 社区提供的基于开源视频平台的工具。它有助于将高质量的音频和视频流集成到 Web 和您的移动应用程序中。

OpenTok 利用 WebRTC 技术进行这些基于音频和视频的通信。它支持 Web、iOS、Windows 和 Android 应用程序。

设置 OpenTok 账户

在您 注册了 OpenTok 账户 之后，您可以为您的基于 React 的原生移动应用程序创建一个新项目。

可以通过 OpenTok 控制台为项目创建测试会话和令牌。使用这些令牌和会话 ID，发起直播过程相对简单。

在使用相机开始流式传输之前，您应该牢记以下 OpenTok 基本知识

  1. OpenTok 视频流由会话启动。这些会话托管在基于 OpenTok 的云上。每个会话都有其唯一的会话 ID。这些会话 ID 帮助多个客户端在流式传输时连接到特定会话。
  2. 发布 – 当客户端设备连接到会话时，它可以向该会话发布音频/视频流。借助发布者令牌，用户可以授予客户端设备向会话发布的权限。这使得可以实现一对一或少数发布者但一对多订阅者的会话。
  3. 订阅者 – 客户端设备连接到会话后，该设备可以订阅该会话中其他客户端发布的任意音频或视频流。这是使用订阅者令牌完成的。

要了解更多关于 OpenTok 的基础知识，您可以参考 OpenTok 官方开发者文档。

将视频流集成到 React Native

OpenTok 平台为 Android、Windows 和 iOS 等多种客户端提供 SDK。React Native 应用程序没有自己的官方 SDK。

CallStack 社区之前开发了一个名为 react-native-opentok 的开源 React Native OpenTok 包装器。它已迅速成为 OpenTok 的事实上的包装器之一。

以下是为 iOS 和 Android 在 React Native 应用中集成 OpenTok 会话需要遵循的一些步骤。

安装 react-native-opentok

'react-native-opentok' 插件是通过将原生 'opentok SDK' 与 JavaScript 集成而构建的。可以使用 'npm' 或 'yarn' 进行安装，如下所示 –
 

yarn add react-native-opentok

iOS 集成

通过使用 CocoaPods，react-native-opentok 插件可以轻松集成到原生 React 应用程序中。在下面的示例中，正在添加 'RNOpenTok' pod。Podfile 会是这样的 –

    source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '9.0'

target 'TokBot' do
  node_modules_path = '../node_modules'

  pod 'yoga', path: "#{node_modules_path}/react-native/ReactCommon/yoga/yoga.podspec"
  pod 'React', path: "#{node_modules_path}/react-native"

  pod 'RNOpenTok', path: "#{node_modules_path}/react-native-opentok/ios"
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
end

Android 集成

使用 Android 时，可以使用以下命令自动链接 'react-native-opentok' –

react-native link react-native-opentok

用户还可以使用下面的代码片段将 opentok maven 仓库添加到他们的 'android/build.gradle' 中 –

allprojects {
    repositories {
        ...
        maven { url "http://tokbox.bintray.com/maven"}
    }
}

用户可以使用 'OPENTOK_API_KEY' 和以下权限配置他们的清单文件 –

<meta-data android:name="OPENTOK_API_KEY" android:value="" />
....
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.BLUETOOTH"/>
<uses-permission android:name="android.permission.BROADCAST_STICKY"/>

编写组件代码

这是一个基本应用程序，提供了一种探索使用 OpenTok SDK 的简单方法。该应用程序为用户提供大多数核心功能，包括 –

  1. 连接到会话
  2. 在会话中发布音频和视频流
  3. 在会话中订阅音频和视频流

演示应用程序有两个主要组件 – 发布者和订阅者。这允许用户通过一个会话进行发布，或者另一个用户使用相同的会话和订阅者 ID 加入该会话并观看直播视频。

当用户在应用中连接到 OpenTok 会话时，他们可以使用 OpenTok 会话 ID 和发布者/订阅者 ID 来指定他们希望加入的会话。

发布者组件

发布者组件用于实时直播客户端设备的摄像头。下面的代码是特定会话的发布者组件 –

import React, { Component } from "react";
import { StyleSheet, Text, View, TouchableOpacity,Dimensions } from "react-native";
import OpenTok, { Publisher,Subscriber } from 'react-native-opentok';

const sessionId = 'YOUR_OPENTOK_SESSIONID';
const token = 'YOUR_OPENTOK_PUBLISHER_TOKEN';

export default class Publish extends Component<{}> {

  async componentWillMount() {
    await OpenTok.connect(sessionId, token);
    OpenTok.on(OpenTok.events.ON_SIGNAL_RECEIVED, e => console.log(e));
  }
  
  ref: Ref<typeof Publisher>;
  
  render() {
    return (
      <View style={styles.container}>
        <View style={{flex:0.9}}>
          <Publisher
            sessionId={sessionId}
            mute={this.state.isAudioMute}
            onPublishStart={() => { console.log('Streaming Started')}}
            onPublishStop={() => { console.log('Streaming Stopped')}}
            onPublishError={() => { console.log('Streaming Error')}}
            style={{backgroundColor: 'black',height:height, width: width,  }}
            ref={ref => {
              this.ref = ref;
            }}
          />
        </View>
        ...
    );
  }
  cancelAndBack(){
    OpenTok.disconnect(sessionId)
    this.props.navigation.goBack()
  }
};


在上面的发布者组件示例中，使用了以下属性和方法 –

  1. connect (sessonId: string, token: string): 用户通过会话 ID 和发布者令牌连接到特定会话。
  2. disconnect (sessionId): 使用会话 ID 断开客户端用户与特定会话的连接。
  3. mute: 用于允许用户发布音频和视频。默认设置为“False”。
  4. onPublishStart(): 发布操作开始时调用。
  5. onPublishStop(): 发布操作停止时调用。
  6. onPublishError(): 发布过程中发生错误时调用。

观看者组件

订阅者组件允许用户通过订阅者令牌和会话 ID 加入特定的直播。请看下面的示例 –

import React, { Component } from "react";
import { StyleSheet, Text, View, TouchableOpacity,Dimensions } from "react-native";
import OpenTok, { Subscriber } from 'react-native-opentok';

const sessionId = 'YOUR_OPENTOK_SESSIONID';
const token = 'YOUR_OPENTOK_SUBSCRIBER_TOKEN';

export default class Viewer extends Component<{}> {

  async componentWillMount() {
    await OpenTok.connect(sessionId, token);
    OpenTok.on(OpenTok.events.ON_SIGNAL_RECEIVED, e => console.log(e));
  }
  
  ref: Ref<typeof Viewer>;
  
  render() {
    return (
      <View style={styles.container}>
        <View style={{flex:0.9}}>
         <Subscriber
            sessionId={sessionId}
            onSubscribeStart={() => { console.log('Watching started')}}
            onSubscribeStop={() => { console.log('Watching paused')}
            onSubscribeError={() => { console.log('Error occured')}
            style={{backgroundColor: 'black',height:height, width: width,  }}
            ref={ref => {
              this.ref = ref;
            }}
          />
        </View>
        ...
    );
  }
  cancelAndBack(){
    OpenTok.disconnect(sessionId)
    this.props.navigation.goBack()
  }
};

脚注

现在我们应该有一个可以执行视频流的简单的跨平台移动应用程序。借助此应用程序，用户将能够连接到会话并发布他们的流以及订阅流。

© . All rights reserved.