Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies



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

Version published
Weekly downloads
increased by14.17%
Install size
2.79 MB
Weekly downloads




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.


npm i @vonage/video-subscriber


import from node modules

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

OR using a CDN

<script type="module" src=""></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


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=${} class="OTSubscriberContainer">

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", `${}`); = {width: "100%", height: "100%"};
  videoSubscriberEl.session = session; =;

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


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.


Related posts

SocketSocket SOC 2 Logo


  • 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