Socket
Socket
Sign inDemoInstall

@vonage/video-subscriber

Package Overview
Dependencies
6
Maintainers
52
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @vonage/video-subscriber

video-subscriber Web Component to be used with Video API following open-wc recommendations


Version published
Weekly downloads
290
increased by14.17%
Maintainers
52
Install size
2.79 MB
Created
Weekly downloads
 

Readme

Source

<video-subscriber>

This Web Component follows the open-wc recommendation and is meant to be used with the Vonage Video Client SDK.

A Vonage account will be needed.

A goal is to simplify the code needed to create a real-time, high-quality interactive video application quickly. This Web Component will display an individual participant's feed to allow the developer more control over how and where the Web Component will be added. For example, make a screen share stream larger and on top of particpants' video streams.

Installation

npm i @vonage/video-subscriber

Usage

import from node modules

<script type="module">
  import '@vonage/video-subscriber/video-subscriber.js';
</script>

OR using a CDN

<script type="module" src="https://unpkg.com/@vonage/video-subscriber@latest/video-subscriber.js?module"></script>

Attributes that can be used (optional):

  • properties : (Object) the properties used to initialize the subscriber. Find the full list in the documentation.

Methods that can be called

  • subscribeToAudio(state) : toggle subscribing to audio. State is a boolean.
  • subscribeToVideo(state) : toggle subscribing to video. State is a boolean.

Custom Events to listen for

  • error : contains details if there was an error subscribing to the stream
  • subscribed : contains details of subscriber if successful Subscriber Object
  • unsubscribed : contains details of subscriber unsubscribed Subscriber Object

Styling

The Web Component uses the CSS pseudo-element ::part for styling. So you can style it the same way you would style a regular button element. Here's an example:

This is the HTML structure of the Web Component:

<div part="container" id=${this.stream.streamId} class="OTSubscriberContainer">
  <slot></slot>
</div>

Here is how to apply CSS to a part:

video-subscriber::part(container) {
  aspect-ratio: 16 / 9;
}

Getting it to work

  1. Listen for streamCreated event on the Session Object
  2. Create a Element
  3. Set Session and Stream properties on the Web Component
  4. Append the element to a container

an example using Vanilla JS

const videoSubscriberContainer = document.querySelector("#video-subscriber-container");
session.on("streamCreated", function(event) {
  const videoSubscriberEl = document.createElement("video-subscriber");
  videoSubscriberEl.setAttribute("id", `${event.stream.streamId}`);
  videoSubscriberEl.properties = {width: "100%", height: "100%"};
  videoSubscriberEl.session = session;
  videoSubscriberEl.stream = event.stream;
  videoSubscriberContainer.appendChild(videoSubscriberEl);
});

Note: This can vary with library / framework (see examples folder)

Linting and formatting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

Testing with Web Test Runner

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

Demoing with Storybook

To run a local instance of Storybook for your component, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build

Tooling configs

For most of the tools, the configuration is in the package.json to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html

FAQs

Last updated on 25 Jan 2024

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc