Fix CanvasMediaStream

core/src/CanvasMediaStream.ts

@@ -4,7 +4,11 @@ export class CanvasMediaStream {
 	#ctx: CanvasRenderingContext2D | null = null
 	#stream: MediaStream | null = null
 
-	begin(frameRequestRate = 60, size?: vec2) {
+	async begin(
+		initialDraw: () => PromiseLike<void>,
+		frameRequestRate = 60,
+		size?: vec2
+	) {
 		if (!this.#ctx) {
 			const canvas = document.createElement('canvas')
 			if (size) {
@@ -14,6 +18,8 @@ export class CanvasMediaStream {
 			this.#ctx = canvas.getContext('2d')!
 		}
 
+		await initialDraw()
+
 		this.#stream = this.#ctx.canvas.captureStream(frameRequestRate)
 		return this.#stream
 	}
@@ -36,6 +42,6 @@ export class CanvasMediaStream {
 	}
 
 	end() {
-		this.#stream?.stop()
+		this.#stream?.getTracks().forEach(track => track.stop())
 	}
 }

core/src/TethrPTPUSB/TethrPanasonic.ts

@@ -579,22 +579,24 @@ export class TethrPanasonic extends TethrPTPUSB {
 	#canvasMediaStream = new CanvasMediaStream()
 
 	async startLiveview(): Promise<OperationResult<MediaStream>> {
-		const stream = this.#canvasMediaStream.begin()
-
 		await this.device.sendCommand({
 			label: 'Panasonic Liveview',
 			opcode: OpCodePanasonic.Liveview,
 			parameters: [0x0d000010],
 		})
 
+		const stream = await this.#canvasMediaStream.begin(
+			this.#updateLiveviewFrame
+		)
+
 		this.emit('liveviewChange', readonlyConfigDesc(stream))
 
-		this.device.on('idle', this.#updateLiveview)
+		this.device.on('idle', this.#updateLiveviewFrame)
 
 		return {status: 'ok', value: stream}
 	}
 
-	#updateLiveview = async () => {
+	#updateLiveviewFrame = async () => {
 		const image = await this.#getLiveviewImage()
 		if (!image) return
 
@@ -610,7 +612,7 @@ export class TethrPanasonic extends TethrPTPUSB {
 			parameters: [0x0d000011],
 		})
 
-		this.device.off('idle', this.#updateLiveview)
+		this.device.off('idle', this.#updateLiveviewFrame)
 		this.emit('liveviewChange', readonlyConfigDesc(null))
 
 		return {status: 'ok'}

core/src/TethrPTPUSB/TethrSigma.ts

@@ -1258,7 +1258,9 @@ export class TethrSigma extends TethrPTPUSB {
 	#canvasMediaStream = new CanvasMediaStream()
 
 	async startLiveview(): Promise<OperationResult<MediaStream>> {
-		const stream = this.#canvasMediaStream.begin()
+		const stream = await this.#canvasMediaStream.begin(
+			this.#updateLiveviewFrame
+		)
 		this.device.on('idle', this.#updateLiveviewFrame)
 
 		this.emit('liveviewChange', readonlyConfigDesc(stream))