@hiyve/angular

Angular SDK for Hiyve -- provider services with RxJS Observables, video tile and grid components, and a media control bar.

Installation

npx @hiyve/cli login
npm install @hiyve/angular
Copy

Peer Dependencies

npm install @hiyve/core @hiyve/rtc-client @hiyve/utilities @angular/material @angular/cdk rxjs
Copy

Quick Start

Register Hiyve services in your application config:

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHiyve } from '@hiyve/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHiyve({
      generateRoomToken: async () => {
        const res = await fetch('/api/generate-room-token', { method: 'POST' });
        return (await res.json()).roomToken;
      },
    }),
  ],
};
Copy

Use components and services in your room component:

import { Component, inject } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import {
  ConnectionService,
  RoomService,
  LocalMediaService,
  VideoGridComponent,
  ControlBarComponent,
} from '@hiyve/angular';

@Component({
  selector: 'app-video-room',
  standalone: true,
  imports: [AsyncPipe, VideoGridComponent, ControlBarComponent],
  template: `
    @if ((room.isInRoom$ | async)) {
      <hiyve-video-grid
        [localUserName]="'Me'"
        [layout]="'grid'"
        [showNames]="true"
      />
      <hiyve-control-bar
        [showAudioToggle]="true"
        [showVideoToggle]="true"
        [showScreenShare]="true"
        [showSettings]="true"
        [showLeaveButton]="true"
        (leave)="onLeave()"
      />
    } @else {
      <button (click)="joinRoom()">Join Room</button>
    }
  `,
})
export class VideoRoomComponent {
  private connection = inject(ConnectionService);
  room = inject(RoomService);
  private localMedia = inject(LocalMediaService);

  async joinRoom() {
    await this.connection.joinRoom('my-room', 'user-123');
  }

  onLeave() {
    this.connection.leaveRoom();
  }
}
Copy

Provider

provideHiyve(config)

Registers all Hiyve services for dependency injection. Call in your application config or root module. Makes the HIYVE_CONFIG injection token available for direct injection in your components:

import { inject } from '@angular/core';
import { HIYVE_CONFIG } from '@hiyve/angular';

const config = inject(HIYVE_CONFIG);
Copy

Services

HiyveService

Core service providing all state Observables and action methods directly.

Domain Services

Focused services for specific feature areas. Inject only what you need.

Components

Sub-components (Control Bar)

Directives and Pipes

MediaStreamDirective

<video [hiyveMediaStream]="participant.videoStream" autoplay></video>
<audio [hiyveMediaStream]="participant.audioStream" autoplay></audio>
Copy

HiyveDurationPipe

<span>{{ recordingDuration | hiyveDuration }}</span>
<!-- Output: "05:32" or "01:15:42" -->
Copy

VideoGrid Inputs

ControlBar Inputs

Customization

All components accept partial label, color, and style objects. Unspecified values use built-in defaults.

Labels (i18n)

<hiyve-control-bar
  [labels]="{
    mute: 'Couper le micro',
    unmute: 'Activer le micro',
    leave: 'Quitter',
    shareScreen: 'Partager l\'ecran'
  }"
/>
Copy

Colors

<hiyve-video-grid
  [colors]="{ background: '#0a0a1a', dominantBorder: '#00ff88' }"
  [tileColors]="{ background: '#111133', dominantBorder: '#00ff88' }"
/>
Copy

Styles

<hiyve-control-bar
  [styles]="{
    gap: '12px',
    padding: '12px 24px',
    borderRadius: '16px',
    buttonSize: 'large'
  }"
/>
Copy

Using Default Objects

Import defaults to see all available customization keys:

import {
  DEFAULT_CONTROL_BAR_LABELS,
  DEFAULT_CONTROL_BAR_COLORS,
  DEFAULT_CONTROL_BAR_STYLES,
  DEFAULT_VIDEO_TILE_LABELS,
  DEFAULT_VIDEO_TILE_COLORS,
  DEFAULT_VIDEO_TILE_STYLES,
  DEFAULT_VIDEO_GRID_COLORS,
  DEFAULT_VIDEO_GRID_STYLES,
  DEFAULT_LAYOUTS,
} from '@hiyve/angular';
Copy

DEFAULT_LAYOUTS provides the built-in layout definitions used by the layout selector:

// [{ id: 'grid', label: 'Grid', icon: 'grid_view' },
//  { id: 'speaker', label: 'Speaker', icon: 'person' },
//  { id: 'sidebar', label: 'Sidebar', icon: 'view_sidebar' }]
Copy

Custom Layouts

Provide a custom layout handler to compute tile positions:

import type { CustomLayoutHandler, CustomLayoutInfo, TilePosition } from '@hiyve/angular';

const myLayout: CustomLayoutHandler = (info: CustomLayoutInfo): Record<string, TilePosition> => {
  const positions: Record<string, TilePosition> = {};
  info.participants.forEach((p, i) => {
    positions[p.userId] = {
      x: (i % 3) * (info.availableWidth / 3),
      y: Math.floor(i / 3) * (info.availableHeight / 2),
      width: info.availableWidth / 3,
      height: info.availableHeight / 2,
    };
  });
  return positions;
};
Copy

<hiyve-video-grid [layout]="'custom'" [customLayoutHandler]="myLayout" />
Copy

Layout Utilities

Helper functions for computing grid and layout positioning.

Types

Features

• RxJS Observables for all state (connection, room, participants, media, recording, chat, etc.)
• 16 injectable domain services for focused feature access
• Standalone components compatible with Angular 17--20
• Grid, speaker, and sidebar video layouts with custom layout support
• Participant name labels, mute indicators, dominant speaker highlighting, hand raise badges
• Recording timer, mood and engagement overlays
• Device selection menus for camera, microphone, and speaker
• Full i18n support through label overrides
• Color and style theming for all visual elements
• OnPush change detection for optimal performance

Requirements

• Angular 17, 18, 19, or 20
• @angular/material and @angular/cdk
• @hiyve/core and @hiyve/rtc-client as peer dependencies
• @hiyve/utilities as a peer dependency
• RxJS 7+

License

Proprietary - Hiyve SDK