Support arbitrary* media sources, and improve default device selection

js/hang-demo/src/publish.html

@@ -22,7 +22,7 @@
 		Feel free to hard-code it if you have public access configured, like `url="https://relay.moq.dev/anon"`
 		NOTE: `http` performs an insecure certificate check. You must use `https` in production.
 	-->
-	<hang-publish url="%VITE_RELAY_URL%" name="me" audio video controls captions>
+	<hang-publish url="%VITE_RELAY_URL%" name="me" controls captions>
 		<!-- It's optional to provide a video element to preview the outgoing media. -->
 		<video style="max-width: 100%; height: auto; border-radius: 4px; margin: 0 auto;" muted autoplay></video>
 	</hang-publish>
@@ -69,10 +69,10 @@ <h3>Tips:</h3>
 	<p>
 		You can create a broadcaster via the provided <code class="language-html">&lt;hang-publish&gt;</code> <a
 			href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">Web Component</a>.
-		Either modify HTML attributes like <code class="language-html">&lt;hang-publish device="camera" /&gt;</code>
+		Either modify HTML attributes like <code class="language-html">&lt;hang-publish source="camera" audio /&gt;</code>
 		or access the element's Javascript API:
 	<pre><code class="language-typescript">const publish = document.getElementById("publish");
-publish.lib.device = "camera";</code></pre>
+publish.broadcast.audio.enabled.set(true);</code></pre>
 
 	And of course you can use the Javascript API directly instead of the Web Component.
 	It's a bit more complicated and subject to change, but it gives you more control.

js/hang/src/connection.ts

@@ -3,7 +3,7 @@ import { Effect, Signal } from "@kixelated/signals";
 
 export type ConnectionProps = {
 	// The URL of the relay server.
-	url?: URL;
+	url?: URL | Signal<URL | undefined>;
 
 	// Reload the connection when it disconnects.
 	// default: true
@@ -36,7 +36,7 @@ export class Connection {
 	#tick = new Signal(0);
 
 	constructor(props?: ConnectionProps) {
-		this.url = new Signal(props?.url);
+		this.url = Signal.from(props?.url);
 		this.reload = props?.reload ?? true;
 		this.delay = props?.delay ?? 1000;
 		this.maxDelay = props?.maxDelay ?? 30000;

js/hang/src/meet/element.ts

@@ -109,7 +109,7 @@ export default class HangMeet extends HTMLElement {
 			autoplay: true,
 		});
 
-		const cleanup = broadcast.video.media.subscribe((media) => {
+		const cleanup = broadcast.video.source.subscribe((media) => {
 			video.srcObject = media ? new MediaStream([media]) : null;
 		});
 

js/hang/src/meet/room.ts

@@ -5,7 +5,7 @@ import { type Connection, Moq, type Publish, Watch } from "..";
 export type Broadcast = Watch.Broadcast | Publish.Broadcast;
 
 export type RoomProps = {
-	name?: Path.Valid;
+	name?: Path.Valid | Signal<Path.Valid>;
 };
 
 export class Room {
@@ -36,7 +36,7 @@ export class Room {
 
 	constructor(connection: Connection, props?: RoomProps) {
 		this.connection = connection;
-		this.name = new Signal(props?.name ?? Moq.Path.empty());
+		this.name = Signal.from(props?.name ?? Moq.Path.empty());
 
 		this.#signals.effect(this.#init.bind(this));
 	}

js/hang/src/preview/member.ts

@@ -4,7 +4,7 @@ import { Effect, Signal } from "@kixelated/signals";
 import * as Preview from "./info";
 
 export type MemberProps = {
-	enabled?: boolean;
+	enabled?: boolean | Signal<boolean>;
 };
 
 export class Member {
@@ -16,7 +16,7 @@ export class Member {
 
 	constructor(broadcast: Moq.BroadcastConsumer, props?: MemberProps) {
 		this.broadcast = broadcast;
-		this.enabled = new Signal(props?.enabled ?? false);
+		this.enabled = Signal.from(props?.enabled ?? false);
 		this.info = new Signal<Preview.Info | undefined>(undefined);
 
 		this.signals.effect((effect) => {

js/hang/src/preview/room.ts

@@ -5,8 +5,8 @@ import type { Connection } from "../connection";
 import { Member } from "./member";
 
 export type RoomProps = {
-	name?: Path.Valid;
-	enabled?: boolean;
+	name?: Path.Valid | Signal<Path.Valid | undefined>;
+	enabled?: boolean | Signal<boolean>;
 };
 
 export class Room {
@@ -21,8 +21,8 @@ export class Room {
 
 	constructor(connection: Connection, props?: RoomProps) {
 		this.connection = connection;
-		this.name = new Signal(props?.name);
-		this.enabled = new Signal(props?.enabled ?? false);
+		this.name = Signal.from(props?.name);
+		this.enabled = Signal.from(props?.enabled ?? false);
 
 		this.#signals.effect(this.#init.bind(this));
 	}

js/hang/src/publish/audio/captions.ts

@@ -7,7 +7,7 @@ import type { Request, Result } from "./captions-worker";
 import CaptureWorklet from "./capture-worklet?worker&url";
 
 export type CaptionsProps = {
-	enabled?: boolean;
+	enabled?: boolean | Signal<boolean>;
 	transcribe?: boolean;
 
 	// Captions are cleared after this many milliseconds. (10s default)
@@ -26,21 +26,23 @@ export class Captions {
 	signals = new Effect();
 
 	#ttl: DOMHighResTimeStamp;
+
 	#track = new Moq.TrackProducer("captions.txt", 1);
 
 	constructor(audio: Audio, props?: CaptionsProps) {
 		this.audio = audio;
 		this.#ttl = props?.ttl ?? 10000;
-		this.enabled = new Signal(props?.enabled ?? false);
+		this.enabled = Signal.from(props?.enabled ?? false);
 
 		this.signals.effect(this.#run.bind(this));
 	}
 
 	#run(effect: Effect): void {
-		if (!effect.get(this.enabled)) return;
+		const enabled = effect.get(this.enabled);
+		if (!enabled) return;
 
-		const media = effect.get(this.audio.media);
-		if (!media) return;
+		const source = effect.get(this.audio.source);
+		if (!source) return;
 
 		this.audio.broadcast.insertTrack(this.#track.consume());
 		effect.cleanup(() => this.audio.broadcast.removeTrack(this.#track.name));
@@ -76,6 +78,7 @@ export class Captions {
 		};
 
 		effect.cleanup(() => {
+			worker.onmessage = null;
 			this.text.set(undefined);
 		});
 
@@ -87,7 +90,7 @@ export class Captions {
 
 		// Create the source node.
 		const root = new MediaStreamAudioSourceNode(ctx, {
-			mediaStream: new MediaStream([media]),
+			mediaStream: new MediaStream([source]),
 		});
 		effect.cleanup(() => root.disconnect());