Fix - Webcam not showed on iOS devices and Open URL not work

client/src/characters/MyPlayer.ts

@@ -14,6 +14,7 @@ import { pushPlayerJoinedMessage } from '../stores/ChatStore'
 import { ItemType } from '../../../types/Items'
 import { NavKeys } from '../../../types/KeyboardState'
 import { JoystickMovement } from '../components/Joystick'
+import { openURL } from '../utils'
 
 export default class MyPlayer extends Player {
   private playContainerBody: Phaser.Physics.Arcade.Body
@@ -70,7 +71,8 @@ export default class MyPlayer extends Player {
           break
         case ItemType.VENDINGMACHINE:
           // hacky and hard-coded, but leaving it as is for now
-          window.open('https://www.buymeacoffee.com/skyoffice', '_blank')
+          const url = 'https://www.buymeacoffee.com/skyoffice'
+          openURL(url)
           break
       }
     }

client/src/scenes/Game.ts

@@ -1,6 +1,6 @@
 import Phaser from 'phaser'
 
-// import { debugDraw } from '../utils/debug'
+// import { debugDraw } from '../utils'
 import { createCharacterAnims } from '../anims/CharacterAnims'
 
 import Item from '../items/Item'

client/src/utils/helpers.ts

@@ -0,0 +1,11 @@
+export function openURL(url: string) {
+  const canOpenNewTab = window.open(url, '_blank')
+
+  // if the browser blocks the new tab, open the url in the current tab
+  // this is the case for Safari on iOS
+  if (!canOpenNewTab) {
+    let a = document.createElement('a')
+    a.href = url
+    a.click()
+  }
+}

client/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './debug'
+export * from './helpers'

client/src/web/WebRTC.ts

@@ -101,6 +101,7 @@ export default class WebRTC {
   // method to add new video stream to videoGrid div
   addVideoStream(video: HTMLVideoElement, stream: MediaStream) {
     video.srcObject = stream
+    video.playsInline = true
     video.addEventListener('loadedmetadata', () => {
       video.play()
     })