npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bingewave-react-widgets

v0.2.8

Published

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

Downloads

41

Readme

BingeWave React Widget Library

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.

Installation

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

How To Implement The Widgets

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:

  1. Read the documentation to create a live event and return the id
  2. Use one the libraries like the React API 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.

Video Conferencing Widget

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}
		</>
	);
}

Broadcasting 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}
		</>
	);
}

Live Streaming 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}
		</>
	);
}

Tutorials

To better understand the use of various widgets in different circumstances, the auth tokens and interface design, here are several tutorials on various topics:

Building The Library

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