Invirtu is a Live Media as a Service (LMAAS), which means no-code and low-code tools for building video conferencing, audio conferencing, live streaming, and augmented reality solutions.
npm install invirtu-react-widgetsInvirtu is a Live Media as a Service (LMAAS), which means no-code and low-code tools for building video conferencing, audio conferencing, live streaming, and augmented reality solutions.
This library will cover how to implement the live media functionality into React website. This repo only covers a React implementation for websites; please visit the React Native repo for a mobile implementation.
The IFrames have unique capabilities such as the ability to pass JSON Web Tokens for Authentication, automatic resizing, and there are also several different types of IFrames that can be embedded. The implementation process is simplified through what is known as widgets. Widgets are the special tags that will create the correct IFrame, pass the authentication tags, and resize as needed.
This library is designed for React projects. To install, on your command line run the following in your React root folder:
npm install invirtu-react-widgets --save
On Invirtu, every video conference, audio conference, live stream, and AR session is considered a live event. For each widget to function properly, an id of a live event is required. To obtain an event ID, you must have registered for an organizer account here.
Once you have an organizer account, you can either:
1. Read the documentation to create a live event and return the id
2. Use one of the libraries, like the Invirtu Javascript API Library, to create a live event and retrieve the id.
After the id from the live event is retrieved, you can use it to create a variety of widgets.
The video conferencing widget is when one or more users join a video call to have a real-time conversation with each other. Example use cases can be 1:1 coaching calls, a live shopping session with one or multiple participants, or even virtual classroom settings with a large number of people.
To implement the widget, first it must be imported:
import { VideoConferencing } from "invirtu-react-widgets";
Afterwards, the live event id is placed into the widget, which will create the interface on-screen.
A more complete pseudo code example of the widget being used in conjunction with Javascript API looks something similar to the below. You will have to have your auth token and organizer id to effectively use.
``
import { VideoConferencing } from "invirtu-react-widgets";
import { Events, Config } from "invirtu-javascript-api";
import React, { useEffect, useState } from "react";
export default function ExampleComponent() {
const [widget, setWidget] = useState(false);
useEffect(() => {
createInterface();
}, []);
function createInterface() {
Config.setAuthToken('some_auth_token');
let data = {
type: 7,
organizer_id: 'an_organizer_id'
};
Events.createEvent(data).then(response => {
if (response.status == "success") {
setWidget(
}
}).catch(error => {
console.log(error);
});
}
return (
<>
{widget}
);
}
`$3
There are several other widgets that can be implemented in relation to a live event. They are listed as follows:
#### Live Streaming
Shows a live stream. Live streams is either when a stream of pre-recorded content or a stream from a live event received via the RTMP is being shown.
`
import { Livestreaming } from "invirtu-react-widgets";
`
#### Broadcasting
Broadcasting is when a video conference is streamed to an audience that is watching.
`
import { Broadcasting } from "invirtu-react-widgets";
`
#### Pop-up
When the widgets are not working correctly inside a website because of certain restrictions that exist on that site, a pop-up window can be used to display the widget inside a pop-up window.
`
import { Popup } from "invirtu-react-widgets";
`
#### Join
Before a user is able to join a session, they can be prompted to set which video and audio source they want to use and be required to enter identify information.
`
import { Join } from "invirtu-react-widgets";
`
#### Ticketing/RSVPing
Some sessions will be guarded by a pay wall or require a user to RSVP. Use this widget to implement ticketing functionality.
`
import { Ticketing } from "invirtu-react-widgets";
`
To better understand the use of various widgets in different circumstances, the auth tokens and interface design, here are several tutorials on various topics:
- How To Authenticate With JSON Web Tokens For Interactive Live Streams
- Creating A Live Broadcast Web and Mobile App With React & React Native
- How To Use No Code To Design The Interfaces Once The Widgets Are Embedded
If at any point you need to compile the library, you can perform what is known a rollup. If the packages are not installed, be sure to install the development packages.
npm install --save-dev rollup typescript
Afterwards in the root directory, run the following commands to perform a rollup, which will compile the code into the dist folder:
npm run build
And finally if you have access, you can deploy the code to npm.
npm publish --access public`