\

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 allow the user to select an audio and video source for their publisher.

Installation

``bash
npm i @vonage/inputs-select
`

Usage

$3

`html

`

$3


`html

`

$3

`html

`

$3

- audio-label : set the text for the audio inputs label. Default is "Audio Source:".
- video-label : set the text for the audio inputs label. Default is "Video Source:".
- button-text : set the text for the audio inputs label. Default is "Publish".

`html

`

$3

- inputsSelected : details contains audio and video device IDs that can be passed into the Web Component

example (event.details)
`json
{
audioSource: 'default',
videoSource: 'ab123c4d5ef6g789h0...',
}
`

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:

`html



Audio Source:

audio input 1
...


Video Source:

video input 1
...

Publish



`

Here is how to apply CSS to a part:
`css
inputs-select::part(button) {
font-size: 20px;
color: white;
background-color: black;
border-radius: 5px;
}
`

Getting it to work

1. Get a reference to the Web Component.
2. Generate a Session and Token.
3. Pass Session and Token into Web Component reference.

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

Linting and formatting

To scan the project for linting and formatting errors, run

`bash
npm run lint
`

To automatically fix linting and formatting errors, run

`bash
npm run format
`

Testing with Web Test Runner

To execute a single test run:

`bash
npm run test
`

To run the tests in interactive watch mode run:

`bash
npm run test:watch
`

Demoing with Storybook

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

`bash
npm run storybook
`

To build a production version of Storybook, run

`bash
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

`bash
npm start
`

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