In this tutorial we will learn how to create a videoconferencing application using Pexip's NPM packages. We will show how to use basic features, such as microphone mute and camera mute and how to share the screen.
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
@pexip/media-components to use our advanced React components for
selecting the camera and microphone, or even test if they are working properly,
@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.
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.
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!