/** * @author Richard Davey <rich@photonstorm.com> * @copyright 2014 Photon Storm Ltd. * @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License} */ /** * @classdesc * Detects device support capabilities and is responsible for device intialization - see {@link Phaser.Device.whenReady whenReady}. * * This class represents a singleton object that can be accessed directly as `game.device` * (or, as a fallback, `Phaser.Device` when a game instance is not available) without the need to instantiate it. * * Unless otherwise noted the device capabilities are only guaranteed after initialization. Initialization * occurs automatically and is guaranteed complete before {@link Phaser.Game} begins its "boot" phase. * Feature detection can be modified in the {@link Phaser.Device.onInitialized onInitialized} signal. * * When checking features using the exposed properties only the *truth-iness* of the value should be relied upon * unless the documentation states otherwise: properties may return `false`, `''`, `null`, or even `undefined` * when indicating the lack of a feature. * * Uses elements from System.js by MrDoob and Modernizr * * @description * It is not possible to instantiate the Device class manually. * * @class * @protected */ Phaser.Device = function () { /** * The time the device became ready. * @property {integer} deviceReadyAt * @protected */ this.deviceReadyAt = 0; /** * The time as which initialization has completed. * @property {boolean} initialized * @protected */ this.initialized = false; // Browser / Host / Operating System /** * @property {boolean} desktop - Is running on a desktop? * @default */ this.desktop = false; /** * @property {boolean} iOS - Is running on iOS? * @default */ this.iOS = false; /** * @property {boolean} cocoonJS - Is the game running under CocoonJS? * @default */ this.cocoonJS = false; /** * @property {boolean} cocoonJSApp - Is this game running with CocoonJS.App? * @default */ this.cocoonJSApp = false; /** * @property {boolean} cordova - Is the game running under Apache Cordova? * @default */ this.cordova = false; /** * @property {boolean} node - Is the game running under Node.js? * @default */ this.node = false; /** * @property {boolean} nodeWebkit - Is the game running under Node-Webkit? * @default */ this.nodeWebkit = false; /** * @property {boolean} ejecta - Is the game running under Ejecta? * @default */ this.ejecta = false; /** * @property {boolean} crosswalk - Is the game running under the Intel Crosswalk XDK? * @default */ this.crosswalk = false; /** * @property {boolean} android - Is running on android? * @default */ this.android = false; /** * @property {boolean} chromeOS - Is running on chromeOS? * @default */ this.chromeOS = false; /** * @property {boolean} linux - Is running on linux? * @default */ this.linux = false; /** * @property {boolean} macOS - Is running on macOS? * @default */ this.macOS = false; /** * @property {boolean} windows - Is running on windows? * @default */ this.windows = false; /** * @property {boolean} windowsPhone - Is running on a Windows Phone? * @default */ this.windowsPhone = false; // Features /** * @property {boolean} canvas - Is canvas available? * @default */ this.canvas = false; /** * @property {?boolean} canvasBitBltShift - True if canvas supports a 'copy' bitblt onto itself when the source and destination regions overlap. * @default */ this.canvasBitBltShift = null; /** * @property {boolean} webGL - Is webGL available? * @default */ this.webGL = false; /** * @property {boolean} file - Is file available? * @default */ this.file = false; /** * @property {boolean} fileSystem - Is fileSystem available? * @default */ this.fileSystem = false; /** * @property {boolean} localStorage - Is localStorage available? * @default */ this.localStorage = false; /** * @property {boolean} worker - Is worker available? * @default */ this.worker = false; /** * @property {boolean} css3D - Is css3D available? * @default */ this.css3D = false; /** * @property {boolean} pointerLock - Is Pointer Lock available? * @default */ this.pointerLock = false; /** * @property {boolean} typedArray - Does the browser support TypedArrays? * @default */ this.typedArray = false; /** * @property {boolean} vibration - Does the device support the Vibration API? * @default */ this.vibration = false; /** * @property {boolean} getUserMedia - Does the device support the getUserMedia API? * @default */ this.getUserMedia = false; /** * @property {boolean} quirksMode - Is the browser running in strict mode (false) or quirks mode? (true) * @default */ this.quirksMode = false; // Input /** * @property {boolean} touch - Is touch available? * @default */ this.touch = false; /** * @property {boolean} mspointer - Is mspointer available? * @default */ this.mspointer = false; /** * @property {?string} wheelType - The newest type of Wheel/Scroll event supported: 'wheel', 'mousewheel', 'DOMMouseScroll' * @default * @protected */ this.wheelEvent = null; // Browser /** * @property {boolean} arora - Set to true if running in Arora. * @default */ this.arora = false; /** * @property {boolean} chrome - Set to true if running in Chrome. * @default */ this.chrome = false; /** * @property {boolean} epiphany - Set to true if running in Epiphany. * @default */ this.epiphany = false; /** * @property {boolean} firefox - Set to true if running in Firefox. * @default */ this.firefox = false; /** * @property {boolean} ie - Set to true if running in Internet Explorer. * @default */ this.ie = false; /** * @property {number} ieVersion - If running in Internet Explorer this will contain the major version number. Beyond IE10 you should use Device.trident and Device.tridentVersion. * @default */ this.ieVersion = 0; /** * @property {boolean} trident - Set to true if running a Trident version of Internet Explorer (IE11+) * @default */ this.trident = false; /** * @property {number} tridentVersion - If running in Internet Explorer 11 this will contain the major version number. See {@link http://msdn.microsoft.com/en-us/library/ie/ms537503(v=vs.85).aspx} * @default */ this.tridentVersion = 0; /** * @property {boolean} mobileSafari - Set to true if running in Mobile Safari. * @default */ this.mobileSafari = false; /** * @property {boolean} midori - Set to true if running in Midori. * @default */ this.midori = false; /** * @property {boolean} opera - Set to true if running in Opera. * @default */ this.opera = false; /** * @property {boolean} safari - Set to true if running in Safari. * @default */ this.safari = false; /** * @property {boolean} webApp - Set to true if running as a WebApp, i.e. within a WebView * @default */ this.webApp = false; /** * @property {boolean} silk - Set to true if running in the Silk browser (as used on the Amazon Kindle) * @default */ this.silk = false; // Audio /** * @property {boolean} audioData - Are Audio tags available? * @default */ this.audioData = false; /** * @property {boolean} webAudio - Is the WebAudio API available? * @default */ this.webAudio = false; /** * @property {boolean} ogg - Can this device play ogg files? * @default */ this.ogg = false; /** * @property {boolean} opus - Can this device play opus files? * @default */ this.opus = false; /** * @property {boolean} mp3 - Can this device play mp3 files? * @default */ this.mp3 = false; /** * @property {boolean} wav - Can this device play wav files? * @default */ this.wav = false; /** * Can this device play m4a files? * @property {boolean} m4a - True if this device can play m4a files. * @default */ this.m4a = false; /** * @property {boolean} webm - Can this device play webm files? * @default */ this.webm = false; // Device /** * @property {boolean} iPhone - Is running on iPhone? * @default */ this.iPhone = false; /** * @property {boolean} iPhone4 - Is running on iPhone4? * @default */ this.iPhone4 = false; /** * @property {boolean} iPad - Is running on iPad? * @default */ this.iPad = false; // Device features /** * @property {number} pixelRatio - PixelRatio of the host device? * @default */ this.pixelRatio = 0; /** * @property {boolean} littleEndian - Is the device big or little endian? (only detected if the browser supports TypedArrays) * @default */ this.littleEndian = false; /** * @property {boolean} LITTLE_ENDIAN - Same value as `littleEndian`. * @default */ this.LITTLE_ENDIAN = false; /** * @property {boolean} support32bit - Does the device context support 32bit pixel manipulation using array buffer views? * @default */ this.support32bit = false; /** * @property {boolean} fullscreen - Does the browser support the Full Screen API? * @default */ this.fullscreen = false; /** * @property {string} requestFullscreen - If the browser supports the Full Screen API this holds the call you need to use to activate it. * @default */ this.requestFullscreen = ''; /** * @property {string} cancelFullscreen - If the browser supports the Full Screen API this holds the call you need to use to cancel it. * @default */ this.cancelFullscreen = ''; /** * @property {boolean} fullscreenKeyboard - Does the browser support access to the Keyboard during Full Screen mode? * @default */ this.fullscreenKeyboard = false; }; // Device is really a singleton/static entity; instantiate it // and add new methods directly sans-prototype. Phaser.Device = new Phaser.Device(); /** * This signal is dispatched after device initialization occurs but before any of the ready * callbacks (see {@link Phaser.Device.whenReady whenReady}) have been invoked. * * Local "patching" for a particular device can/should be done in this event. * * _Note_: This signal is removed after the device has been readied; if a handler has not been * added _before_ `new Phaser.Game(..)` it is probably too late. * * @type {?Phaser.Signal} * @static */ Phaser.Device.onInitialized = new Phaser.Signal(); /** * Add a device-ready handler and ensure the device ready sequence is started. * * Phaser.Device will _not_ activate or initialize until at least one `whenReady` handler is added, * which is normally done automatically be calling `new Phaser.Game(..)`. * * The handler is invoked when the device is considered "ready", which may be immediately * if the device is already "ready". See {@link Phaser.Device#deviceReadyAt deviceReadyAt}. * * @method * @param {function} handler - Callback to invoke when the device is ready. It is invoked with the given context the Phaser.Device object is supplied as the first argument. * @param {object} [context] - Context in which to invoke the handler * @param {boolean} [nonPrimer=false] - If true the device ready check will not be started. */ Phaser.Device.whenReady = function (callback, context, nonPrimer) { var readyCheck = this._readyCheck; if (this.deviceReadyAt || !readyCheck) { callback.call(context, this); } else if (readyCheck._monitor || nonPrimer) { readyCheck._queue = readyCheck._queue || []; readyCheck._queue.push([callback, context]); } else { readyCheck._monitor = readyCheck.bind(this); readyCheck._queue = readyCheck._queue || []; readyCheck._queue.push([callback, context]); var cordova = typeof window.cordova !== 'undefined'; var cocoonJS = navigator['isCocoonJS']; if (document.readyState === 'complete' || document.readyState === 'interactive') { // Why is there an additional timeout here? window.setTimeout(readyCheck._monitor, 0); } else if (cordova && !cocoonJS) { // Ref. http://docs.phonegap.com/en/3.5.0/cordova_events_events.md.html#deviceready // Cordova, but NOT Cocoon? document.addEventListener('deviceready', readyCheck._monitor, false); } else { document.addEventListener('DOMContentLoaded', readyCheck._monitor, false); window.addEventListener('load', readyCheck._monitor, false); } } }; /** * Internal method used for checking when the device is ready. * This function is removed from Phaser.Device when the device becomes ready. * * @method * @private */ Phaser.Device._readyCheck = function () { var readyCheck = this._readyCheck; if (!document.body) { window.setTimeout(readyCheck._monitor, 20); } else if (!this.deviceReadyAt) { this.deviceReadyAt = Date.now(); document.removeEventListener('deviceready', readyCheck._monitor); document.removeEventListener('DOMContentLoaded', readyCheck._monitor); window.removeEventListener('load', readyCheck._monitor); this._initialize(); this.initialized = true; this.onInitialized.dispatch(this); var item; while ((item = readyCheck._queue.shift())) { var callback = item[0]; var context = item[1]; callback.call(context, this); } // Remove no longer useful methods and properties. this._readyCheck = null; this._initialize = null; this.onInitialized = null; } }; /** * Internal method to initialize the capability checks. * This function is removed from Phaser.Device once the device is initialized. * * @method * @private */ Phaser.Device._initialize = function () { var device = this; /** * Check which OS is game running on. */ function _checkOS () { var ua = navigator.userAgent; if (/Playstation Vita/.test(ua)) { device.vita = true; } else if (/Kindle/.test(ua) || /\bKF[A-Z][A-Z]+/.test(ua) || /Silk.*Mobile Safari/.test(ua)) { device.kindle = true; // This will NOT detect early generations of Kindle Fire, I think there is no reliable way... // E.g. "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_3; en-us; Silk/1.1.0-80) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16 Silk-Accelerated=true" } else if (/Android/.test(ua)) { device.android = true; } else if (/CrOS/.test(ua)) { device.chromeOS = true; } else if (/iP[ao]d|iPhone/i.test(ua)) { device.iOS = true; } else if (/Linux/.test(ua)) { device.linux = true; } else if (/Mac OS/.test(ua)) { device.macOS = true; } else if (/Windows/.test(ua)) { device.windows = true; if (/Windows Phone/i.test(ua)) { device.windowsPhone = true; } } var silk = /Silk/.test(ua); // detected in browsers if (device.windows || device.macOS || (device.linux && !silk) || device.chromeOS) { device.desktop = true; } // Windows Phone / Table reset if (device.windowsPhone || ((/Windows NT/i.test(ua)) && (/Touch/i.test(ua)))) { device.desktop = false; } } /** * Check HTML5 features of the host environment. */ function _checkFeatures () { device.canvas = !!window['CanvasRenderingContext2D'] || device.cocoonJS; try { device.localStorage = !!localStorage.getItem; } catch (error) { device.localStorage = false; } device.file = !!window['File'] && !!window['FileReader'] && !!window['FileList'] && !!window['Blob']; device.fileSystem = !!window['requestFileSystem']; device.webGL = ( function () { try { var canvas = document.createElement( 'canvas' ); /*Force screencanvas to false*/ canvas.screencanvas = false; return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )(); device.webGL = !!device.webGL; device.worker = !!window['Worker']; device.pointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document; device.quirksMode = (document.compatMode === 'CSS1Compat') ? false : true; device.getUserMedia = !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); // TODO: replace canvasBitBltShift detection with actual feature check // Excludes iOS versions as they generally wrap UIWebView (eg. Safari WebKit) and it // is safer to not try and use the fast copy-over method. if (!device.iOS && (device.ie || device.firefox || device.chrome)) { device.canvasBitBltShift = true; } // Known not to work if (device.safari || device.mobileSafari) { device.canvasBitBltShift = false; } } /** * Checks/configures various input. */ function _checkInput () { if ('ontouchstart' in document.documentElement || (window.navigator.maxTouchPoints && window.navigator.maxTouchPoints > 1)) { device.touch = true; } if (window.navigator.msPointerEnabled || window.navigator.pointerEnabled) { device.mspointer = true; } if (!device.cocoonJS) { // See https://developer.mozilla.org/en-US/docs/Web/Events/wheel if ('onwheel' in window || (device.ie && 'WheelEvent' in window)) { // DOM3 Wheel Event: FF 17+, IE 9+, Chrome 31+, Safari 7+ device.wheelEvent = 'wheel'; } else if ('onmousewheel' in window) { // Non-FF legacy: IE 6-9, Chrome 1-31, Safari 5-7. device.wheelEvent = 'mousewheel'; } else if (device.firefox && 'MouseScrollEvent' in window) { // FF prior to 17. This should probably be scrubbed. device.wheelEvent = 'DOMMouseScroll'; } } } /** * Checks for support of the Full Screen API. */ function _checkFullScreenSupport () { var fs = [ 'requestFullscreen', 'requestFullScreen', 'webkitRequestFullscreen', 'webkitRequestFullScreen', 'msRequestFullscreen', 'msRequestFullScreen', 'mozRequestFullScreen', 'mozRequestFullscreen' ]; var element = document.createElement('div'); for (var i = 0; i < fs.length; i++) { if (element[fs[i]]) { device.fullscreen = true; device.requestFullscreen = fs[i]; break; } } var cfs = [ 'cancelFullScreen', 'exitFullscreen', 'webkitCancelFullScreen', 'webkitExitFullscreen', 'msCancelFullScreen', 'msExitFullscreen', 'mozCancelFullScreen', 'mozExitFullscreen' ]; if (device.fullscreen) { for (var i = 0; i < cfs.length; i++) { if (document[cfs[i]]) { device.cancelFullscreen = cfs[i]; break; } } } // Keyboard Input? if (window['Element'] && Element['ALLOW_KEYBOARD_INPUT']) { device.fullscreenKeyboard = true; } } /** * Check what browser is game running in. */ function _checkBrowser () { var ua = navigator.userAgent; if (/Arora/.test(ua)) { device.arora = true; } else if (/Chrome/.test(ua)) { device.chrome = true; } else if (/Epiphany/.test(ua)) { device.epiphany = true; } else if (/Firefox/.test(ua)) { device.firefox = true; } else if (/AppleWebKit/.test(ua) && device.iOS) { device.mobileSafari = true; } else if (/MSIE (\d+\.\d+);/.test(ua)) { device.ie = true; device.ieVersion = parseInt(RegExp.$1, 10); } else if (/Midori/.test(ua)) { device.midori = true; } else if (/Opera/.test(ua)) { device.opera = true; } else if (/Safari/.test(ua)) { device.safari = true; } else if (/Trident\/(\d+\.\d+)(.*)rv:(\d+\.\d+)/.test(ua)) { device.ie = true; device.trident = true; device.tridentVersion = parseInt(RegExp.$1, 10); device.ieVersion = parseInt(RegExp.$3, 10); } //Silk gets its own if clause because its ua also contains 'Safari' if (/Silk/.test(ua)) { device.silk = true; } // WebApp mode in iOS if (navigator['standalone']) { device.webApp = true; } if (typeof window.cordova !== "undefined") { device.cordova = true; } if (typeof process !== "undefined" && typeof require !== "undefined") { device.node = true; } if (device.node) { try { device.nodeWebkit = (typeof require('nw.gui') !== "undefined"); } catch(error) { device.nodeWebkit = false; } } if (navigator['isCocoonJS']) { device.cocoonJS = true; } if (device.cocoonJS) { try { device.cocoonJSApp = (typeof CocoonJS !== "undefined"); } catch(error) { device.cocoonJSApp = false; } } if (typeof window.ejecta !== "undefined") { device.ejecta = true; } if (/Crosswalk/.test(ua)) { device.crosswalk = true; } } /** * Check audio support. */ function _checkAudio () { device.audioData = !!(window['Audio']); device.webAudio = !!(window['AudioContext'] || window['webkitAudioContext']); var audioElement = document.createElement('audio'); var result = false; try { if (result = !!audioElement.canPlayType) { if (audioElement.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, '')) { device.ogg = true; } if (audioElement.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/, '') || audioElement.canPlayType('audio/opus;').replace(/^no$/, '')) { device.opus = true; } if (audioElement.canPlayType('audio/mpeg;').replace(/^no$/, '')) { device.mp3 = true; } // Mimetypes accepted: // developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements // bit.ly/iphoneoscodecs if (audioElement.canPlayType('audio/wav; codecs="1"').replace(/^no$/, '')) { device.wav = true; } if (audioElement.canPlayType('audio/x-m4a;') || audioElement.canPlayType('audio/aac;').replace(/^no$/, '')) { device.m4a = true; } if (audioElement.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/, '')) { device.webm = true; } } } catch (e) { } } /** * Check PixelRatio, iOS device, Vibration API, ArrayBuffers and endianess. */ function _checkDevice () { device.pixelRatio = window['devicePixelRatio'] || 1; device.iPhone = navigator.userAgent.toLowerCase().indexOf('iphone') != -1; device.iPhone4 = (device.pixelRatio == 2 && device.iPhone); device.iPad = navigator.userAgent.toLowerCase().indexOf('ipad') != -1; if (typeof Int8Array !== 'undefined') { device.typedArray = true; } else { device.typedArray = false; } if (typeof ArrayBuffer !== 'undefined' && typeof Uint8Array !== 'undefined' && typeof Uint32Array !== 'undefined') { device.littleEndian = _checkIsLittleEndian(); device.LITTLE_ENDIAN = device.littleEndian; } device.support32bit = (typeof ArrayBuffer !== "undefined" && typeof Uint8ClampedArray !== "undefined" && typeof Int32Array !== "undefined" && device.littleEndian !== null && _checkIsUint8ClampedImageData()); navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate; if (navigator.vibrate) { device.vibration = true; } } /** * Check Little or Big Endian system. * * @author Matt DesLauriers (@mattdesl) */ function _checkIsLittleEndian () { var a = new ArrayBuffer(4); var b = new Uint8Array(a); var c = new Uint32Array(a); b[0] = 0xa1; b[1] = 0xb2; b[2] = 0xc3; b[3] = 0xd4; if (c[0] == 0xd4c3b2a1) { return true; } if (c[0] == 0xa1b2c3d4) { return false; } else { // Could not determine endianness return null; } } /** * Test to see if ImageData uses CanvasPixelArray or Uint8ClampedArray. * * @author Matt DesLauriers (@mattdesl) */ function _checkIsUint8ClampedImageData () { if (typeof Uint8ClampedArray === "undefined") { return false; } var elem = document.createElement('canvas'); var ctx = elem.getContext('2d'); if (!ctx) { return false; } var image = ctx.createImageData(1, 1); return image.data instanceof Uint8ClampedArray; } /** * Check whether the host environment support 3D CSS. */ function _checkCSS3D () { var el = document.createElement('p'); var has3d; var transforms = { 'webkitTransform': '-webkit-transform', 'OTransform': '-o-transform', 'msTransform': '-ms-transform', 'MozTransform': '-moz-transform', 'transform': 'transform' }; // Add it to the body to get the computed style. document.body.insertBefore(el, null); for (var t in transforms) { if (el.style[t] !== undefined) { el.style[t] = "translate3d(1px,1px,1px)"; has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]); } } document.body.removeChild(el); device.css3D = (has3d !== undefined && has3d.length > 0 && has3d !== "none"); } // Run the checks _checkOS(); _checkAudio(); _checkBrowser(); _checkCSS3D(); _checkDevice(); _checkFeatures(); _checkFullScreenSupport(); _checkInput(); }; /** * Check whether the host environment can play audio. * * @method canPlayAudio * @memberof Phaser.Device.prototype * @param {string} type - One of 'mp3, 'ogg', 'm4a', 'wav', 'webm' or 'opus'. * @return {boolean} True if the given file type is supported by the browser, otherwise false. */ Phaser.Device.canPlayAudio = function (type) { if (type == 'mp3' && this.mp3) { return true; } else if (type == 'ogg' && (this.ogg || this.opus)) { return true; } else if (type == 'm4a' && this.m4a) { return true; } else if (type == 'opus' && this.opus) { return true; } else if (type == 'wav' && this.wav) { return true; } else if (type == 'webm' && this.webm) { return true; } return false; }; /** * Check whether the console is open. * Note that this only works in Firefox with Firebug and earlier versions of Chrome. * It used to work in Chrome, but then they removed the ability: {@link http://src.chromium.org/viewvc/blink?view=revision&revision=151136} * * @method isConsoleOpen * @memberof Phaser.Device.prototype */ Phaser.Device.isConsoleOpen = function () { if (window.console && window.console['firebug']) { return true; } if (window.console) { console.profile(); console.profileEnd(); if (console.clear) { console.clear(); } if (console['profiles']) { return console['profiles'].length > 0; } } return false; }; /** * Detect if the host is a an Android Stock browser. * This is available before the device "ready" event. * * Authors might want to scale down on effects and switch to the CANVAS rendering method on those devices. * * @example * var defaultRenderingMode = Phaser.Device.isAndroidStockBrowser() ? Phaser.CANVAS : Phaser.AUTO; * * @method isAndroidStockBrowser * @memberof Phaser.Device.prototype */ Phaser.Device.isAndroidStockBrowser = function () { var matches = window.navigator.userAgent.match(/Android.*AppleWebKit\/([\d.]+)/); return matches && matches[1] < 537; };