Skip to content

Commit

Permalink
PauseOnHidden
Browse files Browse the repository at this point in the history
  • Loading branch information
NathanBWaters authored Oct 27, 2020
1 parent b8e71db commit 1929251
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 3 deletions.
33 changes: 30 additions & 3 deletions xrextras/src/aframe/xr-components.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* globals XRExtras */
/* globals XRExtras, XR8 */

const {ensureXrAndExtras} = require('./ensure')

Expand Down Expand Up @@ -129,11 +129,12 @@ const xrComponents = () => {
const componentMap = {}

const addComponents = ({detail}) => {
detail.imageTargets.forEach(({name, metadata, properties}) => {
detail.imageTargets.forEach(({name, type, metadata, properties}) => {
const el = document.createElement(this.data.primitive)
el.setAttribute('id', `xrextras-imagetargets-${name}`)
el.setAttribute('name', name)
el.setAttribute('rotated', properties.isRotated ? 'true' : 'false')
el.setAttribute('type', type)
el.setAttribute('rotated', (properties && properties.isRotated) ? 'true' : 'false')
el.setAttribute(
'metadata', (typeof metadata === 'string') ? metadata : JSON.stringify(metadata)
)
Expand Down Expand Up @@ -667,6 +668,31 @@ const xrComponents = () => {
},
}

const pauseOnHiddenComponent = {
init() {
const scene = this.el.sceneEl
const onVisChange = () => {
if (document.visibilityState === 'visible') {
scene.play()
} else {
scene.pause()
}
}
XR8.addCameraPipelineModule({
name: 'pauseonhiddenaframe',
onAttach: () => {
document.addEventListener('visibilitychange', onVisChange)
},
onDetach: () => {
document.removeEventListener('visibilitychange', onVisChange)
},
})
},
remove() {
XR8.removeCameraPipelineModule('pauseonhiddenaframe')
},
}

const faceAnchorComponent = {
init() {
let id_ = null
Expand Down Expand Up @@ -1338,6 +1364,7 @@ const xrComponents = () => {
'xrextras-log-to-screen': logToScreenComponent,
'xrextras-pwa-installer': pwaInstallerComponent,
'xrextras-pause-on-blur': pauseOnBlurComponent,
'xrextras-pause-on-hidden': pauseOnHiddenComponent,
'xrextras-faceanchor': faceAnchorComponent,
'xrextras-resource': resourceComponent,
'xrextras-pbr-material': pbrMaterialComponent,
Expand Down
46 changes: 46 additions & 0 deletions xrextras/src/pauseonhidden/pauseonhidden.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/* globals XR8 */

// This pauses XR8 when the tab is hidden and calls resumes XR8 once the tab is visible again.
// Useful for when you want your camera feed and MediaRecorder audio to continue even if your
// desktop browser tab isn't focused. It has nearly identical functionality to PauseOnBlur for
// mobile.
// https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
let pauseOnHidden = null

function create() {
const onVisChange = () => {
if (document.visibilityState === 'visible') {
XR8.resume()
} else {
XR8.pause()
}
}

const pipelineModule = () => ({
name: 'pauseonhidden',
onAttach: () => {
document.addEventListener('visibilitychange', onVisChange)
},
onDetach: () => {
document.removeEventListener('visibilitychange', onVisChange)
},
})

return {
// Creates a camera pipeline module that, when installed, pauses the camera feed and processing
// when the tab is hidden and restarts again when it's visible
pipelineModule,
}
}

const PauseOnHiddenFactory = () => {
if (pauseOnHidden == null) {
pauseOnHidden = create()
}

return pauseOnHidden
}

module.exports = {
PauseOnHiddenFactory,
}
2 changes: 2 additions & 0 deletions xrextras/src/xrextras.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const {DebugWebViewsFactory} = require('./debugwebviews/debug-web-views.js')
const {FullWindowCanvasFactory} = require('./fullwindowcanvasmodule/full-window-canvas-module.js')
const {LoadingFactory} = require('./loadingmodule/loading-module.js')
const {PauseOnBlurFactory} = require('./pauseonblurmodule/pauseonblur.js')
const {PauseOnHiddenFactory} = require('./pauseonhiddenmodule/pauseonhidden.js')
const {PlayCanvasFactory} = require('./playcanvas/playcanvas.js')
const {PwaInstallerFactory} = require('./pwainstallermodule/pwa-installer-module.js')
const {RuntimeErrorFactory} = require('./runtimeerrormodule/runtime-error-module.js')
Expand All @@ -21,6 +22,7 @@ module.exports = {
FullWindowCanvas: FullWindowCanvasFactory(),
Loading: LoadingFactory(),
PauseOnBlur: PauseOnBlurFactory(),
PauseOnHidden: PauseOnHiddenFactory(),
PlayCanvas: PlayCanvasFactory(),
PwaInstaller: PwaInstallerFactory(),
RuntimeError: RuntimeErrorFactory(),
Expand Down

0 comments on commit 1929251

Please sign in to comment.