stream video js - Moses Yebei

The Problem

Developers need a turnkey way to embed real‑time video, audio rooms, and live‑streaming into web, React, and React‑Native apps while handling signaling, media negotiation, and device management. Building that stack from scratch requires deep WebRTC knowledge, cross‑platform glue code, and a reliable backend.

What This Does

The repo ships a family of SDKs that abstract those concerns:

packages/client supplies the low‑level JavaScript client (src/StreamVideoClient.ts, src/Call.ts) that talks to Stream’s SFU, manages peer connections, and exposes a typed API.
packages/react-bindings and packages/react-sdk wrap the client in React hooks (useCallStateHooks, useCall, useStreamVideoClient) and UI components (src/components/index.tsx).
packages/react-native-sdk mirrors the same hooks for React‑Native, plus native modules for audio‑device handling.

All SDKs share common utilities (packages/client/src/helpers/*) and a generated protobuf model (packages/client/src/gen/video/sfu/models/models.ts).

How It Is Wired

Execution begins in the React entry points:

packages/react-bindings/src/contexts/StreamCallContext.tsx creates StreamCallProvider. Inside it calls useCallStateHooks from packages/react-bindings/src/hooks/index.ts.
useCallStateHooks (the most‑called function – 29 distinct callers) pulls in useCall from StreamCallProvider and ultimately creates a Call instance via packages/client/src/Call.ts.
Call.ts imports the hub module packages/client/src/gen/video/sfu/models/models.ts (68 inbound imports) and wires up the WebRTC stack (rtc/Publisher.ts, rtc/Subscriber.ts).
Media tracks are created through createAudioStreamForDevice / createVideoStreamForDevice → createTrack (both called from two places).
Event flow runs through the internal call graph: useCallStateHooks → useCall → Call → rtc/Dispatcher.ts → rtc/Publisher.ts / rtc/Subscriber.ts.

The most central hub (models.ts) holds generated types used across 68 modules; any change there propagates widely. A notable import cycle links packages/client/src/store/index.ts, packages/client/src/Call.ts, and packages/react-sdk/src/components/index.ts, increasing the blast radius for refactors.

Outside the repo the only observed side‑effect is a single file read/write (packages/react-native-sdk/expo-config-plugin/fixtures/index.ts). No database or external service calls are present in the static analysis.

How To Use It

# Clone the repo
git clone https://github.com/moses-y/stream-video-js
cd stream-video-js

# Install dependencies (yarn is the declared package manager)
yarn install

# Build the packages (Nx workspace)
yarn nx run-many --target=build --all

# Run a sample app (e.g., React live‑stream)
cd sample-apps/react/livestream-app
yarn start   # uses Next.js / Vite as defined in package.json scripts

Configuration for the client lives in environment variables referenced in packages/client/.env-example (API key, secret, and user token). The sample apps read those values at runtime; replace the placeholder file with real credentials before starting.

Real‑World Use

A typical integration in a React app:

import { StreamVideoProvider, useCall } from '@stream-io/react-sdk';

function VideoRoom() {
  const { call } = useCall();               // pulls Call instance
  useEffect(() => call.join(), []);        // joins a room
  return <VideoComponent call={call} />;   // UI from react-sdk
}

The provider injects the client, the hook creates the Call object, and the UI component renders remote tracks supplied by the underlying rtc layer.

Code Health & Issues

Critical – Private key committed (sample-apps/react-native/dogfood/android/app/debug.keystore). Must rotate and purge from history.
High – GitHub Actions not pinned to commit SHA (.github/workflows/*). Replace @v3 tags with full SHAs.
Medium – GITHUB_TOKEN permissions undefined (.github/workflows/deploy-react-sample-apps.yml). Add least‑privilege scopes.
Medium – No automated dependency updater. Add dependabot.yml.
Medium – Docker base images unpinned (Dockerfile). Use digest tags.
Medium – No vulnerability scan in CI. Add dependency-review-action or osv-scanner.
Medium – Large binary assets (packages/video-filters-web/mediapipe/models/*.tflite) inflate repo size; move to Git LFS or external storage.
Medium – Checkout step retains push token (persist-credentials). Set persist-credentials: false.
Low – Workflow jobs lack timeout-minutes. Add reasonable limits.

Static analysis also flagged:

High/cognitive_load – Oversized files (Call.ts, models.ts, index.ts in coordinator) > 1 k lines; consider splitting by responsibility.
High/soundness – 41 modules involved in import cycles; break cycles by extracting shared types or inverting dependencies.
High/clarity – Hub module (models.ts) highly connected; keep stable, move volatile logic elsewhere.
Medium/cognitive_load – Functions with dense branching (src/utils/StreamVideoRN/types.ts, src/utils/push/libs/callingx.ts, src/rtc/helpers/sdp.ts); refactor to strategy tables.

The Bottom Line

The repo delivers a well‑structured, multi‑platform video SDK with comprehensive hooks and UI components, but the core client contains large, highly coupled modules and several import cycles that raise maintenance risk. Security hygiene needs immediate attention (private key, action pinning, token handling). Suitable for teams comfortable with TypeScript and willing to invest in refactoring the hub modules for long‑term stability.

What the analyser found

Deployment readiness

7/7

Container image
CI pipeline
Lockfile committed
Test suite
README
License
No committed secrets

Composition

1,998 files

TypeScript605
TSX549
SCSS191
JSON96
Swift72
Kotlin66

ReactNext.jsExpressRailsDockerTerraformTransformersONNX

Module dependencies

The 10 most depended-upon modules of 1,192, from static import analysis. Red outline marks a module in an import cycle.

graph LR n0__gen_video_sfu_models_models["models"] n1_kages_client_src_store_index["index"] n2_dk_src_contexts_ThemeContext["ThemeContext"] n3_nt_src_gen_coordinator_index["index"] n4_packages_client_src_Call["Call"] n5_act_sdk_src_components_index["index"] n6_packages_client_src_logger["logger"] n7_ative_sdk_src_contexts_index["index"] n8_packages_client_src_types["types"] n9_oordinator_connection_client["client"] n4_packages_client_src_Call --> n1_kages_client_src_store_index n4_packages_client_src_Call --> n6_packages_client_src_logger n4_packages_client_src_Call --> n3_nt_src_gen_coordinator_index n4_packages_client_src_Call --> n8_packages_client_src_types n4_packages_client_src_Call --> n0__gen_video_sfu_models_models n4_packages_client_src_Call --> n9_oordinator_connection_client n9_oordinator_connection_client --> n3_nt_src_gen_coordinator_index n9_oordinator_connection_client --> n6_packages_client_src_logger n8_packages_client_src_types --> n0__gen_video_sfu_models_models n8_packages_client_src_types --> n3_nt_src_gen_coordinator_index n8_packages_client_src_types --> n9_oordinator_connection_client n8_packages_client_src_types --> n1_kages_client_src_store_index n8_packages_client_src_types --> n4_packages_client_src_Call n7_ative_sdk_src_contexts_index --> n2_dk_src_contexts_ThemeContext classDef cyc stroke:#ef4444,stroke-width:2px; class n1_kages_client_src_store_index,n4_packages_client_src_Call,n5_act_sdk_src_components_index,n6_packages_client_src_logger,n8_packages_client_src_types,n9_oordinator_connection_client cyc;

What would stop me shipping this

Ranked by severity × confidence × production reach. Reach is the honest discriminator across a collection that is mostly other people's code: the same finding matters more in something that ships.

critical1

high1

medium7

low1

Rotate and purge the committed private keycritical

sample-apps/react-native/dogfood/android/app/debug.keystore

test fixture material: sample-apps/react-native/dogfood/android/app/debug.keystore

A published signing or TLS private key cannot be unpublished, and it lets anyone impersonate the service or decrypt captured traffic.

Fix: Reissue the key pair, then purge the blob from history; deleting it in a later commit is not enough.

Pin third-party GitHub Actions to a commit SHAhigh

.github/workflows

aslafy-z/conventional-pr-title-action@v3

A tag can be moved, so the action running with your token and secrets is whatever its owner last pushed; this is how tj-actions/changed-files leaked secrets from thousands of repos.

Fix: Replace each @vN with the 40-character commit SHA, keep # vN as a comment, and let Dependabot bump the SHAs.

Declare least-privilege permissions for GITHUB_TOKENmedium3 occurrences

.github/workflows/deploy-react-sample-apps.yml

3 workflow(s) declare no permissions, 3 of them reference secrets

With no declaration the token inherits the repository default, so any injected step can push commits or mint releases from inside your own CI.

Fix: Add permissions: contents: read at the top of the workflow and widen per job only where needed.

Enable Dependabot or Renovatemedium

27 manifest(s), no update bot configured

Without a bot a published advisory sits unpatched until someone audits by hand, which across 1,322 repositories means never.

Fix: Commit .github/dependabot.yml covering the repo ecosystems plus github-actions.

Pin the container base image by digestmedium2 occurrences

Dockerfile

node:22-alpine, node:22-bullseye

An untagged or mutable base means today's build and last month's contain different libc and a different CVE set, with no record of which shipped.

Fix: Use image:tag@sha256:<digest> and enable Dependabot's docker ecosystem.

Gate pull requests on a dependency vulnerability scanmedium

.github/workflows

no dependency scan in CI

This is the one gate that would catch a known-vulnerable package before it reaches a build, and no repository in the sample had it.

Fix: Add dependency-review-action on pull_request, or osv-scanner on push and a schedule.

Add a pre-commit secret gatemedium

a secret-shaped file is tracked and no repo-level gate is visible

Without a gate the same class of leak recurs on the next commit, so a leak finding is the symptom and this is the cause.

Fix: Add a pre-commit hook scanning staged content, and enable push protection.

Move large binaries to Git LFS or out of the repositorymedium11 occurrences

packages/video-filters-web/mediapipe/models/selfie_multiclass_256x256.tflite

11 blobs over 5MB: selfie_multiclass_256x256.tflite 15.6MB, vision_wasm_internal.wasm 9.1MB, vision_wasm_internal.wasm 9.1MB

One repository here carries twenty blobs over 5MB including a 10.9MB spreadsheet, so every clone and every CI checkout pays for data nobody diffs.

Fix: Track those extensions with LFS, or move datasets to object storage and fetch them in a setup step.

Set persist-credentials: false on checkoutmedium

.github/workflows/deploy-react-sample-apps.yml

checkout keeps the token, then dependencies are installed

The token stays in .git/config for every later step, so a malicious postinstall script reads a pushable credential without one ever being passed to it.

Fix: Add with: persist-credentials: false, and pass an explicit token only to the step that pushes.

Set timeout-minutes on the workflow jobslow

.github/workflows/pr-check.yml

1 workflow(s) declare no job timeout

A wedged step runs to the six-hour platform default, which on a two-hourly schedule means three runs overlap behind it.

Fix: Add timeout-minutes with a realistic bound to each job.

Checked deterministically against the repository tree and a bounded set of its files: committed credentials, unpinned actions and base images, missing lockfiles and update bots, workflows that discard failures, published advisories against the declared dependencies, runtime configuration, licensing and notebook reproducibility. No language model is involved in this section.