hb-player-input-streaming — integrator guide

Category: media · Tags: media, video, camera · Package: @htmlbricks/hb-player-input-streaming

Summary

This web component captures the user’s camera and microphone using the browser MediaDevices.getUserMedia() API, assigns the resulting MediaStream to an in-shadow <video> element, and renders a small toolbar for playback, fullscreen, and toggling video/audio tracks.

Access is requested automatically when the component mounts (see implementation in component.wc.svelte). If permission is denied, the component dispatches an event with the failure outcome and throws internally after logging; there is no separate “request” button in the default UI.

Custom element tag

<hb-player-input-streaming …></hb-player-input-streaming>

Attributes (HTML / reflected props)

| Attribute | Role | |-----------|------| | id | Included in event detail (default empty string). | | style | Optional on Component; host style still affects layout in the light DOM. |

User interface

Inside the shadow root, the layout is roughly:

• A <video> element (with a captions <track> placeholder) showing the live preview once a stream is attached.
• A control row showing the current playback time (numeric) and buttons:
  • Play / pause — toggles HTMLMediaElement.play() / pause() on the preview video.
  • FH — calls requestFullscreen() on the video element.
  • remove / add video — enables or disables video MediaStreamTrack instances on the bound stream.
  • remove / add audio — same for audio tracks.

Labels use plain English strings (play, pause, FH, etc.) as in the source.

Events

| Event | detail | |-------|----------| | AudioVideoAccess | { granted: boolean; id: string } — after getUserMedia succeeds or fails. | | VideoInitialized | { videoElement: HTMLVideoElement; id: string } — after the stream is bound and play() is invoked on success. |

TypeScript typings (authoring)

From types/webcomponent.type.d.ts:

export type Component = { id?: string; style?: string };
export type Events = {
  AudioVideoAccess: { granted: boolean; id: string };
  VideoInitialized: { videoElement: HTMLVideoElement; id: string };
};

Requirements and limitations

• Secure context: getUserMedia is restricted to secure contexts (HTTPS or localhost).
• Permissions: The browser shows its own prompt for camera and microphone; the user can deny either or both.
• Privacy: Embedding this component implies you will request sensitive device access as soon as it loads; consider UX and legal copy (privacy policy, consent) on the host page.

Styling (Bulma)

The component forwards the shared Bulma web-component theme on :host. Consumer pages can override Bulma CSS variables from the light DOM. See Bulma CSS variables and extra/docs.ts for the curated list used in metadata:

| Variable | Role | |----------|------| | --bulma-text | Toolbar / text beside the preview. | | --bulma-link | Accent for interactive controls when Bulma tokens apply. | | --bulma-background | Surface behind the video area. | | --bulma-border | Optional separators if you extend layout around the shell. |

Host baseline (styles/webcomponent.scss) sets :host { display: block; } and a relative container for the player shell.

There are no documented ::part names or slots for this package (extra/docs.ts).

Minimal HTML

Minimal host with a stable id (useful for tests or logging):

<hb-player-input-streaming id="cam1"></hb-player-input-streaming>

Sized host (layout via host style):

<hb-player-input-streaming
  id="player-input-demo"
  style="display:block;width:100%;max-width:640px;"
></hb-player-input-streaming>

Listening for access and initialization in vanilla JS:

<hb-player-input-streaming id="preview"></hb-player-input-streaming>
<script>
  const el = document.querySelector("hb-player-input-streaming");
  el.addEventListener("AudioVideoAccess", (e) => {
    console.log("granted:", e.detail.granted, "id:", e.detail.id);
  });
  el.addEventListener("VideoInitialized", (e) => {
    console.log("video element:", e.detail.videoElement);
  });
</script>

License: Apache-2.0 per extra/docs.ts / published LICENSE.md.