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

package/src/engine-components/ParticleSystemModules.ts

@@ -35,7 +35,7 @@ export interface IParticleSystem {
 
 export enum ParticleSystemRenderMode {
     Billboard = 0,
-    //   Stretch = 1,
+    Stretch = 1,
     HorizontalBillboard = 2,
     VerticalBillboard = 3,
     Mesh = 4,
@@ -608,12 +608,10 @@ export class ShapeModule implements EmitterShape {
                     this.randomConePoint(this.position, this.angle, radius, this.radiusThickness, this.arc, this.arcMode, this._vector);
                     break;
                 case ParticleSystemShapeType.Sphere:
-                    this.randomSpherePoint(this.position, radius, this.radiusThickness, this.arc, this._vector, this.scale);
+                    this.randomSpherePoint(this.position, radius, this.radiusThickness, this.arc, this._vector);
                     break;
                 case ParticleSystemShapeType.Circle:
-                    this._temp.copy(this.scale);
-                    this._temp.z = 0;
-                    this.randomSpherePoint(this.position, radius, this.radiusThickness, this.arc, this._vector, this._temp);
+                    this.randomCirclePoint(this.position, radius, this.radiusThickness, this.arc, this._vector);
                     break;
                 default:
                     this._vector.set(0, 0, 0);
@@ -718,15 +716,27 @@ export class ShapeModule implements EmitterShape {
         dir.lerp(v, amount);
     }
 
-    private randomSpherePoint(pos: Vec3, radius: number, thickness: number, arc: number, vec: Vec3, scale: Vec3) {
+    private randomSpherePoint(pos: Vec3, radius: number, thickness: number, arc: number, vec: Vec3) {
         const u = Math.random();
         const v = Math.random();
         const theta = 2 * Math.PI * u * (arc / 360);
         const phi = Math.acos(2 * v - 1);
         const r = Mathf.lerp(1, 1 - (Math.pow(1 - Math.random(), Math.PI)), thickness) * (radius);
-        const x = pos.x + scale.x * (-r * Math.sin(phi) * Math.cos(theta));
-        const y = pos.y + scale.y * (r * Math.sin(phi) * Math.sin(theta));
-        const z = pos.z + scale.z * (r * Math.cos(phi));
+        const x = pos.x + (-r * Math.sin(phi) * Math.cos(theta));
+        const y = pos.y + (r * Math.sin(phi) * Math.sin(theta));
+        const z = pos.z + (r * Math.cos(phi));
+        vec.x = x;
+        vec.y = y;
+        vec.z = z;
+    }
+
+    private randomCirclePoint(pos:Vec3, radius:number, thickness:number, arg:number, vec:Vec3){
+        const u = Math.random();
+        const theta = 2 * Math.PI * u * (arg / 360);
+        const r = Mathf.lerp(1, 1 - (Math.pow(1 - Math.random(), Math.PI)), thickness) * (radius);
+        const x = pos.x + r * Math.cos(theta);
+        const y = pos.y + r * Math.sin(theta);
+        const z = pos.z;
         vec.x = x;
         vec.y = y;
         vec.z = z;
@@ -1096,6 +1106,8 @@ export class TextureSheetAnimationModule {
             switch (this.frameOverTime.mode) {
                 case ParticleSystemCurveMode.Constant:
                 case ParticleSystemCurveMode.TwoConstants:
+                case ParticleSystemCurveMode.TwoCurves:
+                case ParticleSystemCurveMode.Curve:
                     return true;
             }
         }
@@ -1104,7 +1116,8 @@ export class TextureSheetAnimationModule {
 
     getStartIndex(): number {
         if (this.sampleOnceAtStart()) {
-            return this.frameOverTime.evaluate(Math.random())
+            const start = Math.random();
+            return start * (this.numTilesX * this.numTilesY);
         }
         return 0;
     }
@@ -1118,13 +1131,12 @@ export class TextureSheetAnimationModule {
 
     private getIndex(t01: number): number {
         const tiles = this.numTilesX * this.numTilesY;
-        // let pos = t01 * this.cycleCount;
+        t01 = t01 * this.cycleCount;
         let index = this.frameOverTime.evaluate(t01 % 1);
         index *= this.frameOverTimeMultiplier;
         index *= tiles;
         index = index % tiles;
         index = Math.floor(index);
-        // console.log(index);
         return index;
     }
 }

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/Skybox.ts

@@ -5,7 +5,7 @@ import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader";
 import { EquirectangularRefractionMapping, sRGBEncoding, Texture, TextureLoader } from "three"
 import { syncField } from "../engine/engine_networking_auto";
 import { Camera } from "./Camera";
-import { getParam, getPath } from "../engine/engine_utils";
+import { getParam, resolveUrl } from "../engine/engine_utils";
 
 const debug = getParam("debugskybox");
 
@@ -56,7 +56,7 @@ export class RemoteSkybox extends Behaviour {
         if(debug) console.log("Remote skybox url?: " + url);
 
         if (!url.startsWith("http") && !url.startsWith("www.") && !url.startsWith("data:")) {
-            url = getPath(this.sourceId, url);
+            url = resolveUrl(this.sourceId, url);
             if(debug) console.log("Remote skybox resolved to " + url);
         }
 

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

@@ -3,7 +3,7 @@ import * as THREE from "three";
 import { serializable } from "../engine/engine_serialization_decorator";
 import { LinearFilter, Material, Mesh, Object3D, RawShaderMaterial, ShaderMaterial, Texture, TextureLoader, Vector2, Vector4, VideoTexture } from "three";
 import { awaitInput } from "../engine/engine_input_utils";
-import { getParam } from "../engine/engine_utils";
+import { getParam, resolveUrl } from "../engine/engine_utils";
 import { Renderer } from "./Renderer";
 import { getWorldScale } from "../engine/engine_three_utils";
 import { ObjectUtils, PrimitiveType } from "../engine/engine_create_objects";
@@ -49,11 +49,12 @@ export class VideoPlayer extends Behaviour {
     renderer: THREE.Object3D | null = null;
     @serializable()
     playOnAwake: boolean = true;
-    @serializable()
-    playOnEnable?: boolean;
 
     @serializable()
     aspectMode: AspectMode = AspectMode.None;
+    
+    @serializable(URL)
+    private clip?: string | MediaStream | null = null;
 
     @serializable()
     private renderMode?: VideoRenderMode;
@@ -105,8 +106,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,12 +140,20 @@ 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;
 
     private source!: VideoSource;
-    private clip?: string | MediaStream | null = null;
     private url?: string | null = null;
 
     private _videoElement: HTMLVideoElement | null = null;
@@ -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();
         }
     }
@@ -195,7 +209,7 @@ export class VideoPlayer extends Behaviour {
     }
 
     onEnable(): void {
-        if (this.playOnEnable === true) {
+        if (this.playOnAwake === true) {
             this.handleBeginPlaying(true);
         }
         if (this.screenspace) {
@@ -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,8 +419,10 @@ 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;
-        if (this.playOnAwake || this.playOnEnable)
+        let muted = !this._receivedInput && this.audioOutputMode !== VideoAudioOutputMode.None;
+        if(!muted && this._muted) muted = true;
+        this._videoElement.muted = muted;
+        if (this.playOnAwake)
             this._videoElement.autoplay = true;
     }