add abstract high level api

Author: lherman-cs

client-web/src/index.ts

@@ -6,10 +6,13 @@ import { ClientCore } from "./lib";
     maxDownstreams: 1,
   });
 
+  const videos: Record<string, HTMLVideoElement> = {};
   client.$state.listen((v) => console.log(v));
   client.$participants.listen((newValue, _, changed) => {
-    // assign this to a video element
-    console.log(changed);
+    const video = videos[changed] || document.createElement("video");
+    const participant = newValue[changed].get();
+    client.subscribe(video, participant);
+    videos[changed] = video;
   });
   await client.connect("default", `alice-${Math.round(Math.random() * 100)}`);
 

client-web/src/lib/core.ts

@@ -337,4 +337,10 @@ export class ClientCore {
     this.#videoSender.sender.replaceTrack(null);
     this.#audioSender.sender.replaceTrack(null);
   }
+
+  // TODO: remove browser specific
+  subscribe(video: HTMLVideoElement, participant: ParticipantMeta) {
+    video.srcObject = participant.stream;
+    video.autoplay = true;
+  }
 }