@strevokit/meeting-sdk 0.0.0-stage → 0.8.0

package/docs/examples/vanilla.html

@@ -0,0 +1,101 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Meeting example</title>
+  </head>
+  <body>
+    <p id="status">Not joined</p>
+    <video id="preview" autoplay muted playsinline width="320"></video>
+    <div>
+      <button id="camera" disabled>Camera</button>
+      <button id="microphone" disabled>Microphone</button>
+      <button id="screen" disabled>Share screen</button>
+      <button id="leave" disabled>Leave</button>
+    </div>
+    <ul id="participants"></ul>
+    <div id="remote"></div>
+
+    <script type="module">
+      // With a bundler, import from "@strevokit/meeting-sdk" instead.
+      import { createMeetingEngine, MeetingError } from "./node_modules/@strevokit/meeting-sdk/dist/index.js";
+
+      // Ask your backend for a join token (see backend-integration.md and ../backend-api.md).
+      const { token } = await fetch("/my-backend/join-token", { method: "POST" }).then((r) => r.json());
+
+      const engine = createMeetingEngine({ token, realtimeUrl: "wss://realtime.example.com" });
+      const $ = (id) => document.getElementById(id);
+      const buttons = ["camera", "microphone", "screen", "leave"].map($);
+
+      function renderParticipants() {
+        $("participants").replaceChildren(
+          ...engine.participants.map((p) => {
+            const item = document.createElement("li");
+            const on = Object.entries(p.media).filter(([, enabled]) => enabled).map(([kind]) => kind);
+            item.textContent = `${p.displayName ?? p.id} (${p.role})${on.length ? ` - ${on.join(", ")}` : ""}`;
+            return item;
+          }),
+        );
+      }
+
+      engine.on("state_changed", ({ state }) => {
+        $("status").textContent = state;
+        for (const button of buttons) button.disabled = state !== "joined";
+      });
+      for (const type of ["joined", "participant_joined", "participant_left", "participant_media_changed"]) {
+        engine.on(type, renderParticipants);
+      }
+      engine.on("local_media_changed", ({ kind, enabled }) => {
+        if (kind === "camera") $("preview").srcObject = engine.localMedia.camera;
+        $(kind).setAttribute("aria-pressed", String(enabled));
+      });
+      // One <figure> per remote participant, holding a <video> for their camera and an <audio> for their microphone.
+      function remoteTile(participantId) {
+        let tile = document.querySelector(`[data-participant="${participantId}"]`);
+        if (!tile) {
+          tile = document.createElement("figure");
+          tile.dataset.participant = participantId;
+          const video = Object.assign(document.createElement("video"), { autoplay: true, playsInline: true, muted: true, width: 320 });
+          const audio = Object.assign(document.createElement("audio"), { autoplay: true });
+          const caption = document.createElement("figcaption");
+          tile.append(video, audio, caption);
+          $("remote").append(tile);
+        }
+        return tile;
+      }
+      engine.on("remote_media_changed", ({ participantId, kind, stream }) => {
+        const tile = remoteTile(participantId);
+        if (kind === "camera") tile.querySelector("video").srcObject = stream;
+        if (kind === "microphone") tile.querySelector("audio").srcObject = stream;
+      });
+      engine.on("media_connection_changed", ({ participantId, status }) => {
+        remoteTile(participantId).querySelector("figcaption").textContent =
+          status === "interrupted" ? "Connection lost — reconnecting…" : (status ?? "");
+      });
+      engine.on("participant_left", ({ participantId }) => {
+        document.querySelector(`[data-participant="${participantId}"]`)?.remove();
+      });
+      engine.on("error", ({ error }) => alert(error.message));
+      engine.on("closed", ({ reason, error }) => {
+        $("status").textContent = error ? `Closed: ${error.message}` : `Closed (${reason})`;
+      });
+
+      async function run(action) {
+        try {
+          await action();
+        } catch (error) {
+          if (error instanceof MeetingError) alert(error.message);
+          else throw error;
+        }
+      }
+
+      $("camera").onclick = () => run(() => (engine.localMediaState.camera ? engine.disableCamera() : engine.enableCamera()));
+      $("microphone").onclick = () => run(() => (engine.localMediaState.microphone ? engine.mute() : engine.unmute()));
+      $("screen").onclick = () => run(() => (engine.localMediaState.screen ? engine.stopScreenShare() : engine.startScreenShare()));
+      $("leave").onclick = () => engine.leave();
+      window.addEventListener("pagehide", () => engine.dispose());
+
+      await run(() => engine.join());
+    </script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@strevokit/meeting-sdk",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.8.0",
+  "description": "Embed Strevokit meetings in your web product.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AgiliaIT/strevokit-meeting-sdk.git",
+    "directory": "packages/meeting-sdk"
+  },
+  "homepage": "https://github.com/AgiliaIT/strevokit-meeting-sdk/tree/main/packages/meeting-sdk#readme",
+  "bugs": {
+    "url": "https://github.com/AgiliaIT/strevokit-meeting-sdk/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=22.12"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/index.js",
+    "dist/index.js.map",
+    "dist/index.d.ts",
+    "README.md",
+    "CHANGELOG.md",
+    "docs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "protocol:build": "npm --prefix ../signaling-protocol ci && npm --prefix ../signaling-protocol run build",
+    "build": "node scripts/build.mjs",
+    "typecheck": "tsc -p tsconfig.test.json",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "api:check": "api-extractor run",
+    "api:update": "node scripts/build.mjs --update-api",
+    "check:surface": "node scripts/check-surface.mjs",
+    "check:docs": "node scripts/check-docs.mjs",
+    "check:size": "node scripts/check-size.mjs",
+    "check:release": "node scripts/check-release.mjs",
+    "pack:smoke": "node scripts/pack-smoke.mjs",
+    "check:publish-hygiene": "node scripts/check-publish-hygiene.mjs"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.59.0",
+    "@strevokit/signaling-protocol": "file:../signaling-protocol",
+    "@types/node": "^22.10.0",
+    "esbuild": "^0.28.0",
+    "eslint": "^10.11.0",
+    "typescript": "^5.7.0",
+    "typescript-eslint": "^8.71.0",
+    "vitest": "^5.0.0"
+  }
+}