Skip to main content

Introduction

In this tutorial we will learn how to create a videoconferencing application using Pexip's NPM packages. We will develop some basic features, such as microphone and camera mute, apply a background image to the camera feed or share the screen.

The Pexip NPM packages are a group of TypeScript libraries that communicate with Pexip Infinity and are used to join and manage conferences. In this case we will use React, but you could use any JavaScript/Typescript framework.

During this tutorial you will learn how to use our basic libraries, but we have a lot more. You could use the @pexip/components to use our React buttons and panels, the @pexip/media-components to use our advanced React components for selecting the camera and microphone, or even test if they are working properly, or @pexip/media-processor to apply background blur or background replacement to your video. But there is a lot more to discover. Check the API documentation to get a list of all of the packages and their features.

Requirements​

Before starting any of these lessons, you will need the following prerequisites:

  • NodeJS and npm: You need to install these tools on your system. There are packages for any OS and normally you would install both together.
  • Text editor: You can use whatever you want, although our recommendation is to use Visual Studio Code.
  • Browser: You will need a browser with WebRTC support. The recommendation is to use the latest version of Google Chrome.
  • TypeScript and React knowledge: You will need solid TypeScript knowledge if you want to take advantage of these tutorials. Having some knowledge of React is recommended, but not essential.
  • Access to a Pexip Infinity deployment: This is the server that the app will use to connect. You could have your own Pexip Infinity deployment or access a demo environment. If you have any doubt about this, contact your Pexip representative.

Tutorials journey​

You can start with any lesson you want, although is recommended to start from the beginning to understand how all the pieces fit together.

In each lesson we will provide starter_code that you can download. In this code you will see some TODO comments that indicates the parts of the code that you should modify.

At the end of each lesson is important to check your progress. We will provide you with the code and a diff that will help you to see all the changes that were made during the lesson.

And without further delay, let's start this journey!