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 need to comply with 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. The recommended versions are the following:

    NodeJSNPM
    v20.12.2v10.5.0

  • Text editor: You can use whatever you want, although our recommendation is to use Visual Studio Code.

  • Browser: You need a browser with WebRTC support. The recommendation is to use the latest version of Google Chrome.

    note

    Google Chrome has a security mechanism to avoid running running web pages using HTTP or HTTPS with invalid certificates. In our case we want to access https://localhost:4000 which by default is blocked.

    To allow self-signed certificates we need to enable it in Chrome:

    • Enter the following URL in Chrome address bar: chrome://flags/#allow-insecure-localhost

    • Set the option to enabled on allow-insecure-localhost.

    Remember to disable this option when you wish to reinstate Chrome's default security settings.

  • TypeScript and React knowledge: You 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 VPaaS: This is the server that the app uses to connect. You need to generate a privateKey and publicKey. After provisioning your app in VPaaS, you get the clientId. If you have any doubt about this, contact your Pexip representative.

Tutorials journey​

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

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

At the end of each lesson it is important to check your progress. We provide you with the code and a diff that can help you to see all the changes that were made during the lesson. If you have any doubts during this tutorial, don't hesitate to contact us in Pexip Community.

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