@needle-tools/engine 3.0.1-alpha.4 → 3.0.1-alpha.5

package/src/engine-components/ScreenCapture.ts

@@ -1,6 +1,6 @@
 import { Behaviour, GameObject } from "./Component";
 import { VideoPlayer } from "./VideoPlayer";
-import Peer from "peerjs"
+import Peer, { MediaConnection } from "peerjs"
 import { Context } from "../engine/engine_setup";
 import { RoomEvents } from "../engine/engine_networking";
 import { UserJoinedOrLeftRoomModel } from "../engine/engine_networking";
@@ -10,8 +10,9 @@ import { EventDispatcher } from "three";
 import { AudioSource } from "./AudioSource";
 import { getParam } from "../engine/engine_utils";
 import { IModel } from "../engine/engine_networking_types";
+import { showBalloonWarning } from "../engine/debug";
 
-const debug = getParam("debugscreenshare");
+const debug = getParam("debugscreensharing");
 
 export enum ScreenCaptureDevice {
     Screen = 0,
@@ -42,10 +43,11 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
     onPointerClick(evt : PointerEventData) {
         if(evt && evt.pointerId !== 0) return;
         if(this.context.connection.isInRoom === false) return;
-        if (this.isReceiving) {
+        if (this.isReceiving && this.videoPlayer?.isPlaying) {
             if (this.videoPlayer)
                 this.videoPlayer.screenspace = !this.videoPlayer.screenspace;
             return;
+
         }
         if (this.isSending) {
             this.close();
@@ -91,7 +93,7 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
 
     awake() {
         if (debug)
-            console.log(this);
+            console.log("Screensharing", this.name, this);
         AudioSource.registerWaitForAllowAudio(() => {
             if (this.videoPlayer && this._currentStream && this._currentMode === ScreenCaptureMode.Receiving) {
                 this.videoPlayer.setVideo(this._currentStream);
@@ -99,6 +101,11 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
         });
     }
 
+
+    onDisable(): void {
+        this.close();
+    }
+
     start() {
         if (!this.videoPlayer) {
             this.videoPlayer = GameObject.getComponent(this.gameObject, VideoPlayer) ?? undefined;
@@ -131,6 +138,20 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
                     video: settings,
                     audio: settings,
                 };
+                const videoOptions = displayMediaOptions.video;
+                if (videoOptions !== undefined && typeof videoOptions !== "boolean") {
+                    // Set default video settings
+                    if (!videoOptions.width)
+                        videoOptions.width = { max: 1920 };
+                    if (!videoOptions.height)
+                        videoOptions.height = { max: 1920 };
+                    if (!videoOptions.aspectRatio)
+                        videoOptions.aspectRatio = { ideal: 1.7777777778 };
+                    if (!videoOptions.frameRate)
+                        videoOptions.frameRate = { ideal: 24 };
+                    if (!videoOptions.facingMode)
+                        videoOptions.facingMode = { ideal: "user" };
+                }
 
                 switch (this.device) {
                     // Capture a connected camera
@@ -176,7 +197,8 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
     close() {
         this._requestOpen = false;
         if (this._currentStream) {
-            console.warn("Close current stream / disposing resources");
+            if (debug)
+                console.warn("Close current stream / disposing resources, stream was active?", this._currentStream.active);
             this._net?.stopSendingVideo(this._currentStream);
             disposeStream(this._currentStream);
             this._currentMode = ScreenCaptureMode.Idle;
@@ -196,15 +218,32 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
         const isSending = mode === ScreenCaptureMode.Sending;
         if (isSending) {
             this._net?.startSendingVideo(stream);
+        }
 
+        // Mute audio for the video we are sending
+        if (mode === ScreenCaptureMode.Sending)
+            this.videoPlayer.muted = true;
+
+        for (const track of stream.getTracks()) {
+            track.addEventListener("ended", () => {
+                if (debug) console.log("Track ended", track);
+                this.close();
+            });
+
+            if (debug) {
+                if (track.kind === "video") {
+                    if (isSending)
+                        console.log("Video →", track.getSettings());
+                    else
+                        console.log("Video ←", track.getSettings());
+                }
+            }
         }
 
-        stream.addEventListener("ended", () => {
-            this.close();
-        });
     }
 
     private onReceiveVideo(evt: ReceiveVideoEvent) {
+        if (evt.stream?.active !== true) return;
         this.setVideo(evt.stream, ScreenCaptureMode.Receiving);
     }
 
@@ -219,7 +258,8 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
 
         // TODO: allow user to select device
         const devices = (await navigator.mediaDevices.enumerateDevices()).filter(d => d.kind === "videoinput");
-        console.log("Request camera", devices);
+        if (debug)
+            console.log("Request camera", devices);
         for (const dev of devices) {
             try {
                 if (!this._requestOpen) break;
@@ -240,11 +280,20 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
                     this.setVideo(userMedia, ScreenCaptureMode.Sending);
                 }
                 else disposeStream(userMedia);
-                console.log("Selected camera", dev);
+                if (debug)
+                    console.log("Selected camera", dev);
                 break;
             }
-            catch (err) {
-                console.warn(err);
+            catch (err: any) {
+                // First message is firefox, second is chrome when the video source is already in use by another app
+                if (err.message === "Failed to allocate videosource" || err.message === "Could not start video source") {
+                    showBalloonWarning("Failed to start video: Try another camera (Code " + err.code + ")");
+                    console.warn(err);
+                    continue;
+                }
+                else {
+                    console.error("Failed to get user media", err.message, err.code, err);
+                }
             }
         }
     }
@@ -261,6 +310,7 @@ enum PeerEvent {
     Connected = "peer-user-connected",
     ReceiveVideo = "receive-video",
     Disconnected = "peer-user-disconnected",
+    UserJoined = "user-joined",
 }
 
 class ReceiveVideoEvent {
@@ -293,7 +343,7 @@ enum CallDirection {
 class CallHandle extends EventDispatcher {
     readonly userId: string;
     readonly direction: CallDirection;
-    readonly call: Peer.MediaConnection;
+    readonly call: MediaConnection;
     get stream() { return this._stream; };
 
     private _stream: MediaStream | null = null;
@@ -314,14 +364,15 @@ class CallHandle extends EventDispatcher {
         return !this.isOpen;
     }
 
-    constructor(userId: string, call: Peer.MediaConnection, direction: CallDirection) {
+    constructor(userId: string, call: MediaConnection, direction: CallDirection) {
         super();
         this.userId = userId;
         this.call = call;
         this.direction = direction;
         this._stream = null;
         call.on("stream", stream => {
-            console.log("Receive video", stream.getAudioTracks(), stream.getVideoTracks());
+            if (debug)
+                console.log("Receive video", stream.getAudioTracks(), stream.getVideoTracks());
             this._stream = stream;
             if (direction === CallDirection.Incoming) {
                 const args: ReceiveVideoEvent = new ReceiveVideoEvent(stream, this);
@@ -392,7 +443,7 @@ class PeerHandle extends EventDispatcher {
     private _enabled: boolean = false;
     private _enabledPeer: boolean = false;
     private onConnectRoomFn: Function = this.onConnectRoom.bind(this);
-    private onUserJoinedOrLeftRoomFn: Function = this.onUserJoinedOrLeftRoom.bind(this);
+    // private onUserJoinedOrLeftRoomFn: Function = this.onUserJoinedOrLeftRoom.bind(this);
     private onPeerConnectFn: (id) => void = this.onPeerConnect.bind(this);
     private onPeerReceiveCallFn: (call) => void = this.onPeerReceivingCall.bind(this);
     // private _connectionPeerIdMap : Map<string, string> = new Map();
@@ -401,8 +452,8 @@ class PeerHandle extends EventDispatcher {
         if (this._enabled) return;
         this._enabled = true;
         this.context.connection.beginListen(RoomEvents.JoinedRoom, this.onConnectRoomFn);
-        this.context.connection.beginListen(RoomEvents.UserJoinedRoom, this.onUserJoinedOrLeftRoomFn);
-        this.context.connection.beginListen(RoomEvents.UserLeftRoom, this.onUserJoinedOrLeftRoomFn);
+        // this.context.connection.beginListen(RoomEvents.UserJoinedRoom, this.onUserJoinedOrLeftRoomFn);
+        // this.context.connection.beginListen(RoomEvents.UserLeftRoom, this.onUserJoinedOrLeftRoomFn);
         this.subscribePeerEvents();
     }
 
@@ -410,8 +461,8 @@ class PeerHandle extends EventDispatcher {
         if (!this._enabled) return;
         this._enabled = false;
         this.context.connection.stopListen(RoomEvents.JoinedRoom, this.onConnectRoomFn);
-        this.context.connection.stopListen(RoomEvents.UserJoinedRoom, this.onUserJoinedOrLeftRoomFn);
-        this.context.connection.stopListen(RoomEvents.UserLeftRoom, this.onUserJoinedOrLeftRoomFn);
+        // this.context.connection.stopListen(RoomEvents.UserJoinedRoom, this.onUserJoinedOrLeftRoomFn);
+        // this.context.connection.stopListen(RoomEvents.UserLeftRoom, this.onUserJoinedOrLeftRoomFn);
         this.unsubscribePeerEvents();
     }
 
@@ -419,8 +470,8 @@ class PeerHandle extends EventDispatcher {
         this.setupPeer();
     };
 
-    private onUserJoinedOrLeftRoom(_: UserJoinedOrLeftRoomModel): void {
-    };
+    // private onUserJoinedOrLeftRoom(_: UserJoinedOrLeftRoomModel): void {
+    // };
 
     private setupPeer() {
         if (!this.context.connection.connectionId) return;
@@ -428,7 +479,9 @@ class PeerHandle extends EventDispatcher {
         this._enabledPeer = true;
         if (!this._peer) {
             const peerId = this.getMyPeerId();
-            this._peer = new Peer(peerId);
+            if(peerId)
+                this._peer = new Peer(peerId);
+            else console.error("Failed to setup peerjs because we dont have a connection id", this.context.connection.connectionId);
         }
         if (this._enabled)
             this.subscribePeerEvents();
@@ -439,10 +492,14 @@ class PeerHandle extends EventDispatcher {
         this._peer.on("open", this.onPeerConnectFn);
         this._peer.on("call", this.onPeerReceiveCallFn);
         // this.context.connection.beginListen(PeerEvent.Connected, this.onRemotePeerConnect.bind(this));
+        // TODO: make connection to all current active calls even if the user is not anymore in the needle room
     }
 
     private unsubscribePeerEvents() {
-        // TODO: unsubscribe
+        if (!this._peer) return;
+        this._peer.off("open", this.onPeerConnectFn);
+        this._peer.off("call", this.onPeerReceiveCallFn);
+        // this.context.connection.stopListen(PeerEvent.Connected, this.onRemotePeerConnect.bind(this));
     }
 
     private onPeerConnect(id): void {
@@ -451,12 +508,12 @@ class PeerHandle extends EventDispatcher {
         this.context.connection.send(PeerEvent.Connected, new PeerUserConnectedModel(this, id));
     }
 
-    private onPeerReceivingCall(call: Peer.MediaConnection): void {
+    private onPeerReceivingCall(call: MediaConnection): void {
         call.answer();
         this.registerCall(call, CallDirection.Incoming);
     }
 
-    private registerCall(call: Peer.MediaConnection, direction: CallDirection): CallHandle {
+    private registerCall(call: MediaConnection, direction: CallDirection): CallHandle {
 
         const meta = call.metadata;
         if (!meta || !meta.userId) {
@@ -464,8 +521,8 @@ class PeerHandle extends EventDispatcher {
         }
         const userId = meta.userId;
 
-        if (direction === CallDirection.Incoming) console.log("Receive call from", call.metadata);
-        else console.log("Make call to", call.metadata);
+        if (direction === CallDirection.Incoming && debug) console.log("Receive call from", call.metadata);
+        else if (debug) console.log("Make call to", call.metadata);
 
         const arr = direction === CallDirection.Incoming ? this._incomingCalls : this._outgoingCalls;
         const handle = new CallHandle(userId, call, direction);
@@ -474,7 +531,8 @@ class PeerHandle extends EventDispatcher {
             console.error("Call error", err);
         });
         call.on("close", () => {
-            console.log("Call ended", call.metadata);
+            if (debug)
+                console.log("Call ended", call.metadata);
             call.close();
             const index = arr.indexOf(handle);
             if (index !== -1)
@@ -489,8 +547,11 @@ class PeerHandle extends EventDispatcher {
 
             call.on("stream", () => {
                 // workaround for https://github.com/peers/peerjs/issues/636
+                let intervalCounter = 0;
                 let closeInterval = setInterval(() => {
-                    if (!handle.isOpen) {
+                    const isFirstInterval = intervalCounter === 0;
+                    if (!handle.isOpen && isFirstInterval) {
+                        intervalCounter += 1;
                         clearInterval(closeInterval);
                         handle.close();
                     }
@@ -542,46 +603,68 @@ class NetworkedVideo extends EventDispatcher {
         if (_steam) {
             const calls = this._sendingVideoStreams.get(_steam);
             if (calls) {
-                console.log("Closing calls", calls);
+                if (debug)
+                    console.log("Closing calls", calls);
                 for (const call of calls) {
                     call.close();
                 }
             }
             this._sendingVideoStreams.delete(_steam);
-            if (calls)
+            if (calls && debug)
                 console.log("Currently sending", this._sendingVideoStreams);
         }
     }
 
-    private onConnectRoomFn: Function = this.onConnectRoom.bind(this);
-    private onUserConnectedFn: Function = this.onUserConnected.bind(this);
-    private onUserLeftFn: Function = this.onUserLeft.bind(this);
+    // private onConnectRoomFn: Function = this.onConnectRoom.bind(this);
+    // private onUserConnectedFn: Function = this.onUserConnected.bind(this);
+    // private onUserLeftFn: Function = this.onUserLeft.bind(this);
 
     enable() {
         this.peer.enable();
-        this.context.connection.beginListen(PeerEvent.Connected, this.onUserConnectedFn);
-        this.peer.addEventListener("receive-video", this.onReceiveVideo.bind(this));
+        this.peer.addEventListener(PeerEvent.ReceiveVideo, this.onReceiveVideo);
+        // this.peer.addEventListener(PeerEvent.UserJoined, this.onUserJoinedPeer);
+        this.context.connection.beginListen(PeerEvent.Connected, this.onUserConnected);
+        this.context.connection.beginListen(RoomEvents.JoinedRoom, this.onJoinedRoom);
+        this.context.connection.beginListen(RoomEvents.UserJoinedRoom, this.onJoinedRoom);
+        this.context.connection.beginListen(RoomEvents.UserLeftRoom, this.onUserLeft);
     }
 
     disable() {
         this.peer.disable();
-        // this.context.connection.stopListening(RoomEvents.UserJoinedRoom, this.onUserConnectedFn);
-        // this.context.connection.stopListening(RoomEvents.UserLeftRoom, this.onUserLeftFn);
-    }
+        this.peer.removeEventListener(PeerEvent.ReceiveVideo, this.onReceiveVideo);
+        // this.peer.removeEventListener(PeerEvent.UserJoined, this.onUserJoinedPeer);
+        this.context.connection.stopListen(PeerEvent.Connected, this.onUserConnected);
+        this.context.connection.stopListen(RoomEvents.JoinedRoom, this.onJoinedRoom);
+        this.context.connection.stopListen(RoomEvents.UserJoinedRoom, this.onJoinedRoom);
+        this.context.connection.stopListen(RoomEvents.UserLeftRoom, this.onUserLeft);
+    }
+
+    // private onUserJoinedPeer = (evt) => {
+    //     if (!this.context.connection.isConnected && evt.userId) {
+    //         this.startCallWithUserIfNotAlready(evt.userId);
+    //     }
+    // }
 
-    private onReceiveVideo(evt) {
-        console.log("RECEIVE VIDEO", evt);
-        this.dispatchEvent({ type: "receive-video", target: this, stream: evt.stream, userId: evt.userId });
+    // When either we ourselves OR someone else is joining the room we want to make sure to re-establish all calls
+    // and if the user that joined is not yet receiving our video stream we want to start a stream with them
+    // https://github.com/needle-tools/needle-tiny/issues/697#issuecomment-1510425539
+    private onJoinedRoom = (evt) => {
+        if (debug) console.log(`${evt.userId} joined room and I'm currently sending ${this._sendingVideoStreams.size} streams`);
+        if (this._sendingVideoStreams.size > 0)
+            this.updateSendingCalls();
     }
 
-    private onConnectRoom() {
-
+    private onReceiveVideo = (evt) => {
+        if (debug)
+            console.log("RECEIVE VIDEO", evt);
+        this.dispatchEvent({ type: PeerEvent.ReceiveVideo, target: this, stream: evt.stream, userId: evt.userId });
     }
 
-    private onUserConnected(user: PeerUserConnectedModel) {
+    private onUserConnected = (user: PeerUserConnectedModel) => {
         // console.log(this.peer.id, user.guid)
         if (this.peer.id === user.guid) {
-            console.log("USER CONNECTED", user);
+            if (debug)
+                console.log("USER CONNECTED", user.guid, user);
             const stream = this._sendingVideoStreams.keys().next().value;
             this.peer.makeCall(user.peerId, stream);
         }
@@ -598,7 +681,8 @@ class NetworkedVideo extends EventDispatcher {
             for (const userId of this.context.connection.usersInRoom()) {
                 if (userId === this.context.connection.connectionId) continue;
                 const existing = calls.find(c => c.userId === userId);
-                if (!existing) {
+                if (!existing || existing.stream?.active === false) {
+                    if (debug) console.log("Starting call to", userId)
                     const handle = this.peer.makeCall(this.peer.getPeerIdFromUserId(userId), stream);
                     if (handle) {
                         startedNewCall = true;
@@ -610,11 +694,27 @@ class NetworkedVideo extends EventDispatcher {
             this._sendingVideoStreams.set(stream, calls);
         }
         this.stopCallsToUsersThatAreNotInTheRoomAnymore();
-        if (startedNewCall) {
+        if (startedNewCall && debug) {
             console.log("Currently sending", this._sendingVideoStreams);
         }
     }
 
+    // private startCallWithUserIfNotAlready(userId: string) {
+    //     for (const stream of this._sendingVideoStreams.keys()) {
+    //         const calls = this._sendingVideoStreams.get(stream) || [];
+    //         const existing = calls.find(c => c.userId === userId);
+    //         if (!existing || existing.stream?.active === false) {
+    //             if (debug) console.log("Starting call to", userId)
+    //             const handle = this.peer.makeCall(this.peer.getPeerIdFromUserId(userId), stream);
+    //             if (handle) {
+    //                 calls.push(handle);
+    //                 return true;
+    //             }
+    //         }
+    //     }
+    //     return false;
+    // }
+
     private stopCallsToUsersThatAreNotInTheRoomAnymore() {
         for (const stream of this._sendingVideoStreams.keys()) {
             const calls = this._sendingVideoStreams.get(stream);

package/src/engine-components/SyncedRoom.ts

@@ -104,8 +104,7 @@ export class SyncedRoom extends Behaviour {
         if (this.context.connection.isConnected) {
             if (this.context.time.time - this._lastPingTime > 3) {
                 this._lastPingTime = this.context.time.time;
-                // console.log("PING");
-                this.context.connection.send("ping", { time: this.context.time.time });
+                this.context.connection.sendPing();
             }
 
             if (this.context.connection.isInRoom) {

package/src/engine-components/VideoPlayer.ts

@@ -105,8 +105,13 @@ export class VideoPlayer extends Behaviour {
     get isPlaying(): boolean {
         const video = this._videoElement;
         if (video) {
-            return video.currentTime > 0 && !video.paused && !video.ended
-                && video.readyState > video.HAVE_CURRENT_DATA;
+            if(video.currentTime > 0 && !video.paused && !video.ended
+                && video.readyState > video.HAVE_CURRENT_DATA)
+                return true;
+            else if(video.srcObject){
+                const stream = video.srcObject as MediaStream;
+                if(stream.active) return true;
+            }
         }
         return false;
     }
@@ -134,6 +139,15 @@ export class VideoPlayer extends Behaviour {
         return this._videoElement;
     }
 
+    get muted() {
+        return this._videoElement?.muted ?? this._muted;
+    }
+    set muted(val: boolean) {
+        this._muted = val;
+        if (this._videoElement) this._videoElement.muted = val;
+    }
+    private _muted: boolean = false;
+
     private _crossOrigin: string | null = "anonymous";
 
     private audioOutputMode: VideoAudioOutputMode = VideoAudioOutputMode.AudioSource;
@@ -157,7 +171,7 @@ export class VideoPlayer extends Behaviour {
             // TODO: how to prevent interruption error when another video is already playing
             this._videoElement.srcObject = video;
             if (this._isPlaying)
-                this._videoElement.play();
+                this.play();
             this.updateAspect();
         }
     }
@@ -245,7 +259,13 @@ export class VideoPlayer extends Behaviour {
         if (!this._receivedInput) this._videoElement.muted = true;
         this.updateVideoElementSettings();
         this._videoElement?.play().catch(err => {
-            console.warn(err);
+            // https://developer.chrome.com/blog/play-request-was-interrupted/
+            if(debug)
+                console.error("Error playing video", err, "CODE=" + err.code, this.videoElement?.src, this);
+            setTimeout(() => {
+                if (this._isPlaying && !this.destroyed && this.activeAndEnabled)
+                    this.play();
+            }, 1000);
         });
         if (debug) console.log("play", this._videoElement);
     }
@@ -399,7 +419,9 @@ export class VideoPlayer extends Behaviour {
         this._videoElement.playbackRate = this._playbackSpeed;
         // dont open in fullscreen on ios
         this._videoElement.playsInline = true;
-        this._videoElement.muted = !this._receivedInput && this.audioOutputMode !== VideoAudioOutputMode.None;
+        let muted = !this._receivedInput && this.audioOutputMode !== VideoAudioOutputMode.None;
+        if(!muted && this._muted) muted = true;
+        this._videoElement.muted = muted;
         if (this.playOnAwake || this.playOnEnable)
             this._videoElement.autoplay = true;
     }

package/src/engine-components/postprocessing/Effects/DepthOfField.ts

@@ -1,11 +1,10 @@
 import { DepthOfFieldEffect } from "postprocessing";
-import { PerspectiveCamera, Vector3 } from "three";
-import { getWorldPosition } from "../../../engine/engine_three_utils";
 import { serializable } from "../../../engine/engine_serialization";
 import { Mathf } from "../../../engine/engine_math";
 import { PostProcessingEffect } from "../PostProcessingEffect";
 import { VolumeParameter } from "../VolumeParameter";
 import { registerCustomEffectType } from "../VolumeProfile";
+import { isMobileDevice } from "../../../engine/engine_utils";
 
 export enum DepthOfFieldMode {
     Off = 0,
@@ -20,7 +19,7 @@ export class DepthOfField extends PostProcessingEffect {
     }
 
     @serializable()
-    mode! : DepthOfFieldMode;
+    mode!: DepthOfFieldMode;
 
     @serializable(VolumeParameter)
     focusDistance!: VolumeParameter;
@@ -34,13 +33,16 @@ export class DepthOfField extends PostProcessingEffect {
     @serializable(VolumeParameter)
     gaussianMaxRadius!: VolumeParameter;
 
+    @serializable(VolumeParameter)
+    resolutionScale?: VolumeParameter;
+
     init() {
         this.focalLength.valueProcessor = v => {
             const t = v / 300;
             const max = 2;// this.context.mainCameraComponent?.farClipPlane ?? 10;
             return Mathf.lerp(max, .01, t);
         };
-        
+
         const maxBokehScale = 20;
         this.aperture.valueProcessor = v => {
             const t = 1 - v / 32;
@@ -49,7 +51,16 @@ export class DepthOfField extends PostProcessingEffect {
     }
 
     onCreateEffect() {
-        if(this.mode === DepthOfFieldMode.Off) return undefined;
+        if (this.mode === DepthOfFieldMode.Off) return undefined;
+
+        const factor = 1 / window.devicePixelRatio;
+
+        if (this.resolutionScale === undefined) {
+            let defaultValue = 1;
+            if(isMobileDevice()) defaultValue = .6;
+            this.resolutionScale = new VolumeParameter(defaultValue * factor);
+        }
+
         // console.log(this.focusDistance.overrideState, this.focusDistance.value);
         // const depth = new DepthEffect({
         //     inverted: true,
@@ -59,7 +70,7 @@ export class DepthOfField extends PostProcessingEffect {
             worldFocusRange: .2,
             focalLength: 1,
             bokehScale: 20,
-            resolutionScale: 1,
+            resolutionScale: this.resolutionScale.value,
         });
 
         this.focusDistance.onValueChanged = v => {
@@ -68,6 +79,7 @@ export class DepthOfField extends PostProcessingEffect {
         this.focalLength.onValueChanged = v => dof.circleOfConfusionMaterial.worldFocusRange = v;
         this.aperture.onValueChanged = v => dof.bokehScale = v;
 
+        if (this.resolutionScale) this.resolutionScale.onValueChanged = v => dof.resolution.scale = v;
 
         return [dof];
     }

package/src/engine-components/postprocessing/VolumeParameter.ts

@@ -5,6 +5,11 @@ export declare type VolumeParameterValueProcessor = (value: any) => any;
 
 export class VolumeParameter {
 
+    constructor(value?: any) {
+        this._value = value;
+        this._defaultValue = value;
+    }
+
     @serializable()
     get overrideState(): boolean {
         return this._active;

package/src/engine-components/timeline/PlayableDirector.ts

@@ -6,7 +6,7 @@ import { AudioSource } from '../AudioSource';
 import { SignalReceiver } from './SignalAsset';
 import * as Models from "./TimelineModels";
 import * as Tracks from "./TimelineTracks";
-import { deepClone, getParam } from '../../engine/engine_utils';
+import { deepClone, delay, getParam } from '../../engine/engine_utils';
 import { GuidsMap } from '../../engine/engine_types';
 import { Object3D } from 'three';
 import { isLocalNetwork } from '../../engine/engine_networking_utils';
@@ -87,6 +87,8 @@ export class PlayableDirector extends Behaviour {
     get speed(): number { return this._speed; }
     set speed(value: number) { this._speed = value; }
 
+    /** When enabled the timeline will wait for audio tracks to load at the current time before starting to play */
+    waitForAudio: boolean = true;
 
     private _visibilityChangeEvt?: any;
     private _clonedPlayableAsset: boolean = false;
@@ -151,13 +153,28 @@ export class PlayableDirector extends Behaviour {
         this.setupAndCreateTrackHandlers();
     }
 
-    play() {
+    async play() {
         if (!this.isValid()) return;
         const pauseChanged = this._isPaused == true;
         this._isPaused = false;
         if (pauseChanged) this.invokePauseChangedMethodsOnTracks();
         if (this._isPlaying) return;
         this._isPlaying = true;
+        if (this.waitForAudio) {
+            // Make sure audio tracks have loaded at the current time
+            const promises: Array<Promise<any>> = [];
+            for (const track of this._audioTracks) {
+                const promise = track.loadAudio(this._time, 1, 0);
+                if (promise)
+                    promises.push(promise);
+            }
+            if (promises.length > 0) {
+                await Promise.all(promises);
+                if (!this._isPlaying) return;
+            }
+            while(this._audioTracks.length > 0 && this._isPlaying && !AudioSource.userInteractionRegistered && this.waitForAudio) 
+                await delay(200);
+        }
         this._internalUpdateRoutine = this.startCoroutine(this.internalUpdate());
     }
 
@@ -363,6 +380,25 @@ export class PlayableDirector extends Behaviour {
                         console.warn("Missing binding", binding, track.name, track.type, this.name, this.playableAsset.name);
                 }
             }
+            if (track.type === Models.TrackType.Control) {
+                for (let i = 0; i < track.clips.length; i++) {
+                    const clip = track.clips[i];
+                    let binding = clip.asset.sourceObject;
+                    if (typeof binding === "string") {
+                        if (this._guidsMap && this._guidsMap[binding])
+                            binding = this._guidsMap[binding];
+                        const obj = GameObject.findByGuid(binding, root);
+                        if (obj === null || typeof obj !== "object") {
+                            console.warn("Failed to resolve sourceObject binding", binding, track.name, clip);
+                        }
+                        else {
+                            if (debug)
+                                console.log("Resolved binding", binding, "to", obj);
+                            clip.asset.sourceObject = obj;
+                        }
+                    }
+                }
+            }
         }
     }