Build a serverless Zoom alternative in 5 minutes

栏目: IT技术 · 发布时间: 4年前

内容简介:This application demonstrates a multi-party video application built withYou must have the following installed:

Twilio Video React App

What is it

This application demonstrates a multi-party video application built with twilio-video.js and Create React App .

  • Deploy to Twilio Serverless in just a few minutes
  • No other infrastructure is required
  • No code changes are required before your first deploy
  • There is no cost associated with deploying the app
  • When using the app, you will be charged $0.01 / video participant minute .

Build a serverless Zoom alternative in 5 minutes

Pre-requisites

You must have the following installed:

  • Node.js v10+
  • NPM v6+ (comes installed with newer Node versions)

Install Dependencies

Run npm install to install all dependencies from NPM.

If you want to use yarn to install dependencies, first run the yarn import command. This will ensure that yarn installs the package versions that are specified in package-lock.json .

Install Twilio CLI

The app is deployed to Twilio using the Twilio CLI. Install twilio-cli with:

$ npm install -g twilio-cli

Login to the Twilio CLI. You will be prompted for your Account SID and Auth Token, both of which you can find on the dashboard of your Twilio console .

$ twilio login

This app requires an additional plugin. Install the CLI plugin with:

$ twilio plugins:install @twilio-labs/plugin-rtc

Deploy the app to Twilio

The app is deployed to Twilio with a single command:

$ npm run deploy:twilio-cli

This performs the following steps:

src

The passcode will expire after one week. To generate a new passcode, redeploy the app:

$ npm run deploy:twilio-cli -- --override

View app details

View the URL and passcode for the Video app with

$ twilio rtc:apps:video:view

Delete the app

Delete the app with

$ twilio rtc:apps:video:delete

This removes the Serverless app from Twilio. This will ensure that no further cost are incurred by the app.

Features

The Video app has the following features:

Browser Support

See browser support table for twilio-video.js SDK .

Deeper dive

Running a local token server

This application requires an access token to connect to a Room. The included local token server provides the application with access tokens. Perform the following steps to setup the local token server:

  • Create an account in the Twilio Console .
  • Click on 'Settings' and take note of your Account SID.
  • Create a new API Key in the API Keys Section under Programmable Video Tools in the Twilio Console. Take note of the SID and Secret of the new API key.
  • Store your Account SID, API Key SID, and API Key Secret in a new file called .env in the root level of the application (example below).
TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
TWILIO_API_KEY_SID=SKxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
TWILIO_API_KEY_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Now the local token server (see server.js ) can dispense Access Tokens to connect to a Room.

Running the App locally

Run the app locally with

$ npm start

This will start the local token server and run the app in the development mode. Open http://localhost:3000 to see the application in the browser.

The page will reload if you make changes to the source code in src/ . You will also see any linting errors in the console. Start the token server locally with

$ npm run server

The token server runs on port 8081 and expects a GET request at the /token route with the following query parameters:

identity: string,  // the user's identity
roomName: string   // the room name

The response will be a token that can be used to connect to a room.

Try it out with this sample curl command:

curl 'localhost:8081/token?identity=TestName&roomName=TestRoom'

Multiple Participants in a Room

If you want to see how the application behaves with multiple participants, you can simply open localhost:3000 in multiple tabs in your browser and connect to the same room using different user names.

Additionally, if you would like to invite other participants to a room, each participant would need to have their own installation of this application and use the same room name and Account SID (the API Key and Secret can be different).

Building

Build the React app with

$ npm run build

This script will build the static assets for the application in the build/ directory.

Tests

This application has unit tests (using Jest ) and E2E tests (using Cypress ). You can run the tests with the following scripts.

Unit Tests

Run unit tests with

$ npm test

This will run all unit tests with Jest and output the results to the console.

E2E Tests

Run end to end tests with

$ npm run cypress:open

This will open the Cypress test runner. When it's open, select a test file to run.

Note: Be sure to complete the 'Getting Started' section before running these tests. These Cypress tests will connect to real Twilio rooms, so you may be billed for any time that is used.

Application Architecture

The state of this application (with a few exceptions) is managed by the room object that is supplied by the SDK. The room object contains all information about the room that the user is connected to. The class hierarchy of the room object can be viewed here .

One great way to learn about the room object is to explore it in the browser console. When you are connected to a room, the application will expose the room object as a window variable: window.twilioRoom .

Since the Twilio Video SDK manages the room object state, it can be used as the source of truth. It isn't necessary to use a tool like Redux to track the room state. The room object and most child properties are event emitters , which means that we can subscribe to these events to update React components as the room state changes.

React hooks can be used to subscribe to events and trigger component re-renders. This application frequently uses the useState and useEffect hooks to subscribe to changes in room state. Here is a simple example:

import { useEffect, useState } from 'react';

export default function useDominantSpeaker(room) {
  const [dominantSpeaker, setDominantSpeaker] = useState(room.dominantSpeaker);

  useEffect(() => {
    room.on('dominantSpeakerChanged', setDominantSpeaker);
    return () => {
      room.off('dominantSpeakerChanged', setDominantSpeaker);
    };
  }, [room]);

  return dominantSpeaker;
}

In this hook, the useEffect hook is used to subscribe to the dominantSpeakerChanged event emitted by the room object. When this event is emitted, the setDominantSpeaker function is called which will update the dominantSpeaker variable and trigger a re-render of any components that are consuming this hook.

For more information on how React hooks can be used with the Twilio Video SDK, see this tutorial: https://www.twilio.com/blog/video-chat-react-hooks . To see all of the hooks used by this application, look in the src/hooks directory.

Configuration

The connect function from the SDK accepts a configuration object . The configuration object for this application can be found in src/index.ts . In this object, we 1) enable dominant speaker detection, 2) enable the network quality API, and 3) supply various options to configure the bandwidth profile .

Track Priority Settings

This application dynamically changes the priority of remote video tracks to provide an optimal collaboration experience. Any video track that will be displayed in the main video area will have track.setPriority('high') called on it (see the VideoTrack component) when the component is mounted. This higher priority enables the track to be rendered at a high resolution. track.setPriority(null) is called when the component is unmounted so that the track's priority is set to its publish priority (low).

Google Authentication using Firebase (optional)

This application can be configured to authenticate users before they use the app. Once users have signed into the app with their Google credentials, their Firebase ID Token will be included in the Authorization header of the HTTP request that is used to obtain an access token. The Firebase ID Token can then be verified by the server that dispenses access tokens for connecting to a room.

See .env.example for an explanation of the environment variables that must be set to enable Google authentication.

Related

License

See the LICENSE file for details.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据结构与算法

数据结构与算法

BrunoRPreiss / 电子工业出版社 / 2003-1 / 55.00元

本书是作者根据他在滑铁卢大学计算机工程学院教授数据结构与算法课程的经验编写而成的。它采用C++面向对象的设计模式,不仅系统全面地介绍了各种传统的数据结构,还把它们按照类和类层次的现代理念予以展开,进而达到抽象结构与实际设计的完美统一。本书的后三章通过引入抽象问题求解的概念,集中讲述了算法技术和各算法之间的关系。另外,作者运用一定的数学工具以及必要的分析技术和分析理论,对每种数据结构及相关算法都进行一起来看看 《数据结构与算法》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具