Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
bingewave-react-widgets
Advanced tools
BingeWave is a Live Media as a Service (LMAAS), which means video, audio and augmented reality solutions are provided with minimal to no coding required. The video, audio and AR interfaces are delivered through widgets, which are embeds that go directly i
BingeWave is a Live Media as a Service (LMAAS), which means video, audio and augmented reality solutions are provided with minimal to no coding required. The video, audio and AR interfaces are delivered through widgets, which are embeds that go directly inside a website or mobile app to create the interface for the user.
After the widget is implemented, the interface can be modified through a no-code builder. This library will cover how to implement those widgets into React. Please visit the React Native repo for a mobile implementation.
This library is designed for React projects. To install, on your command line run the following in your React root folder:
npm install bingewave-react-widgets --save
For each widget to function properly, an id of a live event is required. Every video, audio and AR session on BingeWave is considered a live event. To obtain an event ID, you must have registered for an organizer account here.
Once you have organizer you can either:
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. 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 "bingewave-react-widgets";
Afterwards, the live event id is placed into the widget, which will create the interface on-screen.
<VideoConferencing id={some_event_id} />
A more complete pseudo code example of the widget being used in conjuction with React API looks something similar to the below. You will have to have your auth token and organizer id to effectively use.
import { VideoConferencing } from "bingewave-react-widgets";
import { Events, Config } from "bingewave-react-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(<VideoConferencing id={response.data.id} />);
}
}).catch(error => {
console.log(error);
});
}
return (
<>
{widget}
</>
);
}
The broadcasting widget is used to take a video conferencing session between one or more users, and broadcast to a large group of watchers. These watchers will not be able to be part in the video conferencing but can watch the live experience.
To implement the widget, first it must be imported:
import { Broadcasting } from "bingewave-react-widgets";
Afterwards, the live event id is placed into the widget, which will create the interface on-screen.
<Broadcasting id={some_event_id} />
A more complete pseudo code example of the widget in use with React API looks something similar to the below. You will have to have your auth token and organizer id to effectively use.
import { Broadcasting } from "bingewave-react-widgets";
import { Events, Config } from "bingewave-react-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(<Broadcasting id={response.data.id} />);
}
}).catch(error => {
console.log(error);
});
}
return (
<>
{widget}
</>
);
}
The live streaming widget is used to a show live stream of a live event. Live events such as conferences, concerts, sporting events and other types can be an input from an RTMP Stream from various sources such as camera feeds, computer, and even other streaming services. Live events can also showcase pre-recorded video content like a movie or a class.
To implement the widget, first it must be imported:
import { Livestreaming } from "bingewave-react-widgets";
Afterwards, the live event id is placed into the widget, which will create the interface on-screen.
<Livestreaming id={some_event_id} />
A more complete pseudo code example of the widget in use withReact API looks something similar to the below. You will have to have your auth token and organizer id to effectively use.
import { Livestreaming } from "bingewave-react-widgets";
import { Events, Config } from "bingewave-react-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(<Livestreaming id={response.data.id} />);
}
}).catch(error => {
console.log(error);
});
}
return (
<>
{widget}
</>
);
}
To better understand the use of various widgets in different circumstances, the auth tokens and interface design, here are several tutorials on various topics:
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
FAQs
BingeWave is a Live Media as a Service (LMAAS), which means video, audio and augmented reality solutions are provided with minimal to no coding required. The video, audio and AR interfaces are delivered through widgets, which are embeds that go directly i
We found that bingewave-react-widgets demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.