|
After Width: | Height: | Size: 668 B |
|
After Width: | Height: | Size: 557 B |
@ -0,0 +1,4 @@ |
||||
.mejs__vrview-button > button, |
||||
.mejs-vrview-button > button { |
||||
background: url('cardboard.svg') no-repeat 0 4px; |
||||
} |
||||
@ -0,0 +1,383 @@ |
||||
/*! |
||||
* MediaElement.js |
||||
* http://www.mediaelementjs.com/
|
||||
* |
||||
* Wrapper that mimics native HTML5 MediaElement (audio and video) |
||||
* using a variety of technologies (pure JavaScript, Flash, iframe) |
||||
* |
||||
* Copyright 2010-2017, John Dyer (http://j.hn/)
|
||||
* License: MIT |
||||
* |
||||
*/(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){ |
||||
'use strict'; |
||||
|
||||
var VrAPI = { |
||||
isMediaStarted: false, |
||||
|
||||
isMediaLoaded: false, |
||||
|
||||
creationQueue: [], |
||||
|
||||
prepareSettings: function prepareSettings(settings) { |
||||
if (VrAPI.isLoaded) { |
||||
VrAPI.createInstance(settings); |
||||
} else { |
||||
VrAPI.loadScript(settings); |
||||
VrAPI.creationQueue.push(settings); |
||||
} |
||||
}, |
||||
|
||||
loadScript: function loadScript(settings) { |
||||
if (!VrAPI.isMediaStarted) { |
||||
|
||||
if (typeof VRView !== 'undefined') { |
||||
VrAPI.createInstance(settings); |
||||
} else { |
||||
var script = document.createElement('script'), |
||||
firstScriptTag = document.getElementsByTagName('script')[0]; |
||||
|
||||
var done = false; |
||||
|
||||
settings.options.path = typeof settings.options.path === 'string' ? settings.options.path : 'https://googlevr.github.io/vrview/build/vrview.min.js'; |
||||
|
||||
script.src = settings.options.path; |
||||
|
||||
script.onload = script.onreadystatechange = function () { |
||||
if (!done && (!this.readyState || this.readyState === undefined || this.readyState === 'loaded' || this.readyState === 'complete')) { |
||||
done = true; |
||||
VrAPI.mediaReady(); |
||||
script.onload = script.onreadystatechange = null; |
||||
} |
||||
}; |
||||
|
||||
firstScriptTag.parentNode.insertBefore(script, firstScriptTag); |
||||
} |
||||
VrAPI.isMediaStarted = true; |
||||
} |
||||
}, |
||||
|
||||
mediaReady: function mediaReady() { |
||||
VrAPI.isLoaded = true; |
||||
VrAPI.isMediaLoaded = true; |
||||
|
||||
while (VrAPI.creationQueue.length > 0) { |
||||
var settings = VrAPI.creationQueue.pop(); |
||||
VrAPI.createInstance(settings); |
||||
} |
||||
}, |
||||
|
||||
createInstance: function createInstance(settings) { |
||||
var player = new VRView.Player('#' + settings.id, settings.options); |
||||
window['__ready__' + settings.id](player); |
||||
} |
||||
}; |
||||
|
||||
var VrRenderer = { |
||||
name: 'vrview', |
||||
|
||||
options: { |
||||
prefix: 'vrview' |
||||
}, |
||||
|
||||
canPlayType: function canPlayType(type) { |
||||
return ~['video/mp4', 'application/x-mpegurl', 'vnd.apple.mpegurl', 'application/dash+xml'].indexOf(type.toLowerCase()); |
||||
}, |
||||
|
||||
create: function create(mediaElement, options, mediaFiles) { |
||||
var stack = [], |
||||
vr = {}, |
||||
readyState = 4; |
||||
|
||||
var vrPlayer = null, |
||||
paused = true, |
||||
volume = 1, |
||||
oldVolume = volume, |
||||
bufferedTime = 0, |
||||
ended = false, |
||||
duration = 0, |
||||
url = ''; |
||||
|
||||
vr.options = options; |
||||
vr.id = mediaElement.id + '_' + options.prefix; |
||||
vr.mediaElement = mediaElement; |
||||
|
||||
var props = mejs.html5media.properties, |
||||
assignGettersSetters = function assignGettersSetters(propName) { |
||||
|
||||
var capName = propName.substring(0, 1).toUpperCase() + propName.substring(1); |
||||
|
||||
vr['get' + capName] = function () { |
||||
if (vrPlayer !== null) { |
||||
var value = null; |
||||
|
||||
switch (propName) { |
||||
case 'currentTime': |
||||
return vrPlayer.getCurrentTime(); |
||||
case 'duration': |
||||
return vrPlayer.getDuration(); |
||||
case 'volume': |
||||
volume = vrPlayer.getVolume(); |
||||
return volume; |
||||
case 'muted': |
||||
return volume === 0; |
||||
case 'paused': |
||||
paused = vrPlayer.isPaused; |
||||
return paused; |
||||
case 'ended': |
||||
return ended; |
||||
case 'src': |
||||
return url; |
||||
case 'buffered': |
||||
return { |
||||
start: function start() { |
||||
return 0; |
||||
}, |
||||
end: function end() { |
||||
return bufferedTime * duration; |
||||
}, |
||||
length: 1 |
||||
}; |
||||
case 'readyState': |
||||
return readyState; |
||||
} |
||||
|
||||
return value; |
||||
} else { |
||||
return null; |
||||
} |
||||
}; |
||||
|
||||
vr['set' + capName] = function (value) { |
||||
|
||||
if (vrPlayer !== null) { |
||||
switch (propName) { |
||||
|
||||
case 'src': |
||||
var _url = typeof value === 'string' ? value : value[0].src; |
||||
vrPlayer.setContentInfo({ video: _url }); |
||||
break; |
||||
|
||||
case 'currentTime': |
||||
vrPlayer.setCurrentTime(value); |
||||
setTimeout(function () { |
||||
var event = mejs.Utils.createEvent('timeupdate', vr); |
||||
mediaElement.dispatchEvent(event); |
||||
}, 50); |
||||
break; |
||||
|
||||
case 'volume': |
||||
vrPlayer.setVolume(value); |
||||
setTimeout(function () { |
||||
var event = mejs.Utils.createEvent('volumechange', vr); |
||||
mediaElement.dispatchEvent(event); |
||||
}, 50); |
||||
break; |
||||
case 'muted': |
||||
volume = value ? 0 : oldVolume; |
||||
vrPlayer.setVolume(volume); |
||||
setTimeout(function () { |
||||
var event = mejs.Utils.createEvent('volumechange', vr); |
||||
mediaElement.dispatchEvent(event); |
||||
}, 50); |
||||
break; |
||||
case 'readyState': |
||||
var event = mejs.Utils.createEvent('canplay', vr); |
||||
mediaElement.dispatchEvent(event); |
||||
break; |
||||
default: |
||||
console.log('VRView ' + vr.id, propName, 'UNSUPPORTED property'); |
||||
break; |
||||
} |
||||
} else { |
||||
stack.push({ type: 'set', propName: propName, value: value }); |
||||
} |
||||
}; |
||||
}; |
||||
for (var i = 0, il = props.length; i < il; i++) { |
||||
assignGettersSetters(props[i]); |
||||
} |
||||
|
||||
var methods = mejs.html5media.methods, |
||||
assignMethods = function assignMethods(methodName) { |
||||
vr[methodName] = function () { |
||||
|
||||
if (vrPlayer !== null) { |
||||
switch (methodName) { |
||||
case 'play': |
||||
return vrPlayer.play(); |
||||
case 'pause': |
||||
return vrPlayer.pause(); |
||||
case 'load': |
||||
return null; |
||||
|
||||
} |
||||
} else { |
||||
stack.push({ type: 'call', methodName: methodName }); |
||||
} |
||||
}; |
||||
}; |
||||
for (var _i = 0, _il = methods.length; _i < _il; _i++) { |
||||
assignMethods(methods[_i]); |
||||
} |
||||
|
||||
var vrContainer = document.createElement('div'); |
||||
vrContainer.setAttribute('id', vr.id); |
||||
vrContainer.style.width = '100%'; |
||||
vrContainer.style.height = '100%'; |
||||
|
||||
window['__ready__' + vr.id] = function (_vrPlayer) { |
||||
|
||||
mediaElement.vrPlayer = vrPlayer = _vrPlayer; |
||||
|
||||
var iframe = vrContainer.querySelector('iframe'); |
||||
iframe.style.width = '100%'; |
||||
iframe.style.height = '100%'; |
||||
|
||||
if (stack.length) { |
||||
for (var _i2 = 0, _il2 = stack.length; _i2 < _il2; _i2++) { |
||||
|
||||
var stackItem = stack[_i2]; |
||||
|
||||
if (stackItem.type === 'set') { |
||||
var propName = stackItem.propName, |
||||
capName = '' + propName.substring(0, 1).toUpperCase() + propName.substring(1); |
||||
|
||||
vr['set' + capName](stackItem.value); |
||||
} else if (stackItem.type === 'call') { |
||||
vr[stackItem.methodName](); |
||||
} |
||||
} |
||||
} |
||||
|
||||
vrPlayer.on('ready', function () { |
||||
|
||||
var events = mejs.html5media.events.concat(['mouseover', 'mouseout']); |
||||
|
||||
var _loop = function _loop(_i3, _il3) { |
||||
vrPlayer.on(events[_i3], function () { |
||||
var event = mejs.Utils.createEvent(events[_i3], vr); |
||||
mediaElement.dispatchEvent(event); |
||||
}); |
||||
}; |
||||
|
||||
for (var _i3 = 0, _il3 = events.length; _i3 < _il3; _i3++) { |
||||
_loop(_i3, _il3); |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
mediaElement.originalNode.parentNode.insertBefore(vrContainer, mediaElement.originalNode); |
||||
mediaElement.originalNode.style.display = 'none'; |
||||
|
||||
if (mediaElement.originalNode.getAttribute('data-360video-stereo') === 'false') { |
||||
options.vrIsStereo = false; |
||||
} |
||||
|
||||
var vrSettings = { |
||||
path: options.vrPath, |
||||
is_stereo: options.vrIsStereo, |
||||
is_autopan_off: options.vrIsAutopanOff, |
||||
is_debug: options.vrDebug, |
||||
default_yaw: options.vrDefaultYaw, |
||||
is_yaw_only: options.vrIsYawOnly, |
||||
loop: options.loop |
||||
}; |
||||
|
||||
if (mediaFiles && mediaFiles.length > 0) { |
||||
for (var _i4 = 0, _il4 = mediaFiles.length; _i4 < _il4; _i4++) { |
||||
if (mejs.Renderers.renderers[options.prefix].canPlayType(mediaFiles[_i4].type)) { |
||||
vrSettings.video = mediaFiles[_i4].src; |
||||
vrSettings.width = '100%'; |
||||
vrSettings.height = '100%'; |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
|
||||
VrAPI.prepareSettings({ |
||||
options: vrSettings, |
||||
id: vr.id |
||||
}); |
||||
|
||||
vr.hide = function () { |
||||
vr.pause(); |
||||
if (vrPlayer) { |
||||
vrContainer.style.display = 'none'; |
||||
} |
||||
}; |
||||
|
||||
vr.setSize = function () {}; |
||||
|
||||
vr.show = function () { |
||||
if (vrPlayer) { |
||||
vrContainer.style.display = ''; |
||||
} |
||||
}; |
||||
|
||||
return vr; |
||||
} |
||||
}; |
||||
|
||||
mejs.Renderers.add(VrRenderer); |
||||
|
||||
Object.assign(mejs.MepDefaults, { |
||||
vrPath: null, |
||||
|
||||
vrIsStereo: true, |
||||
|
||||
vrIsAutopanOff: true, |
||||
|
||||
vrDebug: false, |
||||
|
||||
vrDefaultYaw: 0, |
||||
|
||||
vrIsYawOnly: false |
||||
}); |
||||
|
||||
Object.assign(MediaElementPlayer.prototype, { |
||||
buildvrview: function buildvrview(player, controls, layers, media) { |
||||
|
||||
var t = this; |
||||
|
||||
if (!t.isVideo || t.isVideo && t.media.rendererName !== null && !t.media.rendererName.match(/(native\_(dash|hls)|html5)/)) { |
||||
return; |
||||
} |
||||
|
||||
if (player.node.getAttribute('data-360video') !== 'true') { |
||||
return; |
||||
} |
||||
|
||||
var button = document.createElement('div'); |
||||
|
||||
player.detectFullscreenMode(); |
||||
|
||||
button.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'vrview-button'; |
||||
button.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="VR" aria-label="VR" tabindex="0"></button>'; |
||||
button.addEventListener('click', function () { |
||||
var isFullScreen = mejs.Features.HAS_TRUE_NATIVE_FULLSCREEN && mejs.Features.IS_FULLSCREEN || player.isFullScreen; |
||||
|
||||
if (isFullScreen) { |
||||
player.exitFullScreen(); |
||||
} else { |
||||
player.enterFullScreen(); |
||||
} |
||||
}); |
||||
|
||||
t.globalBind('keydown', function (e) { |
||||
var key = e.which || e.keyCode || 0; |
||||
if (key === 27 && (mejs.Features.HAS_TRUE_NATIVE_FULLSCREEN && mejs.Features.IS_FULLSCREEN || player.isFullScreen)) { |
||||
player.exitFullScreen(); |
||||
} |
||||
}); |
||||
|
||||
// t.addControlElement(button, 'vrview');
|
||||
|
||||
var url = media.getSrc(), |
||||
mediaFiles = [{ src: url, type: mejs.Utils.getTypeFromFile(url) }], |
||||
renderInfo = mejs.Renderers.select(mediaFiles, ['vrview']); |
||||
|
||||
media.changeRenderer(renderInfo.rendererName, mediaFiles); |
||||
} |
||||
}); |
||||
|
||||
},{}]},{},[1]); |
||||
@ -0,0 +1 @@ |
||||
.mejs-vrview-button>button,.mejs__vrview-button>button{background:url(cardboard.svg) no-repeat 0 4px} |
||||
@ -0,0 +1,27 @@ |
||||
Want to contribute? Great! First, read this page (including the small print at the end). |
||||
|
||||
### Before you contribute |
||||
Before we can use your code, you must sign the |
||||
[Google Individual Contributor License Agreement] |
||||
(https://cla.developers.google.com/about/google-individual) |
||||
(CLA), which you can do online. The CLA is necessary mainly because you own the |
||||
copyright to your changes, even after your contribution becomes part of our |
||||
codebase, so we need your permission to use and distribute your code. We also |
||||
need to be sure of various other things—for instance that you'll tell us if you |
||||
know that your code infringes on other people's patents. You don't have to sign |
||||
the CLA until after you've submitted your code for review and a member has |
||||
approved it, but you must do it before we can put your code into our codebase. |
||||
Before you start working on a larger contribution, you should get in touch with |
||||
us first through the issue tracker with your idea so that we can help out and |
||||
possibly guide you. Coordinating up front makes it much easier to avoid |
||||
frustration later on. |
||||
|
||||
### Code reviews |
||||
All submissions, including submissions by project members, require review. We |
||||
use GitHub pull requests for this purpose. |
||||
|
||||
### The small print |
||||
Contributions made by corporations are covered by a different agreement than |
||||
the one above, the |
||||
[Software Grant and Corporate Contributor License Agreement] |
||||
(https://cla.developers.google.com/about/google-corporate). |
||||
@ -0,0 +1,202 @@ |
||||
|
||||
Apache License |
||||
Version 2.0, January 2004 |
||||
http://www.apache.org/licenses/ |
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION |
||||
|
||||
1. Definitions. |
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction, |
||||
and distribution as defined by Sections 1 through 9 of this document. |
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by |
||||
the copyright owner that is granting the License. |
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all |
||||
other entities that control, are controlled by, or are under common |
||||
control with that entity. For the purposes of this definition, |
||||
"control" means (i) the power, direct or indirect, to cause the |
||||
direction or management of such entity, whether by contract or |
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the |
||||
outstanding shares, or (iii) beneficial ownership of such entity. |
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity |
||||
exercising permissions granted by this License. |
||||
|
||||
"Source" form shall mean the preferred form for making modifications, |
||||
including but not limited to software source code, documentation |
||||
source, and configuration files. |
||||
|
||||
"Object" form shall mean any form resulting from mechanical |
||||
transformation or translation of a Source form, including but |
||||
not limited to compiled object code, generated documentation, |
||||
and conversions to other media types. |
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or |
||||
Object form, made available under the License, as indicated by a |
||||
copyright notice that is included in or attached to the work |
||||
(an example is provided in the Appendix below). |
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object |
||||
form, that is based on (or derived from) the Work and for which the |
||||
editorial revisions, annotations, elaborations, or other modifications |
||||
represent, as a whole, an original work of authorship. For the purposes |
||||
of this License, Derivative Works shall not include works that remain |
||||
separable from, or merely link (or bind by name) to the interfaces of, |
||||
the Work and Derivative Works thereof. |
||||
|
||||
"Contribution" shall mean any work of authorship, including |
||||
the original version of the Work and any modifications or additions |
||||
to that Work or Derivative Works thereof, that is intentionally |
||||
submitted to Licensor for inclusion in the Work by the copyright owner |
||||
or by an individual or Legal Entity authorized to submit on behalf of |
||||
the copyright owner. For the purposes of this definition, "submitted" |
||||
means any form of electronic, verbal, or written communication sent |
||||
to the Licensor or its representatives, including but not limited to |
||||
communication on electronic mailing lists, source code control systems, |
||||
and issue tracking systems that are managed by, or on behalf of, the |
||||
Licensor for the purpose of discussing and improving the Work, but |
||||
excluding communication that is conspicuously marked or otherwise |
||||
designated in writing by the copyright owner as "Not a Contribution." |
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity |
||||
on behalf of whom a Contribution has been received by Licensor and |
||||
subsequently incorporated within the Work. |
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of |
||||
this License, each Contributor hereby grants to You a perpetual, |
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
||||
copyright license to reproduce, prepare Derivative Works of, |
||||
publicly display, publicly perform, sublicense, and distribute the |
||||
Work and such Derivative Works in Source or Object form. |
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of |
||||
this License, each Contributor hereby grants to You a perpetual, |
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
||||
(except as stated in this section) patent license to make, have made, |
||||
use, offer to sell, sell, import, and otherwise transfer the Work, |
||||
where such license applies only to those patent claims licensable |
||||
by such Contributor that are necessarily infringed by their |
||||
Contribution(s) alone or by combination of their Contribution(s) |
||||
with the Work to which such Contribution(s) was submitted. If You |
||||
institute patent litigation against any entity (including a |
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work |
||||
or a Contribution incorporated within the Work constitutes direct |
||||
or contributory patent infringement, then any patent licenses |
||||
granted to You under this License for that Work shall terminate |
||||
as of the date such litigation is filed. |
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the |
||||
Work or Derivative Works thereof in any medium, with or without |
||||
modifications, and in Source or Object form, provided that You |
||||
meet the following conditions: |
||||
|
||||
(a) You must give any other recipients of the Work or |
||||
Derivative Works a copy of this License; and |
||||
|
||||
(b) You must cause any modified files to carry prominent notices |
||||
stating that You changed the files; and |
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works |
||||
that You distribute, all copyright, patent, trademark, and |
||||
attribution notices from the Source form of the Work, |
||||
excluding those notices that do not pertain to any part of |
||||
the Derivative Works; and |
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its |
||||
distribution, then any Derivative Works that You distribute must |
||||
include a readable copy of the attribution notices contained |
||||
within such NOTICE file, excluding those notices that do not |
||||
pertain to any part of the Derivative Works, in at least one |
||||
of the following places: within a NOTICE text file distributed |
||||
as part of the Derivative Works; within the Source form or |
||||
documentation, if provided along with the Derivative Works; or, |
||||
within a display generated by the Derivative Works, if and |
||||
wherever such third-party notices normally appear. The contents |
||||
of the NOTICE file are for informational purposes only and |
||||
do not modify the License. You may add Your own attribution |
||||
notices within Derivative Works that You distribute, alongside |
||||
or as an addendum to the NOTICE text from the Work, provided |
||||
that such additional attribution notices cannot be construed |
||||
as modifying the License. |
||||
|
||||
You may add Your own copyright statement to Your modifications and |
||||
may provide additional or different license terms and conditions |
||||
for use, reproduction, or distribution of Your modifications, or |
||||
for any such Derivative Works as a whole, provided Your use, |
||||
reproduction, and distribution of the Work otherwise complies with |
||||
the conditions stated in this License. |
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise, |
||||
any Contribution intentionally submitted for inclusion in the Work |
||||
by You to the Licensor shall be under the terms and conditions of |
||||
this License, without any additional terms or conditions. |
||||
Notwithstanding the above, nothing herein shall supersede or modify |
||||
the terms of any separate license agreement you may have executed |
||||
with Licensor regarding such Contributions. |
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade |
||||
names, trademarks, service marks, or product names of the Licensor, |
||||
except as required for reasonable and customary use in describing the |
||||
origin of the Work and reproducing the content of the NOTICE file. |
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or |
||||
agreed to in writing, Licensor provides the Work (and each |
||||
Contributor provides its Contributions) on an "AS IS" BASIS, |
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or |
||||
implied, including, without limitation, any warranties or conditions |
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A |
||||
PARTICULAR PURPOSE. You are solely responsible for determining the |
||||
appropriateness of using or redistributing the Work and assume any |
||||
risks associated with Your exercise of permissions under this License. |
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory, |
||||
whether in tort (including negligence), contract, or otherwise, |
||||
unless required by applicable law (such as deliberate and grossly |
||||
negligent acts) or agreed to in writing, shall any Contributor be |
||||
liable to You for damages, including any direct, indirect, special, |
||||
incidental, or consequential damages of any character arising as a |
||||
result of this License or out of the use or inability to use the |
||||
Work (including but not limited to damages for loss of goodwill, |
||||
work stoppage, computer failure or malfunction, or any and all |
||||
other commercial damages or losses), even if such Contributor |
||||
has been advised of the possibility of such damages. |
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing |
||||
the Work or Derivative Works thereof, You may choose to offer, |
||||
and charge a fee for, acceptance of support, warranty, indemnity, |
||||
or other liability obligations and/or rights consistent with this |
||||
License. However, in accepting such obligations, You may act only |
||||
on Your own behalf and on Your sole responsibility, not on behalf |
||||
of any other Contributor, and only if You agree to indemnify, |
||||
defend, and hold each Contributor harmless for any liability |
||||
incurred by, or claims asserted against, such Contributor by reason |
||||
of your accepting any such warranty or additional liability. |
||||
|
||||
END OF TERMS AND CONDITIONS |
||||
|
||||
APPENDIX: How to apply the Apache License to your work. |
||||
|
||||
To apply the Apache License to your work, attach the following |
||||
boilerplate notice, with the fields enclosed by brackets "[]" |
||||
replaced with your own identifying information. (Don't include |
||||
the brackets!) The text should be enclosed in the appropriate |
||||
comment syntax for the file format. We also recommend that a |
||||
file or class name and description of purpose be included on the |
||||
same "printed page" as the copyright notice for easier |
||||
identification within third-party archives. |
||||
|
||||
Copyright 2015 Google Inc |
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
you may not use this file except in compliance with the License. |
||||
You may obtain a copy of the License at |
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
||||
Unless required by applicable law or agreed to in writing, software |
||||
distributed under the License is distributed on an "AS IS" BASIS, |
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
See the License for the specific language governing permissions and |
||||
limitations under the License. |
||||
@ -0,0 +1,73 @@ |
||||
# VR View |
||||
|
||||
[](https://travis-ci.org/googlevr/vrview) |
||||
[](https://david-dm.org/googlevr/vrview) |
||||
[](https://david-dm.org/googlevr/vrview?type=dev) |
||||
|
||||
VR View allows you to embed 360 degree VR media into websites on desktop and |
||||
mobile. For more information, please read the documentation available at |
||||
<http://developers.google.com/cardboard/vrview>. |
||||
|
||||
# Configuration |
||||
|
||||
A complete list of VR View parameters can be found in the table below. |
||||
|
||||
Name | Type | Parameter description |
||||
---- | ---- | --------------------- |
||||
`video` | String | URL to a 360° video file or an adaptive streaming manifest file (.mpd or .m3u8). Exactly one of video or image is required. |
||||
`image` | String | URL to a 360° image file. Exactly one of video or image is required. |
||||
`width` | String | String value for the iframe's width attribute. |
||||
`height` | String | String value for the iframe's height attribute. |
||||
`preview` | String | (Optional) URL to a preview image for a 360° image file. |
||||
`is_stereo` | Boolean | (Optional) Indicates whether the content at the image or video URL is stereo or not. |
||||
`is_debug` | Boolean | (Optional) When true, turns on debug features like rendering hotspots ad showing the FPS meter. |
||||
`is_vr_off` | Boolean | (Optional) When true, disables the VR mode button. |
||||
`is_autopan_off` | Boolean | (Optional) When true, disables the autopan introduction on desktop. |
||||
`default_yaw` | Number | (Optional) Numeric angle in degrees of the initial heading for the 360° content. By default, the camera points at the center of the underlying image. |
||||
`is_yaw_only` | Boolean | (Optional) When true, prevents roll and pitch. This is intended for stereo panoramas. |
||||
`loop` | Boolean | (Optional) When false, stops the loop in the video. |
||||
`hide_fullscreen_button` | Boolean | (Optional) When true, the fullscreen button contained inside the VR View iframe will be hidden. This parameter is useful if the user wants to use VR View's fullscreen workflow (via `vrView.setFullscreen()` callback) with an element outside the iframe. |
||||
`volume` | Number | (Optional) The initial volume of the media; it ranges between 0 and 1; zero equals muted. |
||||
`muted` | Boolean | (Optional) When true, mutes the sound of the video. |
||||
|
||||
# Downloading files |
||||
|
||||
The `gh-pages` branch hosts the built files. Download these instead of linking to these |
||||
locations, since the directory structure of the repo may change in the future. |
||||
|
||||
* [https://googlevr.github.io/vrview/build/vrview.js](https://googlevr.github.io/vrview/build/vrview.js) |
||||
* [https://googlevr.github.io/vrview/build/vrview.min.js](https://googlevr.github.io/vrview/build/vrview.min.js) |
||||
* [https://googlevr.github.io/vrview/build/embed.js](https://googlevr.github.io/vrview/build/embed.js) |
||||
* [https://googlevr.github.io/vrview/build/embed.min.js](https://googlevr.github.io/vrview/build/embed.min.js) |
||||
* [https://googlevr.github.io/vrview/build/three.js](https://googlevr.github.io/vrview/build/three.js) |
||||
* [https://googlevr.github.io/vrview/build/three.min.js](https://googlevr.github.io/vrview/build/three.min.js) |
||||
* [https://googlevr.github.io/vrview/build/device-motion-sender.min.js](https://googlevr.github.io/vrview/build/device-motion-sender.min.js) |
||||
|
||||
# Building |
||||
|
||||
This project uses `browserify` to manage dependencies and build. `watchify` is |
||||
especially convenient to preserve the write-and-reload model of development. |
||||
This package lives in the npm index. |
||||
|
||||
**Current builds are not working on Windows ([#261](https://github.com/googlevr/vrview/issues/261))** |
||||
|
||||
Relevant commands: |
||||
```shell |
||||
$ npm run build # builds the iframe embed and JS API (full and minified versions). |
||||
$ npm run build-api # builds the JS API (full and minified versions). |
||||
|
||||
$ npm run build-min # builds the minified iframe embed. |
||||
$ npm run build-dev # builds the full iframe embed. |
||||
|
||||
$ npm run build-api-min # builds the minified JS API. |
||||
$ npm run build-api-dev # builds the full JS API. |
||||
|
||||
$ npm run watch # auto-builds the iframe embed whenever any source changes. |
||||
$ npm run watch-api # auto-builds the JS API code whenever any source changes. |
||||
``` |
||||
As of 2017/06/13, the pre-built js artifacts have been removed from source |
||||
control. You must run `npm run build` prior to trying any of the examples. |
||||
|
||||
# Release Notes |
||||
## 2.0.2 |
||||
Close vulnerability with unsanitized user strings being injected into DOM |
||||
@ -0,0 +1 @@ |
||||
function DeviceMotionSender(){if(!this.isIOS_()){return}window.addEventListener("devicemotion",this.onDeviceMotion_.bind(this),false);this.iframes=document.querySelectorAll("iframe.vrview")}DeviceMotionSender.prototype.onDeviceMotion_=function(e){var message={type:"DeviceMotion",deviceMotionEvent:this.cloneDeviceMotionEvent_(e)};for(var i=0;i<this.iframes.length;i++){var iframe=this.iframes[i];var iframeWindow=iframe.contentWindow;if(this.isCrossDomainIframe_(iframe)){iframeWindow.postMessage(message,"*")}}};DeviceMotionSender.prototype.cloneDeviceMotionEvent_=function(e){return{acceleration:{x:e.acceleration.x,y:e.acceleration.y,z:e.acceleration.z},accelerationIncludingGravity:{x:e.accelerationIncludingGravity.x,y:e.accelerationIncludingGravity.y,z:e.accelerationIncludingGravity.z},rotationRate:{alpha:e.rotationRate.alpha,beta:e.rotationRate.beta,gamma:e.rotationRate.gamma},interval:e.interval}};DeviceMotionSender.prototype.isIOS_=function(){return/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream};DeviceMotionSender.prototype.isCrossDomainIframe_=function(iframe){var html=null;try{var doc=iframe.contentDocument||iframe.contentWindow.document;html=doc.body.innerHTML}catch(err){}return html===null};var dms=new DeviceMotionSender; |
||||
@ -0,0 +1,995 @@ |
||||
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.VRView = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){ |
||||
'use strict'; |
||||
|
||||
var has = Object.prototype.hasOwnProperty; |
||||
|
||||
//
|
||||
// We store our EE objects in a plain object whose properties are event names.
|
||||
// If `Object.create(null)` is not supported we prefix the event names with a
|
||||
// `~` to make sure that the built-in object properties are not overridden or
|
||||
// used as an attack vector.
|
||||
// We also assume that `Object.create(null)` is available when the event name
|
||||
// is an ES6 Symbol.
|
||||
//
|
||||
var prefix = typeof Object.create !== 'function' ? '~' : false; |
||||
|
||||
/** |
||||
* Representation of a single EventEmitter function. |
||||
* |
||||
* @param {Function} fn Event handler to be called. |
||||
* @param {Mixed} context Context for function execution. |
||||
* @param {Boolean} [once=false] Only emit once |
||||
* @api private |
||||
*/ |
||||
function EE(fn, context, once) { |
||||
this.fn = fn; |
||||
this.context = context; |
||||
this.once = once || false; |
||||
} |
||||
|
||||
/** |
||||
* Minimal EventEmitter interface that is molded against the Node.js |
||||
* EventEmitter interface. |
||||
* |
||||
* @constructor |
||||
* @api public |
||||
*/ |
||||
function EventEmitter() { /* Nothing to set */ } |
||||
|
||||
/** |
||||
* Hold the assigned EventEmitters by name. |
||||
* |
||||
* @type {Object} |
||||
* @private |
||||
*/ |
||||
EventEmitter.prototype._events = undefined; |
||||
|
||||
/** |
||||
* Return an array listing the events for which the emitter has registered |
||||
* listeners. |
||||
* |
||||
* @returns {Array} |
||||
* @api public |
||||
*/ |
||||
EventEmitter.prototype.eventNames = function eventNames() { |
||||
var events = this._events |
||||
, names = [] |
||||
, name; |
||||
|
||||
if (!events) return names; |
||||
|
||||
for (name in events) { |
||||
if (has.call(events, name)) names.push(prefix ? name.slice(1) : name); |
||||
} |
||||
|
||||
if (Object.getOwnPropertySymbols) { |
||||
return names.concat(Object.getOwnPropertySymbols(events)); |
||||
} |
||||
|
||||
return names; |
||||
}; |
||||
|
||||
/** |
||||
* Return a list of assigned event listeners. |
||||
* |
||||
* @param {String} event The events that should be listed. |
||||
* @param {Boolean} exists We only need to know if there are listeners. |
||||
* @returns {Array|Boolean} |
||||
* @api public |
||||
*/ |
||||
EventEmitter.prototype.listeners = function listeners(event, exists) { |
||||
var evt = prefix ? prefix + event : event |
||||
, available = this._events && this._events[evt]; |
||||
|
||||
if (exists) return !!available; |
||||
if (!available) return []; |
||||
if (available.fn) return [available.fn]; |
||||
|
||||
for (var i = 0, l = available.length, ee = new Array(l); i < l; i++) { |
||||
ee[i] = available[i].fn; |
||||
} |
||||
|
||||
return ee; |
||||
}; |
||||
|
||||
/** |
||||
* Emit an event to all registered event listeners. |
||||
* |
||||
* @param {String} event The name of the event. |
||||
* @returns {Boolean} Indication if we've emitted an event. |
||||
* @api public |
||||
*/ |
||||
EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) { |
||||
var evt = prefix ? prefix + event : event; |
||||
|
||||
if (!this._events || !this._events[evt]) return false; |
||||
|
||||
var listeners = this._events[evt] |
||||
, len = arguments.length |
||||
, args |
||||
, i; |
||||
|
||||
if ('function' === typeof listeners.fn) { |
||||
if (listeners.once) this.removeListener(event, listeners.fn, undefined, true); |
||||
|
||||
switch (len) { |
||||
case 1: return listeners.fn.call(listeners.context), true; |
||||
case 2: return listeners.fn.call(listeners.context, a1), true; |
||||
case 3: return listeners.fn.call(listeners.context, a1, a2), true; |
||||
case 4: return listeners.fn.call(listeners.context, a1, a2, a3), true; |
||||
case 5: return listeners.fn.call(listeners.context, a1, a2, a3, a4), true; |
||||
case 6: return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true; |
||||
} |
||||
|
||||
for (i = 1, args = new Array(len -1); i < len; i++) { |
||||
args[i - 1] = arguments[i]; |
||||
} |
||||
|
||||
listeners.fn.apply(listeners.context, args); |
||||
} else { |
||||
var length = listeners.length |
||||
, j; |
||||
|
||||
for (i = 0; i < length; i++) { |
||||
if (listeners[i].once) this.removeListener(event, listeners[i].fn, undefined, true); |
||||
|
||||
switch (len) { |
||||
case 1: listeners[i].fn.call(listeners[i].context); break; |
||||
case 2: listeners[i].fn.call(listeners[i].context, a1); break; |
||||
case 3: listeners[i].fn.call(listeners[i].context, a1, a2); break; |
||||
default: |
||||
if (!args) for (j = 1, args = new Array(len -1); j < len; j++) { |
||||
args[j - 1] = arguments[j]; |
||||
} |
||||
|
||||
listeners[i].fn.apply(listeners[i].context, args); |
||||
} |
||||
} |
||||
} |
||||
|
||||
return true; |
||||
}; |
||||
|
||||
/** |
||||
* Register a new EventListener for the given event. |
||||
* |
||||
* @param {String} event Name of the event. |
||||
* @param {Function} fn Callback function. |
||||
* @param {Mixed} [context=this] The context of the function. |
||||
* @api public |
||||
*/ |
||||
EventEmitter.prototype.on = function on(event, fn, context) { |
||||
var listener = new EE(fn, context || this) |
||||
, evt = prefix ? prefix + event : event; |
||||
|
||||
if (!this._events) this._events = prefix ? {} : Object.create(null); |
||||
if (!this._events[evt]) this._events[evt] = listener; |
||||
else { |
||||
if (!this._events[evt].fn) this._events[evt].push(listener); |
||||
else this._events[evt] = [ |
||||
this._events[evt], listener |
||||
]; |
||||
} |
||||
|
||||
return this; |
||||
}; |
||||
|
||||
/** |
||||
* Add an EventListener that's only called once. |
||||
* |
||||
* @param {String} event Name of the event. |
||||
* @param {Function} fn Callback function. |
||||
* @param {Mixed} [context=this] The context of the function. |
||||
* @api public |
||||
*/ |
||||
EventEmitter.prototype.once = function once(event, fn, context) { |
||||
var listener = new EE(fn, context || this, true) |
||||
, evt = prefix ? prefix + event : event; |
||||
|
||||
if (!this._events) this._events = prefix ? {} : Object.create(null); |
||||
if (!this._events[evt]) this._events[evt] = listener; |
||||
else { |
||||
if (!this._events[evt].fn) this._events[evt].push(listener); |
||||
else this._events[evt] = [ |
||||
this._events[evt], listener |
||||
]; |
||||
} |
||||
|
||||
return this; |
||||
}; |
||||
|
||||
/** |
||||
* Remove event listeners. |
||||
* |
||||
* @param {String} event The event we want to remove. |
||||
* @param {Function} fn The listener that we need to find. |
||||
* @param {Mixed} context Only remove listeners matching this context. |
||||
* @param {Boolean} once Only remove once listeners. |
||||
* @api public |
||||
*/ |
||||
EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) { |
||||
var evt = prefix ? prefix + event : event; |
||||
|
||||
if (!this._events || !this._events[evt]) return this; |
||||
|
||||
var listeners = this._events[evt] |
||||
, events = []; |
||||
|
||||
if (fn) { |
||||
if (listeners.fn) { |
||||
if ( |
||||
listeners.fn !== fn |
||||
|| (once && !listeners.once) |
||||
|| (context && listeners.context !== context) |
||||
) { |
||||
events.push(listeners); |
||||
} |
||||
} else { |
||||
for (var i = 0, length = listeners.length; i < length; i++) { |
||||
if ( |
||||
listeners[i].fn !== fn |
||||
|| (once && !listeners[i].once) |
||||
|| (context && listeners[i].context !== context) |
||||
) { |
||||
events.push(listeners[i]); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
//
|
||||
// Reset the array, or remove it completely if we have no more listeners.
|
||||
//
|
||||
if (events.length) { |
||||
this._events[evt] = events.length === 1 ? events[0] : events; |
||||
} else { |
||||
delete this._events[evt]; |
||||
} |
||||
|
||||
return this; |
||||
}; |
||||
|
||||
/** |
||||
* Remove all listeners or only the listeners for the specified event. |
||||
* |
||||
* @param {String} event The event want to remove all listeners for. |
||||
* @api public |
||||
*/ |
||||
EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) { |
||||
if (!this._events) return this; |
||||
|
||||
if (event) delete this._events[prefix ? prefix + event : event]; |
||||
else this._events = prefix ? {} : Object.create(null); |
||||
|
||||
return this; |
||||
}; |
||||
|
||||
//
|
||||
// Alias methods names because people roll like that.
|
||||
//
|
||||
EventEmitter.prototype.off = EventEmitter.prototype.removeListener; |
||||
EventEmitter.prototype.addListener = EventEmitter.prototype.on; |
||||
|
||||
//
|
||||
// This function doesn't apply anymore.
|
||||
//
|
||||
EventEmitter.prototype.setMaxListeners = function setMaxListeners() { |
||||
return this; |
||||
}; |
||||
|
||||
//
|
||||
// Expose the prefix.
|
||||
//
|
||||
EventEmitter.prefixed = prefix; |
||||
|
||||
//
|
||||
// Expose the module.
|
||||
//
|
||||
if ('undefined' !== typeof module) { |
||||
module.exports = EventEmitter; |
||||
} |
||||
|
||||
},{}],2:[function(_dereq_,module,exports){ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
var Message = _dereq_('../message'); |
||||
|
||||
/** |
||||
* Sends events to the embedded VR view IFrame via postMessage. Also handles |
||||
* messages sent back from the IFrame: |
||||
* |
||||
* click: When a hotspot was clicked. |
||||
* modechange: When the user changes viewing mode (VR|Fullscreen|etc). |
||||
*/ |
||||
function IFrameMessageSender(iframe) { |
||||
if (!iframe) { |
||||
console.error('No iframe specified'); |
||||
return; |
||||
} |
||||
this.iframe = iframe; |
||||
|
||||
// On iOS, if the iframe is across domains, also send DeviceMotion data.
|
||||
if (this.isIOS_()) { |
||||
window.addEventListener('devicemotion', this.onDeviceMotion_.bind(this), false); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Sends a message to the associated VR View IFrame. |
||||
*/ |
||||
IFrameMessageSender.prototype.send = function(message) { |
||||
var iframeWindow = this.iframe.contentWindow; |
||||
iframeWindow.postMessage(message, '*'); |
||||
}; |
||||
|
||||
IFrameMessageSender.prototype.onDeviceMotion_ = function(e) { |
||||
var message = { |
||||
type: Message.DEVICE_MOTION, |
||||
deviceMotionEvent: this.cloneDeviceMotionEvent_(e) |
||||
}; |
||||
|
||||
this.send(message); |
||||
}; |
||||
|
||||
IFrameMessageSender.prototype.cloneDeviceMotionEvent_ = function(e) { |
||||
return { |
||||
acceleration: { |
||||
x: e.acceleration.x, |
||||
y: e.acceleration.y, |
||||
z: e.acceleration.z, |
||||
}, |
||||
accelerationIncludingGravity: { |
||||
x: e.accelerationIncludingGravity.x, |
||||
y: e.accelerationIncludingGravity.y, |
||||
z: e.accelerationIncludingGravity.z, |
||||
}, |
||||
rotationRate: { |
||||
alpha: e.rotationRate.alpha, |
||||
beta: e.rotationRate.beta, |
||||
gamma: e.rotationRate.gamma, |
||||
}, |
||||
interval: e.interval, |
||||
timeStamp: e.timeStamp |
||||
}; |
||||
}; |
||||
|
||||
IFrameMessageSender.prototype.isIOS_ = function() { |
||||
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; |
||||
}; |
||||
|
||||
module.exports = IFrameMessageSender; |
||||
|
||||
},{"../message":5}],3:[function(_dereq_,module,exports){ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
var Player = _dereq_('./player'); |
||||
|
||||
var VRView = { |
||||
Player: Player |
||||
}; |
||||
|
||||
module.exports = VRView; |
||||
|
||||
},{"./player":4}],4:[function(_dereq_,module,exports){ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
var EventEmitter = _dereq_('eventemitter3'); |
||||
var IFrameMessageSender = _dereq_('./iframe-message-sender'); |
||||
var Message = _dereq_('../message'); |
||||
var Util = _dereq_('../util'); |
||||
|
||||
// Save the executing script. This will be used to calculate the embed URL.
|
||||
var CURRENT_SCRIPT_SRC = Util.getCurrentScript().src; |
||||
var FAKE_FULLSCREEN_CLASS = 'vrview-fake-fullscreen'; |
||||
|
||||
/** |
||||
* Entry point for the VR View JS API. |
||||
* |
||||
* Emits the following events: |
||||
* ready: When the player is loaded. |
||||
* modechange: When the viewing mode changes (normal, fullscreen, VR). |
||||
* click (id): When a hotspot is clicked. |
||||
*/ |
||||
function Player(selector, contentInfo) { |
||||
// Create a VR View iframe depending on the parameters.
|
||||
var iframe = this.createIframe_(contentInfo); |
||||
this.iframe = iframe; |
||||
|
||||
var parentEl = document.querySelector(selector); |
||||
parentEl.appendChild(iframe); |
||||
|
||||
// Make a sender as well, for relying commands to the child IFrame.
|
||||
this.sender = new IFrameMessageSender(iframe); |
||||
|
||||
// Listen to messages from the IFrame.
|
||||
window.addEventListener('message', this.onMessage_.bind(this), false); |
||||
|
||||
// Expose a public .isPaused attribute.
|
||||
this.isPaused = false; |
||||
|
||||
// Expose a public .isMuted attribute.
|
||||
this.isMuted = false; |
||||
if (typeof contentInfo.muted !== 'undefined') { |
||||
this.isMuted = contentInfo.muted; |
||||
} |
||||
|
||||
// Other public attributes
|
||||
this.currentTime = 0; |
||||
this.duration = 0; |
||||
this.volume = contentInfo.volume != undefined ? contentInfo.volume : 1; |
||||
|
||||
if (Util.isIOS()) { |
||||
this.injectFullscreenStylesheet_(); |
||||
} |
||||
} |
||||
Player.prototype = new EventEmitter(); |
||||
|
||||
/** |
||||
* @param pitch {Number} The latitude of center, specified in degrees, between |
||||
* -90 and 90, with 0 at the horizon. |
||||
* @param yaw {Number} The longitude of center, specified in degrees, between |
||||
* -180 and 180, with 0 at the image center. |
||||
* @param radius {Number} The radius of the hotspot, specified in meters. |
||||
* @param distance {Number} The distance of the hotspot from camera, specified |
||||
* in meters. |
||||
* @param hotspotId {String} The ID of the hotspot. |
||||
*/ |
||||
Player.prototype.addHotspot = function(hotspotId, params) { |
||||
// TODO: Add validation to params.
|
||||
var data = { |
||||
pitch: params.pitch, |
||||
yaw: params.yaw, |
||||
radius: params.radius, |
||||
distance: params.distance, |
||||
id: hotspotId |
||||
}; |
||||
this.sender.send({type: Message.ADD_HOTSPOT, data: data}); |
||||
}; |
||||
|
||||
Player.prototype.play = function() { |
||||
this.sender.send({type: Message.PLAY}); |
||||
}; |
||||
|
||||
Player.prototype.pause = function() { |
||||
this.sender.send({type: Message.PAUSE}); |
||||
}; |
||||
|
||||
/** |
||||
* Equivalent of HTML5 setSrc(). |
||||
* @param {String} contentInfo |
||||
*/ |
||||
Player.prototype.setContent = function(contentInfo) { |
||||
this.absolutifyPaths_(contentInfo); |
||||
var data = { |
||||
contentInfo: contentInfo |
||||
}; |
||||
this.sender.send({type: Message.SET_CONTENT, data: data}); |
||||
}; |
||||
|
||||
/** |
||||
* Sets the software volume of the video. 0 is mute, 1 is max. |
||||
*/ |
||||
Player.prototype.setVolume = function(volumeLevel) { |
||||
var data = { |
||||
volumeLevel: volumeLevel |
||||
}; |
||||
this.sender.send({type: Message.SET_VOLUME, data: data}); |
||||
}; |
||||
|
||||
Player.prototype.getVolume = function() { |
||||
return this.volume; |
||||
}; |
||||
|
||||
/** |
||||
* Sets the mute state of the video element. true is muted, false is unmuted. |
||||
*/ |
||||
Player.prototype.mute = function(muteState) { |
||||
var data = { |
||||
muteState: muteState |
||||
}; |
||||
this.sender.send({type: Message.MUTED, data: data}); |
||||
}; |
||||
|
||||
/** |
||||
* Set the current time of the media being played |
||||
* @param {Number} time |
||||
*/ |
||||
Player.prototype.setCurrentTime = function(time) { |
||||
var data = { |
||||
currentTime: time |
||||
}; |
||||
this.sender.send({type: Message.SET_CURRENT_TIME, data: data}); |
||||
}; |
||||
|
||||
Player.prototype.getCurrentTime = function() { |
||||
return this.currentTime; |
||||
}; |
||||
|
||||
Player.prototype.getDuration = function() { |
||||
return this.duration; |
||||
}; |
||||
Player.prototype.setFullscreen = function() { |
||||
this.sender.send({type: Message.SET_FULLSCREEN}); |
||||
}; |
||||
|
||||
/** |
||||
* Helper for creating an iframe. |
||||
* |
||||
* @return {IFrameElement} The iframe. |
||||
*/ |
||||
Player.prototype.createIframe_ = function(contentInfo) { |
||||
this.absolutifyPaths_(contentInfo); |
||||
|
||||
var iframe = document.createElement('iframe'); |
||||
iframe.setAttribute('allowfullscreen', true); |
||||
iframe.setAttribute('scrolling', 'no'); |
||||
iframe.style.border = 0; |
||||
|
||||
// Handle iframe size if width and height are specified.
|
||||
if (contentInfo.hasOwnProperty('width')) { |
||||
iframe.setAttribute('width', contentInfo.width); |
||||
delete contentInfo.width; |
||||
} |
||||
if (contentInfo.hasOwnProperty('height')) { |
||||
iframe.setAttribute('height', contentInfo.height); |
||||
delete contentInfo.height; |
||||
} |
||||
|
||||
var url = this.getEmbedUrl_() + Util.createGetParams(contentInfo); |
||||
iframe.src = url; |
||||
|
||||
return iframe; |
||||
}; |
||||
|
||||
Player.prototype.onMessage_ = function(event) { |
||||
var message = event.data; |
||||
if (!message || !message.type) { |
||||
console.warn('Received message with no type.'); |
||||
return; |
||||
} |
||||
var type = message.type.toLowerCase(); |
||||
var data = message.data; |
||||
switch (type) { |
||||
case 'ready': |
||||
if (data !== undefined && data.duration !== undefined) { |
||||
this.duration = data.duration; |
||||
} |
||||
case 'modechange': |
||||
case 'error': |
||||
case 'click': |
||||
case 'ended': |
||||
case 'getposition': |
||||
this.emit(type, data); |
||||
break; |
||||
case 'volumechange': |
||||
this.volume = data; |
||||
this.emit('volumechange', data); |
||||
break; |
||||
case 'muted': |
||||
this.isMuted = data; |
||||
this.emit('mute', data); |
||||
break; |
||||
case 'timeupdate': |
||||
this.currentTime = data; |
||||
this.emit('timeupdate', { |
||||
currentTime: this.currentTime, |
||||
duration: this.duration |
||||
}); |
||||
break; |
||||
case 'play': |
||||
case 'paused': |
||||
this.isPaused = data; |
||||
if (this.isPaused) { |
||||
this.emit('pause', data); |
||||
} else { |
||||
this.emit('play', data); |
||||
} |
||||
break; |
||||
case 'enter-fullscreen': |
||||
case 'enter-vr': |
||||
this.setFakeFullscreen_(true); |
||||
break; |
||||
case 'exit-fullscreen': |
||||
this.setFakeFullscreen_(false); |
||||
break; |
||||
default: |
||||
console.warn('Got unknown message of type %s from %s', message.type, message.origin); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Note: iOS doesn't support the fullscreen API. |
||||
* In standalone <iframe> mode, VR View emulates fullscreen by redirecting to |
||||
* another page. |
||||
* In JS API mode, we stretch the iframe to cover the extent of the page using |
||||
* CSS. To do this cleanly, we also inject a stylesheet. |
||||
*/ |
||||
Player.prototype.setFakeFullscreen_ = function(isFullscreen) { |
||||
if (isFullscreen) { |
||||
this.iframe.classList.add(FAKE_FULLSCREEN_CLASS); |
||||
} else { |
||||
this.iframe.classList.remove(FAKE_FULLSCREEN_CLASS); |
||||
} |
||||
}; |
||||
|
||||
Player.prototype.injectFullscreenStylesheet_ = function() { |
||||
var styleString = [ |
||||
'iframe.' + FAKE_FULLSCREEN_CLASS, |
||||
'{', |
||||
'position: fixed !important;', |
||||
'display: block !important;', |
||||
'z-index: 9999999999 !important;', |
||||
'top: 0 !important;', |
||||
'left: 0 !important;', |
||||
'width: 100% !important;', |
||||
'height: 100% !important;', |
||||
'margin: 0 !important;', |
||||
'}', |
||||
].join('\n'); |
||||
var style = document.createElement('style'); |
||||
style.innerHTML = styleString; |
||||
document.body.appendChild(style); |
||||
}; |
||||
|
||||
Player.prototype.getEmbedUrl_ = function() { |
||||
// Assume that the script is in $ROOT/build/something.js, and that the iframe
|
||||
// HTML is in $ROOT/index.html.
|
||||
//
|
||||
// E.g: /vrview/2.0/build/vrview.min.js => /vrview/2.0/index.html.
|
||||
var path = CURRENT_SCRIPT_SRC; |
||||
var split = path.split('/'); |
||||
var rootSplit = split.slice(0, split.length - 2); |
||||
var rootPath = rootSplit.join('/'); |
||||
return rootPath + '/index.html'; |
||||
}; |
||||
|
||||
Player.prototype.getDirName_ = function() { |
||||
var path = window.location.pathname; |
||||
path = path.substring(0, path.lastIndexOf('/')); |
||||
return location.protocol + '//' + location.host + path; |
||||
}; |
||||
|
||||
/** |
||||
* Make all of the URLs inside contentInfo absolute instead of relative. |
||||
*/ |
||||
Player.prototype.absolutifyPaths_ = function(contentInfo) { |
||||
var dirName = this.getDirName_(); |
||||
var urlParams = ['image', 'preview', 'video']; |
||||
|
||||
for (var i = 0; i < urlParams.length; i++) { |
||||
var name = urlParams[i]; |
||||
var path = contentInfo[name]; |
||||
if (path && Util.isPathAbsolute(path)) { |
||||
var absolute = Util.relativeToAbsolutePath(dirName, path); |
||||
contentInfo[name] = absolute; |
||||
//console.log('Converted to absolute: %s', absolute);
|
||||
} |
||||
} |
||||
}; |
||||
/** |
||||
* Get position YAW, PITCH |
||||
*/ |
||||
Player.prototype.getPosition = function() { |
||||
this.sender.send({type: Message.GET_POSITION, data: {}}); |
||||
}; |
||||
|
||||
module.exports = Player; |
||||
|
||||
},{"../message":5,"../util":6,"./iframe-message-sender":2,"eventemitter3":1}],5:[function(_dereq_,module,exports){ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
/** |
||||
* Messages from the API to the embed. |
||||
*/ |
||||
var Message = { |
||||
PLAY: 'play', |
||||
PAUSE: 'pause', |
||||
TIMEUPDATE: 'timeupdate', |
||||
ADD_HOTSPOT: 'addhotspot', |
||||
SET_CONTENT: 'setimage', |
||||
SET_VOLUME: 'setvolume', |
||||
MUTED: 'muted', |
||||
SET_CURRENT_TIME: 'setcurrenttime', |
||||
DEVICE_MOTION: 'devicemotion', |
||||
GET_POSITION: 'getposition', |
||||
SET_FULLSCREEN: 'setfullscreen', |
||||
}; |
||||
|
||||
module.exports = Message; |
||||
|
||||
},{}],6:[function(_dereq_,module,exports){ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
var Util = window.Util || {}; |
||||
|
||||
Util.isDataURI = function(src) { |
||||
return src && src.indexOf('data:') == 0; |
||||
}; |
||||
|
||||
Util.generateUUID = function() { |
||||
function s4() { |
||||
return Math.floor((1 + Math.random()) * 0x10000) |
||||
.toString(16) |
||||
.substring(1); |
||||
} |
||||
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + |
||||
s4() + '-' + s4() + s4() + s4(); |
||||
}; |
||||
|
||||
Util.isMobile = function() { |
||||
var check = false; |
||||
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); |
||||
return check; |
||||
}; |
||||
|
||||
Util.isIOS = function() { |
||||
return /(iPad|iPhone|iPod)/g.test(navigator.userAgent); |
||||
}; |
||||
|
||||
Util.isSafari = function() { |
||||
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent); |
||||
}; |
||||
|
||||
Util.cloneObject = function(obj) { |
||||
var out = {}; |
||||
for (key in obj) { |
||||
out[key] = obj[key]; |
||||
} |
||||
return out; |
||||
}; |
||||
|
||||
Util.hashCode = function(s) { |
||||
return s.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0); |
||||
}; |
||||
|
||||
Util.loadTrackSrc = function(context, src, callback, opt_progressCallback) { |
||||
var request = new XMLHttpRequest(); |
||||
request.open('GET', src, true); |
||||
request.responseType = 'arraybuffer'; |
||||
|
||||
// Decode asynchronously.
|
||||
request.onload = function() { |
||||
context.decodeAudioData(request.response, function(buffer) { |
||||
callback(buffer); |
||||
}, function(e) { |
||||
console.error(e); |
||||
}); |
||||
}; |
||||
if (opt_progressCallback) { |
||||
request.onprogress = function(e) { |
||||
var percent = e.loaded / e.total; |
||||
opt_progressCallback(percent); |
||||
}; |
||||
} |
||||
request.send(); |
||||
}; |
||||
|
||||
Util.isPow2 = function(n) { |
||||
return (n & (n - 1)) == 0; |
||||
}; |
||||
|
||||
Util.capitalize = function(s) { |
||||
return s.charAt(0).toUpperCase() + s.slice(1); |
||||
}; |
||||
|
||||
Util.isIFrame = function() { |
||||
try { |
||||
return window.self !== window.top; |
||||
} catch (e) { |
||||
return true; |
||||
} |
||||
}; |
||||
|
||||
// From http://goo.gl/4WX3tg
|
||||
Util.getQueryParameter = function(name) { |
||||
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); |
||||
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), |
||||
results = regex.exec(location.search); |
||||
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); |
||||
}; |
||||
|
||||
|
||||
// From http://stackoverflow.com/questions/11871077/proper-way-to-detect-webgl-support.
|
||||
Util.isWebGLEnabled = function() { |
||||
var canvas = document.createElement('canvas'); |
||||
try { gl = canvas.getContext("webgl"); } |
||||
catch (x) { gl = null; } |
||||
|
||||
if (gl == null) { |
||||
try { gl = canvas.getContext("experimental-webgl"); experimental = true; } |
||||
catch (x) { gl = null; } |
||||
} |
||||
return !!gl; |
||||
}; |
||||
|
||||
Util.clone = function(obj) { |
||||
return JSON.parse(JSON.stringify(obj)); |
||||
}; |
||||
|
||||
// From http://stackoverflow.com/questions/10140604/fastest-hypotenuse-in-javascript
|
||||
Util.hypot = Math.hypot || function(x, y) { |
||||
return Math.sqrt(x*x + y*y); |
||||
}; |
||||
|
||||
// From http://stackoverflow.com/a/17447718/693934
|
||||
Util.isIE11 = function() { |
||||
return navigator.userAgent.match(/Trident/); |
||||
}; |
||||
|
||||
Util.getRectCenter = function(rect) { |
||||
return new THREE.Vector2(rect.x + rect.width/2, rect.y + rect.height/2); |
||||
}; |
||||
|
||||
Util.getScreenWidth = function() { |
||||
return Math.max(window.screen.width, window.screen.height) * |
||||
window.devicePixelRatio; |
||||
}; |
||||
|
||||
Util.getScreenHeight = function() { |
||||
return Math.min(window.screen.width, window.screen.height) * |
||||
window.devicePixelRatio; |
||||
}; |
||||
|
||||
Util.isIOS9OrLess = function() { |
||||
if (!Util.isIOS()) { |
||||
return false; |
||||
} |
||||
var re = /(iPhone|iPad|iPod) OS ([\d_]+)/; |
||||
var iOSVersion = navigator.userAgent.match(re); |
||||
if (!iOSVersion) { |
||||
return false; |
||||
} |
||||
// Get the last group.
|
||||
var versionString = iOSVersion[iOSVersion.length - 1]; |
||||
var majorVersion = parseFloat(versionString); |
||||
return majorVersion <= 9; |
||||
}; |
||||
|
||||
Util.getExtension = function(url) { |
||||
return url.split('.').pop().split('?')[0]; |
||||
}; |
||||
|
||||
Util.createGetParams = function(params) { |
||||
var out = '?'; |
||||
for (var k in params) { |
||||
var paramString = k + '=' + params[k] + '&'; |
||||
out += paramString; |
||||
} |
||||
// Remove the trailing ampersand.
|
||||
out.substring(0, params.length - 2); |
||||
return out; |
||||
}; |
||||
|
||||
Util.sendParentMessage = function(message) { |
||||
if (window.parent) { |
||||
parent.postMessage(message, '*'); |
||||
} |
||||
}; |
||||
|
||||
Util.parseBoolean = function(value) { |
||||
if (value == 'false' || value == 0) { |
||||
return false; |
||||
} else if (value == 'true' || value == 1) { |
||||
return true; |
||||
} else { |
||||
return !!value; |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* @param base {String} An absolute directory root. |
||||
* @param relative {String} A relative path. |
||||
* |
||||
* @returns {String} An absolute path corresponding to the rootPath. |
||||
* |
||||
* From http://stackoverflow.com/a/14780463/693934.
|
||||
*/ |
||||
Util.relativeToAbsolutePath = function(base, relative) { |
||||
var stack = base.split('/'); |
||||
var parts = relative.split('/'); |
||||
for (var i = 0; i < parts.length; i++) { |
||||
if (parts[i] == '.') { |
||||
continue; |
||||
} |
||||
if (parts[i] == '..') { |
||||
stack.pop(); |
||||
} else { |
||||
stack.push(parts[i]); |
||||
} |
||||
} |
||||
return stack.join('/'); |
||||
}; |
||||
|
||||
/** |
||||
* @return {Boolean} True iff the specified path is an absolute path. |
||||
*/ |
||||
Util.isPathAbsolute = function(path) { |
||||
return ! /^(?:\/|[a-z]+:\/\/)/.test(path); |
||||
} |
||||
|
||||
Util.isEmptyObject = function(obj) { |
||||
return Object.getOwnPropertyNames(obj).length == 0; |
||||
}; |
||||
|
||||
Util.isDebug = function() { |
||||
return Util.parseBoolean(Util.getQueryParameter('debug')); |
||||
}; |
||||
|
||||
Util.getCurrentScript = function() { |
||||
// Note: in IE11, document.currentScript doesn't work, so we fall back to this
|
||||
// hack, taken from https://goo.gl/TpExuH.
|
||||
if (!document.currentScript) { |
||||
console.warn('This browser does not support document.currentScript. Trying fallback.'); |
||||
} |
||||
return document.currentScript || document.scripts[document.scripts.length - 1]; |
||||
} |
||||
|
||||
|
||||
module.exports = Util; |
||||
|
||||
},{}]},{},[3])(3) |
||||
}); |
||||
|
After Width: | Height: | Size: 375 B |
|
After Width: | Height: | Size: 182 B |
|
After Width: | Height: | Size: 188 KiB |
@ -0,0 +1,41 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<title>VR view</title> |
||||
<meta charset="utf-8"> |
||||
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> |
||||
<meta name="mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes" /> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> |
||||
<link rel="stylesheet" href="style.css"> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="error" class="dialog"> |
||||
<div class="wrap"> |
||||
<h1 class="title">Error</h1> |
||||
<p class="message">An unknown error occurred.</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="play-overlay"> |
||||
<img src="images/ic_play_arrow_white_24dp.svg" /> |
||||
</div> |
||||
|
||||
<a id="watermark" href="http://g.co/vr/view" target="_blank"> |
||||
<img src="images/ic_info_outline_black_24dp.svg" /> |
||||
</a> |
||||
|
||||
<script> |
||||
WebVRConfig = { |
||||
BUFFER_SCALE: 0.5, |
||||
TOUCH_PANNER_DISABLED: false |
||||
}; |
||||
</script> |
||||
|
||||
<script src="build/three.min.js"></script> |
||||
<script src="build/embed.min.js"></script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,33 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<title>VR view</title> |
||||
<meta charset="utf-8"> |
||||
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> |
||||
<meta name="mobile-web-app-capable" content="yes"> |
||||
<meta name="apple-mobile-web-app-capable" content="yes" /> |
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> |
||||
<link rel="stylesheet" href="style.css"> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="error" class="dialog"> |
||||
<div class="wrap"> |
||||
<h1 class="title">Error</h1> |
||||
<p class="message">An unknown error occurred.</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<script> |
||||
WebVRConfig = { |
||||
BUFFER_SCALE: 0.5, |
||||
TOUCH_PANNER_DISABLED: false |
||||
}; |
||||
</script> |
||||
|
||||
<script src="build/three.js"></script> |
||||
<script src="build/embed.js"></script> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,56 @@ |
||||
{ |
||||
"name": "vrview", |
||||
"version": "2.0.2", |
||||
"description": "Embed VR content into your webpage.", |
||||
"main": "index.js", |
||||
"dependencies": { |
||||
"@tweenjs/tween.js": "^16.8.0", |
||||
"es6-promise": "^3.0.2", |
||||
"eventemitter3": "^1.2.0", |
||||
"lodash": "^4.17.5", |
||||
"shaka-player": "^2.0.0", |
||||
"stats-js": "^1.0.0-alpha1", |
||||
"three": "^0.84.0", |
||||
"urijs": "^1.18.2", |
||||
"webvr-boilerplate": "^0.4.6", |
||||
"webvr-polyfill": "^0.9.38" |
||||
}, |
||||
"devDependencies": { |
||||
"browserify": "^13.1.1", |
||||
"debug": "^2.6.9", |
||||
"derequire": "^2.0.6", |
||||
"eslint": "^4.2.0", |
||||
"eslint-config-google": "^0.9.1", |
||||
"rollup": "^0.37.2", |
||||
"uglify-es": "^3.0.24", |
||||
"watchify": "^3.8.0" |
||||
}, |
||||
"scripts": { |
||||
"_mkdir": "mkdir -p build", |
||||
"build-min": "npm run _mkdir && browserify src/embed/main.js | derequire | uglifyjs -c > build/embed.min.js && npm run build-three-closure", |
||||
"build-dev": "npm run _mkdir && browserify src/embed/main.js | derequire > build/embed.js && npm run build-three-closure", |
||||
"build-analytics-min": "npm run _mkdir && browserify src/embed/with-analytics.js | derequire | uglifyjs -c > build/embed.min.js && npm run build-three-closure", |
||||
"build-analytics-dev": "npm run _mkdir && browserify src/embed/with-analytics.js | derequire > build/embed.js && npm run build-three-closure", |
||||
"build-api-min": "npm run _mkdir && browserify --standalone VRView src/api/main.js | derequire | uglifyjs -c > build/vrview.min.js", |
||||
"build-api-dev": "npm run _mkdir && browserify --standalone VRView src/api/main.js | derequire > build/vrview.js", |
||||
"build": "npm run build-min; npm run build-dev; npm run build-api", |
||||
"build-analytics": "npm run build-analytics-min; npm run build-analytics-dev; npm run build-api", |
||||
"build-api": "npm run build-api-min; npm run build-api-dev", |
||||
"watch": "npm run _mkdir && watchify src/embed/main.js -v -d -o build/embed.js", |
||||
"watch-api": "npm run _mkdir && watchify --standalone VRView src/api/main.js -v -d -o build/vrview.js", |
||||
"build-three-closure": "npm run _mkdir && rollup -c src/third_party/three/rollup.config.js && java -jar src/third_party/three/closure-compiler-v20160713.jar --warning_level=VERBOSE --jscomp_off=globalThis --jscomp_off=checkTypes --externs src/third_party/three/externs.js --language_in=ECMASCRIPT5_STRICT --js build/three.js --js_output_file build/three.min.js", |
||||
"build-dms": "npm run _mkdir && uglifyjs scripts/js/device-motion-sender.js > build/device-motion-sender.min.js", |
||||
"build-all": "npm run build-analytics; npm run build-three-closure; npm run build-dms", |
||||
"test": "npm run build" |
||||
}, |
||||
"repository": { |
||||
"type": "git", |
||||
"url": "git+https://github.com/google/vrview.git" |
||||
}, |
||||
"author": "", |
||||
"license": "Apache-2.0", |
||||
"bugs": { |
||||
"url": "https://github.com/google/vrview/issues" |
||||
}, |
||||
"homepage": "https://github.com/google/vrview#readme" |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
[ |
||||
{ |
||||
"entity": "allUsers", |
||||
"role": "READER" |
||||
}, |
||||
{ |
||||
"email": "smus@google.com", |
||||
"entity": "user-smus@google.com", |
||||
"role": "OWNER" |
||||
}, |
||||
{ |
||||
"email": "bwuest@google.com", |
||||
"entity": "user-bwuest@google.com", |
||||
"role": "OWNER" |
||||
}, |
||||
{ |
||||
"email": "nathanmartz@google.com", |
||||
"entity": "user-nathanmartz@google.com", |
||||
"role": "OWNER" |
||||
} |
||||
] |
||||
@ -0,0 +1,21 @@ |
||||
#!/usr/bin/env sh |
||||
# |
||||
# Copyright 2016 Google Inc. All Rights Reserved. |
||||
# Licensed under the Apache License, Version 2.0 (the "License"); |
||||
# you may not use this file except in compliance with the License. |
||||
# You may obtain a copy of the License at |
||||
# |
||||
# http://www.apache.org/licenses/LICENSE-2.0 |
||||
# |
||||
# Unless required by applicable law or agreed to in writing, software |
||||
# distributed under the License is distributed on an "AS IS" BASIS, |
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
# See the License for the specific language governing permissions and |
||||
# limitations under the License. |
||||
|
||||
|
||||
SCRIPT_DIR=`dirname $BASH_SOURCE` |
||||
|
||||
gsutil cp index-minified.html gs://vrview/2.0/index.html |
||||
gsutil cp -r style.css images/ build/ examples/ gs://vrview/2.0/ |
||||
gsutil -m acl set -r $SCRIPT_DIR/acl.txt gs://vrview/2.0/ |
||||
@ -0,0 +1,88 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
|
||||
/** |
||||
* Sends DeviceMotion events to all embedded VR views via postMessage. Note: |
||||
* each iframe must have a class 'vrview'. |
||||
* |
||||
* This is a workaround for https://bugs.webkit.org/show_bug.cgi?id=150072.
|
||||
*/ |
||||
function DeviceMotionSender() { |
||||
// This is an iOS-specific workaround.
|
||||
if (!this.isIOS_()) { |
||||
return; |
||||
} |
||||
|
||||
window.addEventListener('devicemotion', this.onDeviceMotion_.bind(this), false); |
||||
|
||||
// Find the right iFrame to send data to.
|
||||
this.iframes = document.querySelectorAll('iframe.vrview'); |
||||
} |
||||
|
||||
DeviceMotionSender.prototype.onDeviceMotion_ = function(e) { |
||||
var message = { |
||||
type: 'DeviceMotion', |
||||
deviceMotionEvent: this.cloneDeviceMotionEvent_(e) |
||||
}; |
||||
for (var i = 0; i < this.iframes.length; i++) { |
||||
// Only send data if we're on iOS and we are dealing with a cross-domain
|
||||
// iframe.
|
||||
var iframe = this.iframes[i]; |
||||
var iframeWindow = iframe.contentWindow; |
||||
if (this.isCrossDomainIframe_(iframe)) { |
||||
iframeWindow.postMessage(message, '*'); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
DeviceMotionSender.prototype.cloneDeviceMotionEvent_ = function(e) { |
||||
return { |
||||
acceleration: { |
||||
x: e.acceleration.x, |
||||
y: e.acceleration.y, |
||||
z: e.acceleration.z, |
||||
}, |
||||
accelerationIncludingGravity: { |
||||
x: e.accelerationIncludingGravity.x, |
||||
y: e.accelerationIncludingGravity.y, |
||||
z: e.accelerationIncludingGravity.z, |
||||
}, |
||||
rotationRate: { |
||||
alpha: e.rotationRate.alpha, |
||||
beta: e.rotationRate.beta, |
||||
gamma: e.rotationRate.gamma, |
||||
}, |
||||
interval: e.interval |
||||
}; |
||||
}; |
||||
|
||||
DeviceMotionSender.prototype.isIOS_ = function() { |
||||
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; |
||||
}; |
||||
|
||||
// From http://stackoverflow.com/questions/12381334/foolproof-way-to-detect-if-iframe-is-cross-domain.
|
||||
DeviceMotionSender.prototype.isCrossDomainIframe_ = function(iframe) { |
||||
var html = null; |
||||
try {
|
||||
var doc = iframe.contentDocument || iframe.contentWindow.document; |
||||
html = doc.body.innerHTML; |
||||
} catch (err) { |
||||
} |
||||
|
||||
return (html === null); |
||||
}; |
||||
|
||||
var dms = new DeviceMotionSender(); |
||||
@ -0,0 +1,2 @@ |
||||
This directory contains all of the JavaScript that is required for the |
||||
VR View JavaScript API. |
||||
@ -0,0 +1,80 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
var Message = require('../message'); |
||||
|
||||
/** |
||||
* Sends events to the embedded VR view IFrame via postMessage. Also handles |
||||
* messages sent back from the IFrame: |
||||
* |
||||
* click: When a hotspot was clicked. |
||||
* modechange: When the user changes viewing mode (VR|Fullscreen|etc). |
||||
*/ |
||||
function IFrameMessageSender(iframe) { |
||||
if (!iframe) { |
||||
console.error('No iframe specified'); |
||||
return; |
||||
} |
||||
this.iframe = iframe; |
||||
|
||||
// On iOS, if the iframe is across domains, also send DeviceMotion data.
|
||||
if (this.isIOS_()) { |
||||
window.addEventListener('devicemotion', this.onDeviceMotion_.bind(this), false); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Sends a message to the associated VR View IFrame. |
||||
*/ |
||||
IFrameMessageSender.prototype.send = function(message) { |
||||
var iframeWindow = this.iframe.contentWindow; |
||||
iframeWindow.postMessage(message, '*'); |
||||
}; |
||||
|
||||
IFrameMessageSender.prototype.onDeviceMotion_ = function(e) { |
||||
var message = { |
||||
type: Message.DEVICE_MOTION, |
||||
deviceMotionEvent: this.cloneDeviceMotionEvent_(e) |
||||
}; |
||||
|
||||
this.send(message); |
||||
}; |
||||
|
||||
IFrameMessageSender.prototype.cloneDeviceMotionEvent_ = function(e) { |
||||
return { |
||||
acceleration: { |
||||
x: e.acceleration.x, |
||||
y: e.acceleration.y, |
||||
z: e.acceleration.z, |
||||
}, |
||||
accelerationIncludingGravity: { |
||||
x: e.accelerationIncludingGravity.x, |
||||
y: e.accelerationIncludingGravity.y, |
||||
z: e.accelerationIncludingGravity.z, |
||||
}, |
||||
rotationRate: { |
||||
alpha: e.rotationRate.alpha, |
||||
beta: e.rotationRate.beta, |
||||
gamma: e.rotationRate.gamma, |
||||
}, |
||||
interval: e.interval, |
||||
timeStamp: e.timeStamp |
||||
}; |
||||
}; |
||||
|
||||
IFrameMessageSender.prototype.isIOS_ = function() { |
||||
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; |
||||
}; |
||||
|
||||
module.exports = IFrameMessageSender; |
||||
@ -0,0 +1,22 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
var Player = require('./player'); |
||||
|
||||
var VRView = { |
||||
Player: Player |
||||
}; |
||||
|
||||
module.exports = VRView; |
||||
@ -0,0 +1,316 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
var EventEmitter = require('eventemitter3'); |
||||
var IFrameMessageSender = require('./iframe-message-sender'); |
||||
var Message = require('../message'); |
||||
var Util = require('../util'); |
||||
|
||||
// Save the executing script. This will be used to calculate the embed URL.
|
||||
var CURRENT_SCRIPT_SRC = Util.getCurrentScript().src; |
||||
var FAKE_FULLSCREEN_CLASS = 'vrview-fake-fullscreen'; |
||||
|
||||
/** |
||||
* Entry point for the VR View JS API. |
||||
* |
||||
* Emits the following events: |
||||
* ready: When the player is loaded. |
||||
* modechange: When the viewing mode changes (normal, fullscreen, VR). |
||||
* click (id): When a hotspot is clicked. |
||||
*/ |
||||
function Player(selector, contentInfo) { |
||||
// Create a VR View iframe depending on the parameters.
|
||||
var iframe = this.createIframe_(contentInfo); |
||||
this.iframe = iframe; |
||||
|
||||
var parentEl = document.querySelector(selector); |
||||
parentEl.appendChild(iframe); |
||||
|
||||
// Make a sender as well, for relying commands to the child IFrame.
|
||||
this.sender = new IFrameMessageSender(iframe); |
||||
|
||||
// Listen to messages from the IFrame.
|
||||
window.addEventListener('message', this.onMessage_.bind(this), false); |
||||
|
||||
// Expose a public .isPaused attribute.
|
||||
this.isPaused = false; |
||||
|
||||
// Expose a public .isMuted attribute.
|
||||
this.isMuted = false; |
||||
if (typeof contentInfo.muted !== 'undefined') { |
||||
this.isMuted = contentInfo.muted; |
||||
} |
||||
|
||||
// Other public attributes
|
||||
this.currentTime = 0; |
||||
this.duration = 0; |
||||
this.volume = contentInfo.volume != undefined ? contentInfo.volume : 1; |
||||
|
||||
if (Util.isIOS()) { |
||||
this.injectFullscreenStylesheet_(); |
||||
} |
||||
} |
||||
Player.prototype = new EventEmitter(); |
||||
|
||||
/** |
||||
* @param pitch {Number} The latitude of center, specified in degrees, between |
||||
* -90 and 90, with 0 at the horizon. |
||||
* @param yaw {Number} The longitude of center, specified in degrees, between |
||||
* -180 and 180, with 0 at the image center. |
||||
* @param radius {Number} The radius of the hotspot, specified in meters. |
||||
* @param distance {Number} The distance of the hotspot from camera, specified |
||||
* in meters. |
||||
* @param hotspotId {String} The ID of the hotspot. |
||||
*/ |
||||
Player.prototype.addHotspot = function(hotspotId, params) { |
||||
// TODO: Add validation to params.
|
||||
var data = { |
||||
pitch: params.pitch, |
||||
yaw: params.yaw, |
||||
radius: params.radius, |
||||
distance: params.distance, |
||||
id: hotspotId |
||||
}; |
||||
this.sender.send({type: Message.ADD_HOTSPOT, data: data}); |
||||
}; |
||||
|
||||
Player.prototype.play = function() { |
||||
this.sender.send({type: Message.PLAY}); |
||||
}; |
||||
|
||||
Player.prototype.pause = function() { |
||||
this.sender.send({type: Message.PAUSE}); |
||||
}; |
||||
|
||||
/** |
||||
* Equivalent of HTML5 setSrc(). |
||||
* @param {String} contentInfo |
||||
*/ |
||||
Player.prototype.setContent = function(contentInfo) { |
||||
this.absolutifyPaths_(contentInfo); |
||||
var data = { |
||||
contentInfo: contentInfo |
||||
}; |
||||
this.sender.send({type: Message.SET_CONTENT, data: data}); |
||||
}; |
||||
|
||||
/** |
||||
* Sets the software volume of the video. 0 is mute, 1 is max. |
||||
*/ |
||||
Player.prototype.setVolume = function(volumeLevel) { |
||||
var data = { |
||||
volumeLevel: volumeLevel |
||||
}; |
||||
this.sender.send({type: Message.SET_VOLUME, data: data}); |
||||
}; |
||||
|
||||
Player.prototype.getVolume = function() { |
||||
return this.volume; |
||||
}; |
||||
|
||||
/** |
||||
* Sets the mute state of the video element. true is muted, false is unmuted. |
||||
*/ |
||||
Player.prototype.mute = function(muteState) { |
||||
var data = { |
||||
muteState: muteState |
||||
}; |
||||
this.sender.send({type: Message.MUTED, data: data}); |
||||
}; |
||||
|
||||
/** |
||||
* Set the current time of the media being played |
||||
* @param {Number} time |
||||
*/ |
||||
Player.prototype.setCurrentTime = function(time) { |
||||
var data = { |
||||
currentTime: time |
||||
}; |
||||
this.sender.send({type: Message.SET_CURRENT_TIME, data: data}); |
||||
}; |
||||
|
||||
Player.prototype.getCurrentTime = function() { |
||||
return this.currentTime; |
||||
}; |
||||
|
||||
Player.prototype.getDuration = function() { |
||||
return this.duration; |
||||
}; |
||||
Player.prototype.setFullscreen = function() { |
||||
this.sender.send({type: Message.SET_FULLSCREEN}); |
||||
}; |
||||
|
||||
/** |
||||
* Helper for creating an iframe. |
||||
* |
||||
* @return {IFrameElement} The iframe. |
||||
*/ |
||||
Player.prototype.createIframe_ = function(contentInfo) { |
||||
this.absolutifyPaths_(contentInfo); |
||||
|
||||
var iframe = document.createElement('iframe'); |
||||
iframe.setAttribute('allowfullscreen', true); |
||||
iframe.setAttribute('scrolling', 'no'); |
||||
iframe.style.border = 0; |
||||
|
||||
// Handle iframe size if width and height are specified.
|
||||
if (contentInfo.hasOwnProperty('width')) { |
||||
iframe.setAttribute('width', contentInfo.width); |
||||
delete contentInfo.width; |
||||
} |
||||
if (contentInfo.hasOwnProperty('height')) { |
||||
iframe.setAttribute('height', contentInfo.height); |
||||
delete contentInfo.height; |
||||
} |
||||
|
||||
var url = this.getEmbedUrl_() + Util.createGetParams(contentInfo); |
||||
iframe.src = url; |
||||
|
||||
return iframe; |
||||
}; |
||||
|
||||
Player.prototype.onMessage_ = function(event) { |
||||
var message = event.data; |
||||
if (!message || !message.type) { |
||||
console.warn('Received message with no type.'); |
||||
return; |
||||
} |
||||
var type = message.type.toLowerCase(); |
||||
var data = message.data; |
||||
switch (type) { |
||||
case 'ready': |
||||
if (data !== undefined && data.duration !== undefined) { |
||||
this.duration = data.duration; |
||||
} |
||||
case 'modechange': |
||||
case 'error': |
||||
case 'click': |
||||
case 'ended': |
||||
case 'getposition': |
||||
this.emit(type, data); |
||||
break; |
||||
case 'volumechange': |
||||
this.volume = data; |
||||
this.emit('volumechange', data); |
||||
break; |
||||
case 'muted': |
||||
this.isMuted = data; |
||||
this.emit('mute', data); |
||||
break; |
||||
case 'timeupdate': |
||||
this.currentTime = data; |
||||
this.emit('timeupdate', { |
||||
currentTime: this.currentTime, |
||||
duration: this.duration |
||||
}); |
||||
break; |
||||
case 'play': |
||||
case 'paused': |
||||
this.isPaused = data; |
||||
if (this.isPaused) { |
||||
this.emit('pause', data); |
||||
} else { |
||||
this.emit('play', data); |
||||
} |
||||
break; |
||||
case 'enter-fullscreen': |
||||
case 'enter-vr': |
||||
this.setFakeFullscreen_(true); |
||||
break; |
||||
case 'exit-fullscreen': |
||||
this.setFakeFullscreen_(false); |
||||
break; |
||||
default: |
||||
console.warn('Got unknown message of type %s from %s', message.type, message.origin); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Note: iOS doesn't support the fullscreen API. |
||||
* In standalone <iframe> mode, VR View emulates fullscreen by redirecting to |
||||
* another page. |
||||
* In JS API mode, we stretch the iframe to cover the extent of the page using |
||||
* CSS. To do this cleanly, we also inject a stylesheet. |
||||
*/ |
||||
Player.prototype.setFakeFullscreen_ = function(isFullscreen) { |
||||
if (isFullscreen) { |
||||
this.iframe.classList.add(FAKE_FULLSCREEN_CLASS); |
||||
} else { |
||||
this.iframe.classList.remove(FAKE_FULLSCREEN_CLASS); |
||||
} |
||||
}; |
||||
|
||||
Player.prototype.injectFullscreenStylesheet_ = function() { |
||||
var styleString = [ |
||||
'iframe.' + FAKE_FULLSCREEN_CLASS, |
||||
'{', |
||||
'position: fixed !important;', |
||||
'display: block !important;', |
||||
'z-index: 9999999999 !important;', |
||||
'top: 0 !important;', |
||||
'left: 0 !important;', |
||||
'width: 100% !important;', |
||||
'height: 100% !important;', |
||||
'margin: 0 !important;', |
||||
'}', |
||||
].join('\n'); |
||||
var style = document.createElement('style'); |
||||
style.innerHTML = styleString; |
||||
document.body.appendChild(style); |
||||
}; |
||||
|
||||
Player.prototype.getEmbedUrl_ = function() { |
||||
// Assume that the script is in $ROOT/build/something.js, and that the iframe
|
||||
// HTML is in $ROOT/index.html.
|
||||
//
|
||||
// E.g: /vrview/2.0/build/vrview.min.js => /vrview/2.0/index.html.
|
||||
var path = CURRENT_SCRIPT_SRC; |
||||
var split = path.split('/'); |
||||
var rootSplit = split.slice(0, split.length - 2); |
||||
var rootPath = rootSplit.join('/'); |
||||
return rootPath + '/index.html'; |
||||
}; |
||||
|
||||
Player.prototype.getDirName_ = function() { |
||||
var path = window.location.pathname; |
||||
path = path.substring(0, path.lastIndexOf('/')); |
||||
return location.protocol + '//' + location.host + path; |
||||
}; |
||||
|
||||
/** |
||||
* Make all of the URLs inside contentInfo absolute instead of relative. |
||||
*/ |
||||
Player.prototype.absolutifyPaths_ = function(contentInfo) { |
||||
var dirName = this.getDirName_(); |
||||
var urlParams = ['image', 'preview', 'video']; |
||||
|
||||
for (var i = 0; i < urlParams.length; i++) { |
||||
var name = urlParams[i]; |
||||
var path = contentInfo[name]; |
||||
if (path && Util.isPathAbsolute(path)) { |
||||
var absolute = Util.relativeToAbsolutePath(dirName, path); |
||||
contentInfo[name] = absolute; |
||||
//console.log('Converted to absolute: %s', absolute);
|
||||
} |
||||
} |
||||
}; |
||||
/** |
||||
* Get position YAW, PITCH |
||||
*/ |
||||
Player.prototype.getPosition = function() { |
||||
this.sender.send({type: Message.GET_POSITION, data: {}}); |
||||
}; |
||||
|
||||
module.exports = Player; |
||||
@ -0,0 +1,147 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
var EventEmitter = require('eventemitter3'); |
||||
var shaka = require('shaka-player'); |
||||
|
||||
var Types = require('../video-type'); |
||||
var Util = require('../util'); |
||||
|
||||
var DEFAULT_BITS_PER_SECOND = 1000000; |
||||
|
||||
/** |
||||
* Supports regular video URLs (eg. mp4), as well as adaptive manifests like |
||||
* DASH (.mpd) and soon HLS (.m3u8). |
||||
* |
||||
* Events: |
||||
* load(video): When the video is loaded. |
||||
* error(message): If an error occurs. |
||||
* |
||||
* To play/pause/seek/etc, please use the underlying video element. |
||||
*/ |
||||
function AdaptivePlayer(params) { |
||||
this.video = document.createElement('video'); |
||||
// Loop by default.
|
||||
if (params.loop === true) { |
||||
this.video.setAttribute('loop', true); |
||||
} |
||||
|
||||
if (params.volume !== undefined) { |
||||
// XXX: .setAttribute('volume', params.volume) doesn't work for some reason.
|
||||
this.video.volume = params.volume; |
||||
} |
||||
|
||||
// Not muted by default.
|
||||
if (params.muted === true) { |
||||
this.video.muted = params.muted; |
||||
} |
||||
|
||||
// For FF, make sure we enable preload.
|
||||
this.video.setAttribute('preload', 'auto'); |
||||
// Enable inline video playback in iOS 10+.
|
||||
this.video.setAttribute('playsinline', true); |
||||
this.video.setAttribute('crossorigin', 'anonymous'); |
||||
} |
||||
AdaptivePlayer.prototype = new EventEmitter(); |
||||
|
||||
AdaptivePlayer.prototype.load = function(url) { |
||||
var self = this; |
||||
// TODO(smus): Investigate whether or not differentiation is best done by
|
||||
// mimeType after all. Cursory research suggests that adaptive streaming
|
||||
// manifest mime types aren't properly supported.
|
||||
//
|
||||
// For now, make determination based on extension.
|
||||
var extension = Util.getExtension(url); |
||||
switch (extension) { |
||||
case 'm3u8': // HLS
|
||||
this.type = Types.HLS; |
||||
if (Util.isSafari()) { |
||||
this.loadVideo_(url).then(function() { |
||||
self.emit('load', self.video, self.type); |
||||
}).catch(this.onError_.bind(this)); |
||||
} else { |
||||
self.onError_('HLS is only supported on Safari.'); |
||||
} |
||||
break; |
||||
case 'mpd': // MPEG-DASH
|
||||
this.type = Types.DASH; |
||||
this.loadShakaVideo_(url).then(function() { |
||||
console.log('The video has now been loaded!'); |
||||
self.emit('load', self.video, self.type); |
||||
}).catch(this.onError_.bind(this)); |
||||
break; |
||||
default: // A regular video, not an adaptive manifest.
|
||||
this.type = Types.VIDEO; |
||||
this.loadVideo_(url).then(function() { |
||||
self.emit('load', self.video, self.type); |
||||
}).catch(this.onError_.bind(this)); |
||||
break; |
||||
} |
||||
}; |
||||
|
||||
AdaptivePlayer.prototype.destroy = function() { |
||||
this.video.pause(); |
||||
this.video.src = ''; |
||||
this.video = null; |
||||
}; |
||||
|
||||
/*** PRIVATE API ***/ |
||||
|
||||
AdaptivePlayer.prototype.onError_ = function(e) { |
||||
console.error(e); |
||||
this.emit('error', e); |
||||
}; |
||||
|
||||
AdaptivePlayer.prototype.loadVideo_ = function(url) { |
||||
var self = this, video = self.video; |
||||
return new Promise(function(resolve, reject) { |
||||
video.src = url; |
||||
video.addEventListener('canplaythrough', resolve); |
||||
video.addEventListener('loadedmetadata', function() { |
||||
self.emit('timeupdate', { |
||||
currentTime: video.currentTime, |
||||
duration: video.duration |
||||
}); |
||||
}); |
||||
video.addEventListener('error', reject); |
||||
video.load(); |
||||
}); |
||||
}; |
||||
|
||||
AdaptivePlayer.prototype.initShaka_ = function() { |
||||
this.player = new shaka.Player(this.video); |
||||
|
||||
this.player.configure({ |
||||
abr: { defaultBandwidthEstimate: DEFAULT_BITS_PER_SECOND } |
||||
}); |
||||
|
||||
// Listen for error events.
|
||||
this.player.addEventListener('error', this.onError_); |
||||
}; |
||||
|
||||
AdaptivePlayer.prototype.loadShakaVideo_ = function(url) { |
||||
// Install built-in polyfills to patch browser incompatibilities.
|
||||
shaka.polyfill.installAll(); |
||||
|
||||
if (!shaka.Player.isBrowserSupported()) { |
||||
console.error('Shaka is not supported on this browser.'); |
||||
return; |
||||
} |
||||
|
||||
this.initShaka_(); |
||||
return this.player.load(url); |
||||
}; |
||||
|
||||
module.exports = AdaptivePlayer; |
||||
@ -0,0 +1,56 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
function Analytics() { |
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
||||
|
||||
ga('create', 'UA-35315454-8', 'auto'); |
||||
ga('send', 'pageview'); |
||||
|
||||
this.lastModeChangeTime = window.performance.now(); |
||||
this.lastModeLabel = Analytics.MODE_LABELS[0]; |
||||
} |
||||
|
||||
Analytics.MODE_LABELS = { |
||||
0: 'UNKNOWN', |
||||
1: 'NORMAL', |
||||
2: 'MAGIC_WINDOW', |
||||
3: 'VR' |
||||
}; |
||||
|
||||
|
||||
Analytics.prototype.logModeChanged = function(mode) { |
||||
var modeLabel = Analytics.MODE_LABELS[mode]; |
||||
var lastModeLabel = Analytics.MODE_LABELS[this.lastMode]; |
||||
|
||||
console.log('Analytics: going from mode %s to %s', lastModeLabel, modeLabel); |
||||
|
||||
ga('send', 'screenview', { |
||||
appName: 'EmbedVR', |
||||
screenName: modeLabel |
||||
}); |
||||
|
||||
var now = window.performance.now(); |
||||
var msSinceLastModeChange = Math.round(now - this.lastModeChangeTime); |
||||
ga('send', 'timing', 'Time spent in mode', lastModeLabel, msSinceLastModeChange); |
||||
|
||||
this.lastModeChangeTime = now; |
||||
this.lastMode = mode; |
||||
} |
||||
|
||||
window.analytics = new Analytics(); |
||||
@ -0,0 +1,20 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
var Eyes = { |
||||
LEFT: 1, |
||||
RIGHT: 2 |
||||
}; |
||||
|
||||
module.exports = Eyes; |
||||
@ -0,0 +1,403 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
var EventEmitter = require('eventemitter3'); |
||||
var TWEEN = require('@tweenjs/tween.js'); |
||||
|
||||
var Util = require('../util'); |
||||
|
||||
// Constants for the focus/blur animation.
|
||||
var NORMAL_SCALE = new THREE.Vector3(1, 1, 1); |
||||
var FOCUS_SCALE = new THREE.Vector3(1.2, 1.2, 1.2); |
||||
var FOCUS_DURATION = 200; |
||||
|
||||
// Constants for the active/inactive animation.
|
||||
var INACTIVE_COLOR = new THREE.Color(1, 1, 1); |
||||
var ACTIVE_COLOR = new THREE.Color(0.8, 0, 0); |
||||
var ACTIVE_DURATION = 100; |
||||
|
||||
// Constants for opacity.
|
||||
var MAX_INNER_OPACITY = 0.8; |
||||
var MAX_OUTER_OPACITY = 0.5; |
||||
var FADE_START_ANGLE_DEG = 35; |
||||
var FADE_END_ANGLE_DEG = 60; |
||||
/** |
||||
* Responsible for rectangular hot spots that the user can interact with. |
||||
* |
||||
* Specific duties: |
||||
* Adding and removing hotspots. |
||||
* Rendering the hotspots (debug mode only). |
||||
* Notifying when hotspots are interacted with. |
||||
* |
||||
* Emits the following events: |
||||
* click (id): a hotspot is clicked. |
||||
* focus (id): a hotspot is focused. |
||||
* blur (id): a hotspot is no longer hovered over. |
||||
*/ |
||||
function HotspotRenderer(worldRenderer) { |
||||
this.worldRenderer = worldRenderer; |
||||
this.scene = worldRenderer.scene; |
||||
|
||||
// Note: this event must be added to document.body and not to window for it to
|
||||
// work inside iOS iframes.
|
||||
var body = document.body; |
||||
// Bind events for hotspot interaction.
|
||||
if (!Util.isMobile()) { |
||||
// Only enable mouse events on desktop.
|
||||
body.addEventListener('mousedown', this.onMouseDown_.bind(this), false); |
||||
body.addEventListener('mousemove', this.onMouseMove_.bind(this), false); |
||||
body.addEventListener('mouseup', this.onMouseUp_.bind(this), false); |
||||
} |
||||
body.addEventListener('touchstart', this.onTouchStart_.bind(this), false); |
||||
body.addEventListener('touchend', this.onTouchEnd_.bind(this), false); |
||||
|
||||
// Add a placeholder for hotspots.
|
||||
this.hotspotRoot = new THREE.Object3D(); |
||||
// Align the center with the center of the camera too.
|
||||
this.hotspotRoot.rotation.y = Math.PI / 2; |
||||
this.scene.add(this.hotspotRoot); |
||||
|
||||
// All hotspot IDs.
|
||||
this.hotspots = {}; |
||||
|
||||
// Currently selected hotspots.
|
||||
this.selectedHotspots = {}; |
||||
|
||||
// Hotspots that the last touchstart / mousedown event happened for.
|
||||
this.downHotspots = {}; |
||||
|
||||
// For raycasting. Initialize mouse to be off screen initially.
|
||||
this.pointer = new THREE.Vector2(1, 1); |
||||
this.raycaster = new THREE.Raycaster(); |
||||
} |
||||
HotspotRenderer.prototype = new EventEmitter(); |
||||
|
||||
/** |
||||
* @param pitch {Number} The latitude of center, specified in degrees, between |
||||
* -90 and 90, with 0 at the horizon. |
||||
* @param yaw {Number} The longitude of center, specified in degrees, between |
||||
* -180 and 180, with 0 at the image center. |
||||
* @param radius {Number} The radius of the hotspot, specified in meters. |
||||
* @param distance {Number} The distance of the hotspot from camera, specified |
||||
* in meters. |
||||
* @param hotspotId {String} The ID of the hotspot. |
||||
*/ |
||||
HotspotRenderer.prototype.add = function(pitch, yaw, radius, distance, id) { |
||||
// If a hotspot already exists with this ID, stop.
|
||||
if (this.hotspots[id]) { |
||||
// TODO: Proper error reporting.
|
||||
console.error('Attempt to add hotspot with existing id %s.', id); |
||||
return; |
||||
} |
||||
var hotspot = this.createHotspot_(radius, distance); |
||||
hotspot.name = id; |
||||
|
||||
// Position the hotspot based on the pitch and yaw specified.
|
||||
var quat = new THREE.Quaternion(); |
||||
quat.setFromEuler(new THREE.Euler(THREE.Math.degToRad(pitch), THREE.Math.degToRad(yaw), 0, 'ZYX')); |
||||
hotspot.position.applyQuaternion(quat); |
||||
hotspot.lookAt(new THREE.Vector3()); |
||||
|
||||
this.hotspotRoot.add(hotspot); |
||||
this.hotspots[id] = hotspot; |
||||
} |
||||
|
||||
/** |
||||
* Removes a hotspot based on the ID. |
||||
* |
||||
* @param ID {String} Identifier of the hotspot to be removed. |
||||
*/ |
||||
HotspotRenderer.prototype.remove = function(id) { |
||||
// If there's no hotspot with this ID, fail.
|
||||
if (!this.hotspots[id]) { |
||||
// TODO: Proper error reporting.
|
||||
console.error('Attempt to remove non-existing hotspot with id %s.', id); |
||||
return; |
||||
} |
||||
// Remove the mesh from the scene.
|
||||
this.hotspotRoot.remove(this.hotspots[id]); |
||||
|
||||
// If this hotspot was selected, make sure it gets unselected.
|
||||
delete this.selectedHotspots[id]; |
||||
delete this.downHotspots[id]; |
||||
delete this.hotspots[id]; |
||||
this.emit('blur', id); |
||||
}; |
||||
|
||||
/** |
||||
* Clears all hotspots from the pano. Often called when changing panos. |
||||
*/ |
||||
HotspotRenderer.prototype.clearAll = function() { |
||||
for (var id in this.hotspots) { |
||||
this.remove(id); |
||||
} |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.getCount = function() { |
||||
var count = 0; |
||||
for (var id in this.hotspots) { |
||||
count += 1; |
||||
} |
||||
return count; |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.update = function(camera) { |
||||
if (this.worldRenderer.isVRMode()) { |
||||
this.pointer.set(0, 0); |
||||
} |
||||
// Update the picking ray with the camera and mouse position.
|
||||
this.raycaster.setFromCamera(this.pointer, camera); |
||||
|
||||
// Fade hotspots out if they are really far from center to avoid overly
|
||||
// distorted visuals.
|
||||
this.fadeOffCenterHotspots_(camera); |
||||
|
||||
var hotspots = this.hotspotRoot.children; |
||||
|
||||
// Go through all hotspots to see if they are currently selected.
|
||||
for (var i = 0; i < hotspots.length; i++) { |
||||
var hotspot = hotspots[i]; |
||||
//hotspot.lookAt(camera.position);
|
||||
var id = hotspot.name; |
||||
// Check if hotspot is intersected with the picking ray.
|
||||
var intersects = this.raycaster.intersectObjects(hotspot.children); |
||||
var isIntersected = (intersects.length > 0); |
||||
|
||||
// If newly selected, emit a focus event.
|
||||
if (isIntersected && !this.selectedHotspots[id]) { |
||||
this.emit('focus', id); |
||||
this.focus_(id); |
||||
} |
||||
// If no longer selected, emit a blur event.
|
||||
if (!isIntersected && this.selectedHotspots[id]) { |
||||
this.emit('blur', id); |
||||
this.blur_(id); |
||||
} |
||||
// Update the set of selected hotspots.
|
||||
if (isIntersected) { |
||||
this.selectedHotspots[id] = true; |
||||
} else { |
||||
delete this.selectedHotspots[id]; |
||||
} |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Toggle whether or not hotspots are visible. |
||||
*/ |
||||
HotspotRenderer.prototype.setVisibility = function(isVisible) { |
||||
this.hotspotRoot.visible = isVisible; |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.onTouchStart_ = function(e) { |
||||
// In VR mode, don't touch the pointer position.
|
||||
if (!this.worldRenderer.isVRMode()) { |
||||
this.updateTouch_(e); |
||||
} |
||||
|
||||
// Force a camera update to see if any hotspots were selected.
|
||||
this.update(this.worldRenderer.camera); |
||||
|
||||
this.downHotspots = {}; |
||||
for (var id in this.selectedHotspots) { |
||||
this.downHotspots[id] = true; |
||||
this.down_(id); |
||||
} |
||||
return false; |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.onTouchEnd_ = function(e) { |
||||
// If no hotspots are pressed, emit an empty click event.
|
||||
if (Util.isEmptyObject(this.downHotspots)) { |
||||
this.emit('click'); |
||||
return; |
||||
} |
||||
|
||||
// Only emit a click if the finger was down on the same hotspot before.
|
||||
for (var id in this.downHotspots) { |
||||
this.emit('click', id); |
||||
this.up_(id); |
||||
e.preventDefault(); |
||||
} |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.updateTouch_ = function(e) { |
||||
var size = this.getSize_(); |
||||
var touch = e.touches[0]; |
||||
this.pointer.x = (touch.clientX / size.width) * 2 - 1; |
||||
this.pointer.y = - (touch.clientY / size.height) * 2 + 1; |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.onMouseDown_ = function(e) { |
||||
this.updateMouse_(e); |
||||
|
||||
this.downHotspots = {}; |
||||
for (var id in this.selectedHotspots) { |
||||
this.downHotspots[id] = true; |
||||
this.down_(id); |
||||
} |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.onMouseMove_ = function(e) { |
||||
this.updateMouse_(e); |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.onMouseUp_ = function(e) { |
||||
this.updateMouse_(e); |
||||
|
||||
// If no hotspots are pressed, emit an empty click event.
|
||||
if (Util.isEmptyObject(this.downHotspots)) { |
||||
this.emit('click'); |
||||
return; |
||||
} |
||||
|
||||
// Only emit a click if the mouse was down on the same hotspot before.
|
||||
for (var id in this.selectedHotspots) { |
||||
if (id in this.downHotspots) { |
||||
this.emit('click', id); |
||||
this.up_(id); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.updateMouse_ = function(e) { |
||||
var size = this.getSize_(); |
||||
this.pointer.x = (e.clientX / size.width) * 2 - 1; |
||||
this.pointer.y = - (e.clientY / size.height) * 2 + 1; |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.getSize_ = function() { |
||||
var canvas = this.worldRenderer.renderer.domElement; |
||||
return this.worldRenderer.renderer.getSize(); |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.createHotspot_ = function(radius, distance) { |
||||
var innerGeometry = new THREE.CircleGeometry(radius, 32); |
||||
|
||||
var innerMaterial = new THREE.MeshBasicMaterial({ |
||||
color: 0xffffff, side: THREE.DoubleSide, transparent: true, |
||||
opacity: MAX_INNER_OPACITY, depthTest: false |
||||
}); |
||||
|
||||
var inner = new THREE.Mesh(innerGeometry, innerMaterial); |
||||
inner.name = 'inner'; |
||||
|
||||
var outerMaterial = new THREE.MeshBasicMaterial({ |
||||
color: 0xffffff, side: THREE.DoubleSide, transparent: true, |
||||
opacity: MAX_OUTER_OPACITY, depthTest: false |
||||
}); |
||||
var outerGeometry = new THREE.RingGeometry(radius * 0.85, radius, 32); |
||||
var outer = new THREE.Mesh(outerGeometry, outerMaterial); |
||||
outer.name = 'outer'; |
||||
|
||||
// Position at the extreme end of the sphere.
|
||||
var hotspot = new THREE.Object3D(); |
||||
hotspot.position.z = -distance; |
||||
hotspot.scale.copy(NORMAL_SCALE); |
||||
|
||||
hotspot.add(inner); |
||||
hotspot.add(outer); |
||||
|
||||
return hotspot; |
||||
}; |
||||
|
||||
/** |
||||
* Large aspect ratios tend to cause visually jarring distortions on the sides. |
||||
* Here we fade hotspots out to avoid them. |
||||
*/ |
||||
HotspotRenderer.prototype.fadeOffCenterHotspots_ = function(camera) { |
||||
var lookAt = new THREE.Vector3(1, 0, 0); |
||||
lookAt.applyQuaternion(camera.quaternion); |
||||
// Take into account the camera parent too.
|
||||
lookAt.applyQuaternion(camera.parent.quaternion); |
||||
|
||||
// Go through each hotspot. Calculate how far off center it is.
|
||||
for (var id in this.hotspots) { |
||||
var hotspot = this.hotspots[id]; |
||||
var angle = hotspot.position.angleTo(lookAt); |
||||
var angleDeg = THREE.Math.radToDeg(angle); |
||||
var isVisible = angleDeg < 45; |
||||
var opacity; |
||||
if (angleDeg < FADE_START_ANGLE_DEG) { |
||||
opacity = 1; |
||||
} else if (angleDeg > FADE_END_ANGLE_DEG) { |
||||
opacity = 0; |
||||
} else { |
||||
// We are in the case START < angle < END. Linearly interpolate.
|
||||
var range = FADE_END_ANGLE_DEG - FADE_START_ANGLE_DEG; |
||||
var value = FADE_END_ANGLE_DEG - angleDeg; |
||||
opacity = value / range; |
||||
} |
||||
|
||||
// Opacity a function of angle. If angle is large, opacity is zero. At some
|
||||
// point, ramp opacity down.
|
||||
this.setOpacity_(id, opacity); |
||||
} |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.focus_ = function(id) { |
||||
var hotspot = this.hotspots[id]; |
||||
|
||||
// Tween scale of hotspot.
|
||||
this.tween = new TWEEN.Tween(hotspot.scale).to(FOCUS_SCALE, FOCUS_DURATION) |
||||
.easing(TWEEN.Easing.Quadratic.InOut) |
||||
.start(); |
||||
|
||||
if (this.worldRenderer.isVRMode()) { |
||||
this.timeForHospotClick = setTimeout(function () { |
||||
this.emit('click', id); |
||||
}, 1200 ) |
||||
} |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.blur_ = function(id) { |
||||
var hotspot = this.hotspots[id]; |
||||
|
||||
this.tween = new TWEEN.Tween(hotspot.scale).to(NORMAL_SCALE, FOCUS_DURATION) |
||||
.easing(TWEEN.Easing.Quadratic.InOut) |
||||
.start(); |
||||
|
||||
if (this.timeForHospotClick) { |
||||
clearTimeout( this.timeForHospotClick ); |
||||
} |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.down_ = function(id) { |
||||
// Become active.
|
||||
var hotspot = this.hotspots[id]; |
||||
var outer = hotspot.getObjectByName('inner'); |
||||
|
||||
this.tween = new TWEEN.Tween(outer.material.color).to(ACTIVE_COLOR, ACTIVE_DURATION) |
||||
.start(); |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.up_ = function(id) { |
||||
// Become inactive.
|
||||
var hotspot = this.hotspots[id]; |
||||
var outer = hotspot.getObjectByName('inner'); |
||||
|
||||
this.tween = new TWEEN.Tween(outer.material.color).to(INACTIVE_COLOR, ACTIVE_DURATION) |
||||
.start(); |
||||
}; |
||||
|
||||
HotspotRenderer.prototype.setOpacity_ = function(id, opacity) { |
||||
var hotspot = this.hotspots[id]; |
||||
var outer = hotspot.getObjectByName('outer'); |
||||
var inner = hotspot.getObjectByName('inner'); |
||||
|
||||
outer.material.opacity = opacity * MAX_OUTER_OPACITY; |
||||
inner.material.opacity = opacity * MAX_INNER_OPACITY; |
||||
}; |
||||
|
||||
module.exports = HotspotRenderer; |
||||
@ -0,0 +1,68 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
var EventEmitter = require('eventemitter3'); |
||||
var Message = require('../message'); |
||||
var Util = require('../util'); |
||||
|
||||
|
||||
/** |
||||
* Sits in an embedded iframe, receiving messages from a containing |
||||
* iFrame. This facilitates an API which provides the following features: |
||||
* |
||||
* Playing and pausing content. |
||||
* Adding hotspots. |
||||
* Sending messages back to the containing iframe when hotspot is clicked |
||||
* Sending analytics events to containing iframe. |
||||
* |
||||
* Note: this script used to also respond to synthetic devicemotion events, but |
||||
* no longer does so. This is because as of iOS 9.2, Safari disallows listening |
||||
* for devicemotion events within cross-device iframes. To work around this, the |
||||
* webvr-polyfill responds to the postMessage event containing devicemotion |
||||
* information (sent by the iframe-message-sender in the VR View API). |
||||
*/ |
||||
function IFrameMessageReceiver() { |
||||
window.addEventListener('message', this.onMessage_.bind(this), false); |
||||
} |
||||
IFrameMessageReceiver.prototype = new EventEmitter(); |
||||
|
||||
IFrameMessageReceiver.prototype.onMessage_ = function(event) { |
||||
if (Util.isDebug()) { |
||||
console.log('onMessage_', event); |
||||
} |
||||
|
||||
var message = event.data; |
||||
var type = message.type.toLowerCase(); |
||||
var data = message.data; |
||||
|
||||
switch (type) { |
||||
case Message.SET_CONTENT: |
||||
case Message.SET_VOLUME: |
||||
case Message.MUTED: |
||||
case Message.ADD_HOTSPOT: |
||||
case Message.PLAY: |
||||
case Message.PAUSE: |
||||
case Message.SET_CURRENT_TIME: |
||||
case Message.GET_POSITION: |
||||
case Message.SET_FULLSCREEN: |
||||
this.emit(type, data); |
||||
break; |
||||
default: |
||||
if (Util.isDebug()) { |
||||
console.warn('Got unknown message of type %s from %s', message.type, message.origin); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
module.exports = IFrameMessageReceiver; |
||||
@ -0,0 +1,54 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
/** |
||||
* Shows a 2D loading indicator while various pieces of EmbedVR load. |
||||
*/ |
||||
function LoadingIndicator() { |
||||
this.el = this.build_(); |
||||
document.body.appendChild(this.el); |
||||
this.show(); |
||||
} |
||||
|
||||
LoadingIndicator.prototype.build_ = function() { |
||||
var overlay = document.createElement('div'); |
||||
var s = overlay.style; |
||||
s.position = 'fixed'; |
||||
s.top = 0; |
||||
s.left = 0; |
||||
s.width = '100%'; |
||||
s.height = '100%'; |
||||
s.background = '#eee'; |
||||
var img = document.createElement('img'); |
||||
img.src = 'images/loading.gif'; |
||||
var s = img.style; |
||||
s.position = 'absolute'; |
||||
s.top = '50%'; |
||||
s.left = '50%'; |
||||
s.transform = 'translate(-50%, -50%)'; |
||||
|
||||
overlay.appendChild(img); |
||||
return overlay; |
||||
}; |
||||
|
||||
LoadingIndicator.prototype.hide = function() { |
||||
this.el.style.display = 'none'; |
||||
}; |
||||
|
||||
LoadingIndicator.prototype.show = function() { |
||||
this.el.style.display = 'block'; |
||||
}; |
||||
|
||||
module.exports = LoadingIndicator; |
||||
@ -0,0 +1,369 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
// Initialize the loading indicator as quickly as possible to give the user
|
||||
// immediate feedback.
|
||||
var LoadingIndicator = require('./loading-indicator'); |
||||
var loadIndicator = new LoadingIndicator(); |
||||
|
||||
var ES6Promise = require('es6-promise'); |
||||
// Polyfill ES6 promises for IE.
|
||||
ES6Promise.polyfill(); |
||||
|
||||
var IFrameMessageReceiver = require('./iframe-message-receiver'); |
||||
var Message = require('../message'); |
||||
var SceneInfo = require('./scene-info'); |
||||
var Stats = require('../../node_modules/stats-js/build/stats.min'); |
||||
var Util = require('../util'); |
||||
var WebVRPolyfill = require('webvr-polyfill'); |
||||
var WorldRenderer = require('./world-renderer'); |
||||
|
||||
var receiver = new IFrameMessageReceiver(); |
||||
receiver.on(Message.PLAY, onPlayRequest); |
||||
receiver.on(Message.PAUSE, onPauseRequest); |
||||
receiver.on(Message.ADD_HOTSPOT, onAddHotspot); |
||||
receiver.on(Message.SET_CONTENT, onSetContent); |
||||
receiver.on(Message.SET_VOLUME, onSetVolume); |
||||
receiver.on(Message.MUTED, onMuted); |
||||
receiver.on(Message.SET_CURRENT_TIME, onUpdateCurrentTime); |
||||
receiver.on(Message.GET_POSITION, onGetPosition); |
||||
receiver.on(Message.SET_FULLSCREEN, onSetFullscreen); |
||||
|
||||
window.addEventListener('load', onLoad); |
||||
|
||||
var stats = new Stats(); |
||||
var scene = SceneInfo.loadFromGetParams(); |
||||
|
||||
var worldRenderer = new WorldRenderer(scene); |
||||
worldRenderer.on('error', onRenderError); |
||||
worldRenderer.on('load', onRenderLoad); |
||||
worldRenderer.on('modechange', onModeChange); |
||||
worldRenderer.on('ended', onEnded); |
||||
worldRenderer.on('play', onPlay); |
||||
worldRenderer.hotspotRenderer.on('click', onHotspotClick); |
||||
|
||||
window.worldRenderer = worldRenderer; |
||||
|
||||
var isReadySent = false; |
||||
var volume = 0; |
||||
|
||||
function onLoad() { |
||||
if (!Util.isWebGLEnabled()) { |
||||
showError('WebGL not supported.'); |
||||
return; |
||||
} |
||||
|
||||
// Load the scene.
|
||||
worldRenderer.setScene(scene); |
||||
|
||||
if (scene.isDebug) { |
||||
// Show stats.
|
||||
showStats(); |
||||
} |
||||
|
||||
if (scene.isYawOnly) { |
||||
WebVRConfig = window.WebVRConfig || {}; |
||||
WebVRConfig.YAW_ONLY = true; |
||||
} |
||||
|
||||
requestAnimationFrame(loop); |
||||
} |
||||
|
||||
|
||||
function onVideoTap() { |
||||
worldRenderer.videoProxy.play(); |
||||
hidePlayButton(); |
||||
|
||||
// Prevent multiple play() calls on the video element.
|
||||
document.body.removeEventListener('touchend', onVideoTap); |
||||
} |
||||
|
||||
function onRenderLoad(event) { |
||||
if (event.videoElement) { |
||||
|
||||
var scene = SceneInfo.loadFromGetParams(); |
||||
|
||||
// On mobile, tell the user they need to tap to start. Otherwise, autoplay.
|
||||
if (Util.isMobile()) { |
||||
// Tell user to tap to start.
|
||||
showPlayButton(); |
||||
document.body.addEventListener('touchend', onVideoTap); |
||||
} else { |
||||
event.videoElement.play(); |
||||
} |
||||
|
||||
// Attach to pause and play events, to notify the API.
|
||||
event.videoElement.addEventListener('pause', onPause); |
||||
event.videoElement.addEventListener('play', onPlay); |
||||
event.videoElement.addEventListener('timeupdate', onGetCurrentTime); |
||||
event.videoElement.addEventListener('ended', onEnded); |
||||
} |
||||
// Hide loading indicator.
|
||||
loadIndicator.hide(); |
||||
|
||||
// Autopan only on desktop, for photos only, and only if autopan is enabled.
|
||||
if (!Util.isMobile() && !worldRenderer.sceneInfo.video && !worldRenderer.sceneInfo.isAutopanOff) { |
||||
worldRenderer.autopan(); |
||||
} |
||||
|
||||
// Notify the API that we are ready, but only do this once.
|
||||
if (!isReadySent) { |
||||
if (event.videoElement) { |
||||
Util.sendParentMessage({ |
||||
type: 'ready', |
||||
data: { |
||||
duration: event.videoElement.duration |
||||
} |
||||
}); |
||||
} else { |
||||
Util.sendParentMessage({ |
||||
type: 'ready' |
||||
}); |
||||
} |
||||
|
||||
isReadySent = true; |
||||
} |
||||
} |
||||
|
||||
function onPlayRequest() { |
||||
if (!worldRenderer.videoProxy) { |
||||
onApiError('Attempt to pause, but no video found.'); |
||||
return; |
||||
} |
||||
worldRenderer.videoProxy.play(); |
||||
} |
||||
|
||||
function onPauseRequest() { |
||||
if (!worldRenderer.videoProxy) { |
||||
onApiError('Attempt to pause, but no video found.'); |
||||
return; |
||||
} |
||||
worldRenderer.videoProxy.pause(); |
||||
} |
||||
|
||||
function onAddHotspot(e) { |
||||
if (Util.isDebug()) { |
||||
console.log('onAddHotspot', e); |
||||
} |
||||
// TODO: Implement some validation?
|
||||
|
||||
var pitch = parseFloat(e.pitch); |
||||
var yaw = parseFloat(e.yaw); |
||||
var radius = parseFloat(e.radius); |
||||
var distance = parseFloat(e.distance); |
||||
var id = e.id; |
||||
worldRenderer.hotspotRenderer.add(pitch, yaw, radius, distance, id); |
||||
} |
||||
|
||||
function onSetContent(e) { |
||||
if (Util.isDebug()) { |
||||
console.log('onSetContent', e); |
||||
} |
||||
// Remove all of the hotspots.
|
||||
worldRenderer.hotspotRenderer.clearAll(); |
||||
// Fade to black.
|
||||
worldRenderer.sphereRenderer.setOpacity(0, 500).then(function() { |
||||
// Then load the new scene.
|
||||
var scene = SceneInfo.loadFromAPIParams(e.contentInfo); |
||||
worldRenderer.destroy(); |
||||
|
||||
// Update the URL to reflect the new scene. This is important particularily
|
||||
// on iOS where we use a fake fullscreen mode.
|
||||
var url = scene.getCurrentUrl(); |
||||
//console.log('Updating url to be %s', url);
|
||||
window.history.pushState(null, 'VR View', url); |
||||
|
||||
// And set the new scene.
|
||||
return worldRenderer.setScene(scene); |
||||
}).then(function() { |
||||
// Then fade the scene back in.
|
||||
worldRenderer.sphereRenderer.setOpacity(1, 500); |
||||
}); |
||||
} |
||||
|
||||
function onSetVolume(e) { |
||||
// Only work for video. If there's no video, send back an error.
|
||||
if (!worldRenderer.videoProxy) { |
||||
onApiError('Attempt to set volume, but no video found.'); |
||||
return; |
||||
} |
||||
|
||||
worldRenderer.videoProxy.setVolume(e.volumeLevel); |
||||
volume = e.volumeLevel; |
||||
Util.sendParentMessage({ |
||||
type: 'volumechange', |
||||
data: e.volumeLevel |
||||
}); |
||||
} |
||||
|
||||
function onMuted(e) { |
||||
// Only work for video. If there's no video, send back an error.
|
||||
if (!worldRenderer.videoProxy) { |
||||
onApiError('Attempt to mute, but no video found.'); |
||||
return; |
||||
} |
||||
|
||||
worldRenderer.videoProxy.mute(e.muteState); |
||||
|
||||
Util.sendParentMessage({ |
||||
type: 'muted', |
||||
data: e.muteState |
||||
}); |
||||
} |
||||
|
||||
function onUpdateCurrentTime(time) { |
||||
if (!worldRenderer.videoProxy) { |
||||
onApiError('Attempt to pause, but no video found.'); |
||||
return; |
||||
} |
||||
|
||||
worldRenderer.videoProxy.setCurrentTime(time); |
||||
onGetCurrentTime(); |
||||
} |
||||
|
||||
function onGetCurrentTime() { |
||||
var time = worldRenderer.videoProxy.getCurrentTime(); |
||||
Util.sendParentMessage({ |
||||
type: 'timeupdate', |
||||
data: time |
||||
}); |
||||
} |
||||
|
||||
function onSetFullscreen() { |
||||
if (!worldRenderer.videoProxy) { |
||||
onApiError('Attempt to set fullscreen, but no video found.'); |
||||
return; |
||||
} |
||||
worldRenderer.manager.onFSClick_(); |
||||
} |
||||
|
||||
function onApiError(message) { |
||||
console.error(message); |
||||
Util.sendParentMessage({ |
||||
type: 'error', |
||||
data: {message: message} |
||||
}); |
||||
} |
||||
|
||||
function onModeChange(mode) { |
||||
Util.sendParentMessage({ |
||||
type: 'modechange', |
||||
data: {mode: mode} |
||||
}); |
||||
} |
||||
|
||||
function onHotspotClick(id) { |
||||
Util.sendParentMessage({ |
||||
type: 'click', |
||||
data: {id: id} |
||||
}); |
||||
} |
||||
|
||||
function onPlay() { |
||||
Util.sendParentMessage({ |
||||
type: 'paused', |
||||
data: false |
||||
}); |
||||
} |
||||
|
||||
function onPause() { |
||||
Util.sendParentMessage({ |
||||
type: 'paused', |
||||
data: true |
||||
}); |
||||
} |
||||
|
||||
function onEnded() { |
||||
Util.sendParentMessage({ |
||||
type: 'ended', |
||||
data: true |
||||
}); |
||||
} |
||||
|
||||
function onSceneError(message) { |
||||
showError('Loader: ' + message); |
||||
} |
||||
|
||||
function onRenderError(message) { |
||||
showError('Render: ' + message); |
||||
} |
||||
|
||||
function showError(message) { |
||||
// Hide loading indicator.
|
||||
loadIndicator.hide(); |
||||
|
||||
// Sanitize `message` as it could contain user supplied
|
||||
// values. Re-add the space character as to not modify the
|
||||
// error messages used throughout the codebase.
|
||||
message = encodeURI(message).replace(/%20/g, ' '); |
||||
|
||||
var error = document.querySelector('#error'); |
||||
error.classList.add('visible'); |
||||
error.querySelector('.message').innerHTML = message; |
||||
|
||||
error.querySelector('.title').innerHTML = 'Error'; |
||||
} |
||||
|
||||
function hideError() { |
||||
var error = document.querySelector('#error'); |
||||
error.classList.remove('visible'); |
||||
} |
||||
|
||||
function showPlayButton() { |
||||
var playButton = document.querySelector('#play-overlay'); |
||||
playButton.classList.add('visible'); |
||||
} |
||||
|
||||
function hidePlayButton() { |
||||
var playButton = document.querySelector('#play-overlay'); |
||||
playButton.classList.remove('visible'); |
||||
} |
||||
|
||||
function showStats() { |
||||
stats.setMode(0); // 0: fps, 1: ms
|
||||
|
||||
// Align bottom-left.
|
||||
stats.domElement.style.position = 'absolute'; |
||||
stats.domElement.style.left = '0px'; |
||||
stats.domElement.style.bottom = '0px'; |
||||
document.body.appendChild(stats.domElement); |
||||
} |
||||
|
||||
function loop(time) { |
||||
// Use the VRDisplay RAF if it is present.
|
||||
if (worldRenderer.vrDisplay) { |
||||
worldRenderer.vrDisplay.requestAnimationFrame(loop); |
||||
} else { |
||||
requestAnimationFrame(loop); |
||||
} |
||||
|
||||
stats.begin(); |
||||
// Update the video if needed.
|
||||
if (worldRenderer.videoProxy) { |
||||
worldRenderer.videoProxy.update(time); |
||||
} |
||||
worldRenderer.render(time); |
||||
worldRenderer.submitFrame(); |
||||
stats.end(); |
||||
} |
||||
function onGetPosition() { |
||||
Util.sendParentMessage({ |
||||
type: 'getposition', |
||||
data: { |
||||
Yaw: worldRenderer.camera.rotation.y * 180 / Math.PI, |
||||
Pitch: worldRenderer.camera.rotation.x * 180 / Math.PI |
||||
} |
||||
}); |
||||
} |
||||
@ -0,0 +1,41 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
function ReticleRenderer(camera) { |
||||
this.camera = camera; |
||||
|
||||
this.reticle = this.createReticle_(); |
||||
// In front of the hotspot itself, which is at r=0.99.
|
||||
this.reticle.position.z = -0.97; |
||||
camera.add(this.reticle); |
||||
|
||||
this.setVisibility(false); |
||||
} |
||||
|
||||
ReticleRenderer.prototype.setVisibility = function(isVisible) { |
||||
// TODO: Tween the transition.
|
||||
this.reticle.visible = isVisible; |
||||
}; |
||||
|
||||
ReticleRenderer.prototype.createReticle_ = function() { |
||||
// Make a torus.
|
||||
var geometry = new THREE.TorusGeometry(0.02, 0.005, 10, 20); |
||||
var material = new THREE.MeshBasicMaterial({color: 0x000000}); |
||||
var torus = new THREE.Mesh(geometry, material); |
||||
|
||||
return torus; |
||||
}; |
||||
|
||||
module.exports = ReticleRenderer; |
||||
@ -0,0 +1,125 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
var Util = require('../util'); |
||||
|
||||
var CAMEL_TO_UNDERSCORE = { |
||||
video: 'video', |
||||
image: 'image', |
||||
preview: 'preview', |
||||
loop: 'loop', |
||||
volume: 'volume', |
||||
muted: 'muted', |
||||
isStereo: 'is_stereo', |
||||
defaultYaw: 'default_yaw', |
||||
isYawOnly: 'is_yaw_only', |
||||
isDebug: 'is_debug', |
||||
isVROff: 'is_vr_off', |
||||
isAutopanOff: 'is_autopan_off', |
||||
hideFullscreenButton: 'hide_fullscreen_button' |
||||
}; |
||||
|
||||
/** |
||||
* Contains all information about a given scene. |
||||
*/ |
||||
function SceneInfo(opt_params) { |
||||
var params = opt_params || {}; |
||||
params.player = { |
||||
loop: opt_params.loop, |
||||
volume: opt_params.volume, |
||||
muted: opt_params.muted |
||||
}; |
||||
|
||||
this.image = params.image !== undefined ? encodeURI(params.image) : undefined; |
||||
this.preview = params.preview !== undefined ? encodeURI(params.preview) : undefined; |
||||
this.video = params.video !== undefined ? encodeURI(params.video) : undefined; |
||||
this.defaultYaw = THREE.Math.degToRad(params.defaultYaw || 0); |
||||
|
||||
this.isStereo = Util.parseBoolean(params.isStereo); |
||||
this.isYawOnly = Util.parseBoolean(params.isYawOnly); |
||||
this.isDebug = Util.parseBoolean(params.isDebug); |
||||
this.isVROff = Util.parseBoolean(params.isVROff); |
||||
this.isAutopanOff = Util.parseBoolean(params.isAutopanOff); |
||||
this.loop = Util.parseBoolean(params.player.loop); |
||||
this.volume = parseFloat( |
||||
params.player.volume ? params.player.volume : '1'); |
||||
this.muted = Util.parseBoolean(params.player.muted); |
||||
this.hideFullscreenButton = Util.parseBoolean(params.hideFullscreenButton); |
||||
} |
||||
|
||||
SceneInfo.loadFromGetParams = function() { |
||||
var params = {}; |
||||
for (var camelCase in CAMEL_TO_UNDERSCORE) { |
||||
var underscore = CAMEL_TO_UNDERSCORE[camelCase]; |
||||
params[camelCase] = Util.getQueryParameter(underscore) |
||||
|| ((window.WebVRConfig && window.WebVRConfig.PLAYER) ? window.WebVRConfig.PLAYER[underscore] : ""); |
||||
} |
||||
var scene = new SceneInfo(params); |
||||
if (!scene.isValid()) { |
||||
console.warn('Invalid scene: %s', scene.errorMessage); |
||||
} |
||||
return scene; |
||||
}; |
||||
|
||||
SceneInfo.loadFromAPIParams = function(underscoreParams) { |
||||
var params = {}; |
||||
for (var camelCase in CAMEL_TO_UNDERSCORE) { |
||||
var underscore = CAMEL_TO_UNDERSCORE[camelCase]; |
||||
if (underscoreParams[underscore]) { |
||||
params[camelCase] = underscoreParams[underscore]; |
||||
} |
||||
} |
||||
var scene = new SceneInfo(params); |
||||
if (!scene.isValid()) { |
||||
console.warn('Invalid scene: %s', scene.errorMessage); |
||||
} |
||||
return scene; |
||||
}; |
||||
|
||||
SceneInfo.prototype.isValid = function() { |
||||
// Either it's an image or a video.
|
||||
if (!this.image && !this.video) { |
||||
this.errorMessage = 'Either image or video URL must be specified.'; |
||||
return false; |
||||
} |
||||
if (this.image && !this.isValidImage_(this.image)) { |
||||
this.errorMessage = 'Invalid image URL: ' + this.image; |
||||
return false; |
||||
} |
||||
this.errorMessage = null; |
||||
return true; |
||||
}; |
||||
|
||||
/** |
||||
* Generates a URL to reflect this scene. |
||||
*/ |
||||
SceneInfo.prototype.getCurrentUrl = function() { |
||||
var url = location.protocol + '//' + location.host + location.pathname + '?'; |
||||
for (var camelCase in CAMEL_TO_UNDERSCORE) { |
||||
var underscore = CAMEL_TO_UNDERSCORE[camelCase]; |
||||
var value = this[camelCase]; |
||||
if (value !== undefined) { |
||||
url += underscore + '=' + value + '&'; |
||||
} |
||||
} |
||||
// Chop off the trailing ampersand.
|
||||
return url.substring(0, url.length - 1); |
||||
}; |
||||
|
||||
SceneInfo.prototype.isValidImage_ = function(imageUrl) { |
||||
return true; |
||||
}; |
||||
|
||||
module.exports = SceneInfo; |
||||
@ -0,0 +1,205 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
var Eyes = require('./eyes'); |
||||
var TWEEN = require('@tweenjs/tween.js'); |
||||
var Util = require('../util'); |
||||
var VideoType = require('../video-type'); |
||||
|
||||
function SphereRenderer(scene) { |
||||
this.scene = scene; |
||||
|
||||
// Create a transparent mask.
|
||||
this.createOpacityMask_(); |
||||
} |
||||
|
||||
/** |
||||
* Sets the photosphere based on the image in the source. Supports stereo and |
||||
* mono photospheres. |
||||
* |
||||
* @return {Promise} |
||||
*/ |
||||
SphereRenderer.prototype.setPhotosphere = function(src, opt_params) { |
||||
return new Promise(function(resolve, reject) { |
||||
this.resolve = resolve; |
||||
this.reject = reject; |
||||
|
||||
var params = opt_params || {}; |
||||
|
||||
this.isStereo = !!params.isStereo; |
||||
this.src = src; |
||||
|
||||
// Load texture.
|
||||
var loader = new THREE.TextureLoader(); |
||||
loader.crossOrigin = 'anonymous'; |
||||
loader.load(src, this.onTextureLoaded_.bind(this), undefined, |
||||
this.onTextureError_.bind(this)); |
||||
}.bind(this)); |
||||
}; |
||||
|
||||
/** |
||||
* @return {Promise} Yeah. |
||||
*/ |
||||
SphereRenderer.prototype.set360Video = function (videoElement, videoType, opt_params) { |
||||
return new Promise(function(resolve, reject) { |
||||
this.resolve = resolve; |
||||
this.reject = reject; |
||||
|
||||
var params = opt_params || {}; |
||||
|
||||
this.isStereo = !!params.isStereo; |
||||
|
||||
// Load the video texture.
|
||||
var videoTexture = new THREE.VideoTexture(videoElement); |
||||
videoTexture.minFilter = THREE.LinearFilter; |
||||
videoTexture.magFilter = THREE.LinearFilter; |
||||
videoTexture.generateMipmaps = false; |
||||
|
||||
if (Util.isSafari() && videoType === VideoType.HLS) { |
||||
// fix black screen issue on safari
|
||||
videoTexture.format = THREE.RGBAFormat; |
||||
videoTexture.flipY = false; |
||||
} else { |
||||
videoTexture.format = THREE.RGBFormat; |
||||
} |
||||
|
||||
videoTexture.needsUpdate = true; |
||||
|
||||
this.onTextureLoaded_(videoTexture); |
||||
}.bind(this)); |
||||
}; |
||||
|
||||
/** |
||||
* Set the opacity of the panorama. |
||||
* |
||||
* @param {Number} opacity How opaque we want the panorama to be. 0 means black, |
||||
* 1 means full color. |
||||
* @param {Number} duration Number of milliseconds the transition should take. |
||||
* |
||||
* @return {Promise} When the opacity change is complete. |
||||
*/ |
||||
SphereRenderer.prototype.setOpacity = function(opacity, duration) { |
||||
var scene = this.scene; |
||||
// If we want the opacity
|
||||
var overlayOpacity = 1 - opacity; |
||||
return new Promise(function(resolve, reject) { |
||||
var mask = scene.getObjectByName('opacityMask'); |
||||
var tween = new TWEEN.Tween({opacity: mask.material.opacity}) |
||||
.to({opacity: overlayOpacity}, duration) |
||||
.easing(TWEEN.Easing.Quadratic.InOut); |
||||
tween.onUpdate(function(e) { |
||||
mask.material.opacity = this.opacity; |
||||
}); |
||||
tween.onComplete(resolve).start(); |
||||
}); |
||||
}; |
||||
|
||||
SphereRenderer.prototype.onTextureLoaded_ = function(texture) { |
||||
var sphereLeft; |
||||
var sphereRight; |
||||
if (this.isStereo) { |
||||
sphereLeft = this.createPhotosphere_(texture, {offsetY: 0.5, scaleY: 0.5}); |
||||
sphereRight = this.createPhotosphere_(texture, {offsetY: 0, scaleY: 0.5}); |
||||
} else { |
||||
sphereLeft = this.createPhotosphere_(texture); |
||||
sphereRight = this.createPhotosphere_(texture); |
||||
} |
||||
|
||||
// Display in left and right eye respectively.
|
||||
sphereLeft.layers.set(Eyes.LEFT); |
||||
sphereLeft.eye = Eyes.LEFT; |
||||
sphereLeft.name = 'eyeLeft'; |
||||
sphereRight.layers.set(Eyes.RIGHT); |
||||
sphereRight.eye = Eyes.RIGHT; |
||||
sphereRight.name = 'eyeRight'; |
||||
|
||||
|
||||
this.scene.getObjectByName('photo').children = [sphereLeft, sphereRight]; |
||||
|
||||
this.resolve(); |
||||
}; |
||||
|
||||
SphereRenderer.prototype.onTextureError_ = function(error) { |
||||
this.reject('Unable to load texture from "' + this.src + '"'); |
||||
}; |
||||
|
||||
|
||||
SphereRenderer.prototype.createPhotosphere_ = function(texture, opt_params) { |
||||
var p = opt_params || {}; |
||||
p.scaleX = p.scaleX || 1; |
||||
p.scaleY = p.scaleY || 1; |
||||
p.offsetX = p.offsetX || 0; |
||||
p.offsetY = p.offsetY || 0; |
||||
p.phiStart = p.phiStart || 0; |
||||
p.phiLength = p.phiLength || Math.PI * 2; |
||||
p.thetaStart = p.thetaStart || 0; |
||||
p.thetaLength = p.thetaLength || Math.PI; |
||||
|
||||
var geometry = new THREE.SphereGeometry(1, 48, 48, |
||||
p.phiStart, p.phiLength, p.thetaStart, p.thetaLength); |
||||
geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1)); |
||||
var uvs = geometry.faceVertexUvs[0]; |
||||
for (var i = 0; i < uvs.length; i ++) { |
||||
for (var j = 0; j < 3; j ++) { |
||||
uvs[i][j].x *= p.scaleX; |
||||
uvs[i][j].x += p.offsetX; |
||||
uvs[i][j].y *= p.scaleY; |
||||
uvs[i][j].y += p.offsetY; |
||||
} |
||||
} |
||||
|
||||
var material; |
||||
if (texture.format === THREE.RGBAFormat && texture.flipY === false) { |
||||
material = new THREE.ShaderMaterial({ |
||||
uniforms: { |
||||
texture: { value: texture } |
||||
}, |
||||
vertexShader: [ |
||||
"varying vec2 vUV;", |
||||
"void main() {", |
||||
" vUV = vec2( uv.x, 1.0 - uv.y );", |
||||
" gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", |
||||
"}" |
||||
].join("\n"), |
||||
fragmentShader: [ |
||||
"uniform sampler2D texture;", |
||||
"varying vec2 vUV;", |
||||
"void main() {", |
||||
" gl_FragColor = texture2D( texture, vUV )" + (Util.isIOS() ? ".bgra" : "") + ";", |
||||
"}" |
||||
].join("\n") |
||||
}); |
||||
} else { |
||||
material = new THREE.MeshBasicMaterial({ map: texture }); |
||||
} |
||||
var out = new THREE.Mesh(geometry, material); |
||||
//out.visible = false;
|
||||
out.renderOrder = -1; |
||||
return out; |
||||
}; |
||||
|
||||
SphereRenderer.prototype.createOpacityMask_ = function() { |
||||
var geometry = new THREE.SphereGeometry(0.49, 48, 48); |
||||
var material = new THREE.MeshBasicMaterial({ |
||||
color: 0x000000, side: THREE.DoubleSide, opacity: 0, transparent: true}); |
||||
var opacityMask = new THREE.Mesh(geometry, material); |
||||
opacityMask.name = 'opacityMask'; |
||||
opacityMask.renderOrder = 1; |
||||
|
||||
this.scene.add(opacityMask); |
||||
return opacityMask; |
||||
}; |
||||
|
||||
module.exports = SphereRenderer; |
||||
@ -0,0 +1,130 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
var Util = require('../util'); |
||||
|
||||
/** |
||||
* A proxy class for working around the fact that as soon as a video is play()ed |
||||
* on iOS, Safari auto-fullscreens the video. |
||||
* |
||||
* TODO(smus): The entire raison d'etre for this class is to work around this |
||||
* issue. Once Safari implements some way to suppress this fullscreen player, we |
||||
* can remove this code. |
||||
*/ |
||||
function VideoProxy(videoElement) { |
||||
this.videoElement = videoElement; |
||||
// True if we're currently manually advancing the playhead (only on iOS).
|
||||
this.isFakePlayback = false; |
||||
|
||||
// When the video started playing.
|
||||
this.startTime = null; |
||||
} |
||||
|
||||
VideoProxy.prototype.play = function() { |
||||
if (Util.isIOS9OrLess()) { |
||||
this.startTime = performance.now(); |
||||
this.isFakePlayback = true; |
||||
|
||||
// Make an audio element to playback just the audio part.
|
||||
this.audioElement = new Audio(); |
||||
this.audioElement.src = this.videoElement.src; |
||||
this.audioElement.play(); |
||||
} else { |
||||
this.videoElement.play().then(function(e) { |
||||
console.log('Playing video.', e); |
||||
}); |
||||
} |
||||
}; |
||||
|
||||
VideoProxy.prototype.pause = function() { |
||||
if (Util.isIOS9OrLess() && this.isFakePlayback) { |
||||
this.isFakePlayback = true; |
||||
|
||||
this.audioElement.pause(); |
||||
} else { |
||||
this.videoElement.pause(); |
||||
} |
||||
}; |
||||
|
||||
VideoProxy.prototype.setVolume = function(volumeLevel) { |
||||
if (this.videoElement) { |
||||
// On iOS 10, the VideoElement.volume property is read-only. So we special
|
||||
// case muting and unmuting.
|
||||
if (Util.isIOS()) { |
||||
this.videoElement.muted = (volumeLevel === 0); |
||||
} else { |
||||
this.videoElement.volume = volumeLevel; |
||||
} |
||||
} |
||||
if (this.audioElement) { |
||||
this.audioElement.volume = volumeLevel; |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Set the attribute mute of the elements according with the muteState param. |
||||
* |
||||
* @param bool muteState |
||||
*/ |
||||
VideoProxy.prototype.mute = function(muteState) { |
||||
if (this.videoElement) { |
||||
this.videoElement.muted = muteState; |
||||
} |
||||
if (this.audioElement) { |
||||
this.audioElement.muted = muteState; |
||||
} |
||||
}; |
||||
|
||||
VideoProxy.prototype.getCurrentTime = function() { |
||||
return Util.isIOS9OrLess() ? this.audioElement.currentTime : this.videoElement.currentTime; |
||||
}; |
||||
|
||||
/** |
||||
* |
||||
* @param {Object} time |
||||
*/ |
||||
VideoProxy.prototype.setCurrentTime = function(time) { |
||||
if (this.videoElement) { |
||||
this.videoElement.currentTime = time.currentTime; |
||||
} |
||||
if (this.audioElement) { |
||||
this.audioElement.currentTime = time.currentTime; |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Called on RAF to progress playback. |
||||
*/ |
||||
VideoProxy.prototype.update = function() { |
||||
// Fakes playback for iOS only.
|
||||
if (!this.isFakePlayback) { |
||||
return; |
||||
} |
||||
var duration = this.videoElement.duration; |
||||
var now = performance.now(); |
||||
var delta = now - this.startTime; |
||||
var deltaS = delta / 1000; |
||||
this.videoElement.currentTime = deltaS; |
||||
|
||||
// Loop through the video
|
||||
if (deltaS > duration) { |
||||
this.startTime = now; |
||||
this.videoElement.currentTime = 0; |
||||
// Also restart the audio.
|
||||
this.audioElement.currentTime = 0; |
||||
} |
||||
}; |
||||
|
||||
module.exports = VideoProxy; |
||||
@ -0,0 +1,20 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
// Load EmbedVR.
|
||||
require('./main'); |
||||
|
||||
// Load Analytics for EmbedVR.
|
||||
require('./analytics'); |
||||
@ -0,0 +1,372 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
var AdaptivePlayer = require('./adaptive-player'); |
||||
var EventEmitter = require('eventemitter3'); |
||||
var Eyes = require('./eyes'); |
||||
var HotspotRenderer = require('./hotspot-renderer'); |
||||
var ReticleRenderer = require('./reticle-renderer'); |
||||
var SphereRenderer = require('./sphere-renderer'); |
||||
var TWEEN = require('@tweenjs/tween.js'); |
||||
var Util = require('../util'); |
||||
var VideoProxy = require('./video-proxy'); |
||||
var WebVRManager = require('webvr-boilerplate'); |
||||
|
||||
var AUTOPAN_DURATION = 3000; |
||||
var AUTOPAN_ANGLE = 0.4; |
||||
|
||||
/** |
||||
* The main WebGL rendering entry point. Manages the scene, camera, VR-related |
||||
* rendering updates. Interacts with the WebVRManager. |
||||
* |
||||
* Coordinates the other renderers: SphereRenderer, HotspotRenderer, |
||||
* ReticleRenderer. |
||||
* |
||||
* Also manages the AdaptivePlayer and VideoProxy. |
||||
* |
||||
* Emits the following events: |
||||
* load: when the scene is loaded. |
||||
* error: if there is an error loading the scene. |
||||
* modechange(Boolean isVR): if the mode (eg. VR, fullscreen, etc) changes. |
||||
*/ |
||||
function WorldRenderer(params) { |
||||
this.init_(params.hideFullscreenButton); |
||||
|
||||
this.sphereRenderer = new SphereRenderer(this.scene); |
||||
this.hotspotRenderer = new HotspotRenderer(this); |
||||
this.hotspotRenderer.on('focus', this.onHotspotFocus_.bind(this)); |
||||
this.hotspotRenderer.on('blur', this.onHotspotBlur_.bind(this)); |
||||
this.reticleRenderer = new ReticleRenderer(this.camera); |
||||
|
||||
// Get the VR Display as soon as we initialize.
|
||||
navigator.getVRDisplays().then(function(displays) { |
||||
if (displays.length > 0) { |
||||
this.vrDisplay = displays[0]; |
||||
} |
||||
}.bind(this)); |
||||
|
||||
} |
||||
WorldRenderer.prototype = new EventEmitter(); |
||||
|
||||
WorldRenderer.prototype.render = function(time) { |
||||
this.controls.update(); |
||||
TWEEN.update(time); |
||||
this.effect.render(this.scene, this.camera); |
||||
this.hotspotRenderer.update(this.camera); |
||||
}; |
||||
|
||||
/** |
||||
* @return {Promise} When the scene is fully loaded. |
||||
*/ |
||||
WorldRenderer.prototype.setScene = function(scene) { |
||||
var self = this; |
||||
var promise = new Promise(function(resolve, reject) { |
||||
self.sceneResolve = resolve; |
||||
self.sceneReject = reject; |
||||
}); |
||||
|
||||
if (!scene || !scene.isValid()) { |
||||
this.didLoadFail_(scene.errorMessage); |
||||
return; |
||||
} |
||||
|
||||
var params = { |
||||
isStereo: scene.isStereo, |
||||
loop: scene.loop, |
||||
volume: scene.volume, |
||||
muted: scene.muted |
||||
}; |
||||
|
||||
this.setDefaultYaw_(scene.defaultYaw || 0); |
||||
|
||||
// Disable VR mode if explicitly disabled, or if we're loading a video on iOS
|
||||
// 9 or earlier.
|
||||
if (scene.isVROff || (scene.video && Util.isIOS9OrLess())) { |
||||
this.manager.setVRCompatibleOverride(false); |
||||
} |
||||
|
||||
// Set various callback overrides in iOS.
|
||||
if (Util.isIOS()) { |
||||
this.manager.setFullscreenCallback(function() { |
||||
Util.sendParentMessage({type: 'enter-fullscreen'}); |
||||
}); |
||||
this.manager.setExitFullscreenCallback(function() { |
||||
Util.sendParentMessage({type: 'exit-fullscreen'}); |
||||
}); |
||||
this.manager.setVRCallback(function() { |
||||
Util.sendParentMessage({type: 'enter-vr'}); |
||||
}); |
||||
} |
||||
|
||||
// If we're dealing with an image, and not a video.
|
||||
if (scene.image && !scene.video) { |
||||
if (scene.preview) { |
||||
// First load the preview.
|
||||
this.sphereRenderer.setPhotosphere(scene.preview, params).then(function() { |
||||
// As soon as something is loaded, emit the load event to hide the
|
||||
// loading progress bar.
|
||||
self.didLoad_(); |
||||
// Then load the full resolution image.
|
||||
self.sphereRenderer.setPhotosphere(scene.image, params); |
||||
}).catch(self.didLoadFail_.bind(self)); |
||||
} else { |
||||
// No preview -- go straight to rendering the full image.
|
||||
this.sphereRenderer.setPhotosphere(scene.image, params).then(function() { |
||||
self.didLoad_(); |
||||
}).catch(self.didLoadFail_.bind(self)); |
||||
} |
||||
} else if (scene.video) { |
||||
if (Util.isIE11()) { |
||||
// On IE 11, if an 'image' param is provided, load it instead of showing
|
||||
// an error.
|
||||
//
|
||||
// TODO(smus): Once video textures are supported, remove this fallback.
|
||||
if (scene.image) { |
||||
this.sphereRenderer.setPhotosphere(scene.image, params).then(function() { |
||||
self.didLoad_(); |
||||
}).catch(self.didLoadFail_.bind(self)); |
||||
} else { |
||||
this.didLoadFail_('Video is not supported on IE11.'); |
||||
} |
||||
} else { |
||||
this.player = new AdaptivePlayer(params); |
||||
this.player.on('load', function(videoElement, videoType) { |
||||
self.sphereRenderer.set360Video(videoElement, videoType, params).then(function() { |
||||
self.didLoad_({videoElement: videoElement}); |
||||
}).catch(self.didLoadFail_.bind(self)); |
||||
}); |
||||
this.player.on('error', function(error) { |
||||
self.didLoadFail_('Video load error: ' + error); |
||||
}); |
||||
this.player.load(scene.video); |
||||
|
||||
this.videoProxy = new VideoProxy(this.player.video); |
||||
} |
||||
} |
||||
|
||||
this.sceneInfo = scene; |
||||
if (Util.isDebug()) { |
||||
console.log('Loaded scene', scene); |
||||
} |
||||
|
||||
return promise; |
||||
}; |
||||
|
||||
WorldRenderer.prototype.isVRMode = function() { |
||||
return !!this.vrDisplay && this.vrDisplay.isPresenting; |
||||
}; |
||||
|
||||
WorldRenderer.prototype.submitFrame = function() { |
||||
if (this.isVRMode()) { |
||||
this.vrDisplay.submitFrame(); |
||||
} |
||||
}; |
||||
|
||||
WorldRenderer.prototype.disposeEye_ = function(eye) { |
||||
if (eye) { |
||||
if (eye.material.map) { |
||||
eye.material.map.dispose(); |
||||
} |
||||
eye.material.dispose(); |
||||
eye.geometry.dispose(); |
||||
} |
||||
}; |
||||
|
||||
WorldRenderer.prototype.dispose = function() { |
||||
var eyeLeft = this.scene.getObjectByName('eyeLeft'); |
||||
this.disposeEye_(eyeLeft); |
||||
var eyeRight = this.scene.getObjectByName('eyeRight'); |
||||
this.disposeEye_(eyeRight); |
||||
}; |
||||
|
||||
WorldRenderer.prototype.destroy = function() { |
||||
if (this.player) { |
||||
this.player.removeAllListeners(); |
||||
this.player.destroy(); |
||||
this.player = null; |
||||
} |
||||
var photo = this.scene.getObjectByName('photo'); |
||||
var eyeLeft = this.scene.getObjectByName('eyeLeft'); |
||||
var eyeRight = this.scene.getObjectByName('eyeRight'); |
||||
|
||||
if (eyeLeft) { |
||||
this.disposeEye_(eyeLeft); |
||||
photo.remove(eyeLeft); |
||||
this.scene.remove(eyeLeft); |
||||
} |
||||
|
||||
if (eyeRight) { |
||||
this.disposeEye_(eyeRight); |
||||
photo.remove(eyeRight); |
||||
this.scene.remove(eyeRight); |
||||
} |
||||
}; |
||||
|
||||
WorldRenderer.prototype.didLoad_ = function(opt_event) { |
||||
var event = opt_event || {}; |
||||
this.emit('load', event); |
||||
if (this.sceneResolve) { |
||||
this.sceneResolve(); |
||||
} |
||||
}; |
||||
|
||||
WorldRenderer.prototype.didLoadFail_ = function(message) { |
||||
this.emit('error', message); |
||||
if (this.sceneReject) { |
||||
this.sceneReject(message); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Sets the default yaw. |
||||
* @param {Number} angleRad The yaw in radians. |
||||
*/ |
||||
WorldRenderer.prototype.setDefaultYaw_ = function(angleRad) { |
||||
// Rotate the camera parent to take into account the scene's rotation.
|
||||
// By default, it should be at the center of the image.
|
||||
var display = this.controls.getVRDisplay(); |
||||
// For desktop, we subtract the current display Y axis
|
||||
var theta = display.theta_ || 0; |
||||
// For devices with orientation we make the current view center
|
||||
if (display.poseSensor_) { |
||||
display.poseSensor_.resetPose(); |
||||
} |
||||
this.camera.parent.rotation.y = (Math.PI / 2.0) + angleRad - theta; |
||||
}; |
||||
|
||||
/** |
||||
* Do the initial camera tween to rotate the camera, giving an indication that |
||||
* there is live content there (on desktop only). |
||||
*/ |
||||
WorldRenderer.prototype.autopan = function(duration) { |
||||
var targetY = this.camera.parent.rotation.y - AUTOPAN_ANGLE; |
||||
var tween = new TWEEN.Tween(this.camera.parent.rotation) |
||||
.to({y: targetY}, AUTOPAN_DURATION) |
||||
.easing(TWEEN.Easing.Quadratic.Out) |
||||
.start(); |
||||
}; |
||||
|
||||
WorldRenderer.prototype.init_ = function(hideFullscreenButton) { |
||||
var container = document.querySelector('body'); |
||||
var aspect = window.innerWidth / window.innerHeight; |
||||
var camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 100); |
||||
camera.layers.enable(1); |
||||
|
||||
var cameraDummy = new THREE.Object3D(); |
||||
cameraDummy.add(camera); |
||||
|
||||
// Antialiasing disabled to improve performance.
|
||||
var renderer = new THREE.WebGLRenderer({antialias: false}); |
||||
renderer.setClearColor(0x000000, 0); |
||||
renderer.setSize(window.innerWidth, window.innerHeight); |
||||
renderer.setPixelRatio(window.devicePixelRatio); |
||||
|
||||
container.appendChild(renderer.domElement); |
||||
|
||||
var controls = new THREE.VRControls(camera); |
||||
var effect = new THREE.VREffect(renderer); |
||||
|
||||
// Disable eye separation.
|
||||
effect.scale = 0; |
||||
effect.setSize(window.innerWidth, window.innerHeight); |
||||
|
||||
// Present submission of frames automatically. This is done manually in
|
||||
// submitFrame().
|
||||
effect.autoSubmitFrame = false; |
||||
|
||||
this.camera = camera; |
||||
this.renderer = renderer; |
||||
this.effect = effect; |
||||
this.controls = controls; |
||||
this.manager = new WebVRManager(renderer, effect, {predistorted: false, hideButton: hideFullscreenButton}); |
||||
|
||||
this.scene = this.createScene_(); |
||||
this.scene.add(this.camera.parent); |
||||
|
||||
|
||||
// Watch the resize event.
|
||||
window.addEventListener('resize', this.onResize_.bind(this)); |
||||
|
||||
// Prevent context menu.
|
||||
window.addEventListener('contextmenu', this.onContextMenu_.bind(this)); |
||||
|
||||
window.addEventListener('vrdisplaypresentchange', |
||||
this.onVRDisplayPresentChange_.bind(this)); |
||||
}; |
||||
|
||||
WorldRenderer.prototype.onResize_ = function() { |
||||
this.effect.setSize(window.innerWidth, window.innerHeight); |
||||
this.camera.aspect = window.innerWidth / window.innerHeight; |
||||
this.camera.updateProjectionMatrix(); |
||||
}; |
||||
|
||||
WorldRenderer.prototype.onVRDisplayPresentChange_ = function(e) { |
||||
if (Util.isDebug()) { |
||||
console.log('onVRDisplayPresentChange_'); |
||||
} |
||||
var isVR = this.isVRMode(); |
||||
|
||||
// If the mode changed to VR and there is at least one hotspot, show reticle.
|
||||
var isReticleVisible = isVR && this.hotspotRenderer.getCount() > 0; |
||||
this.reticleRenderer.setVisibility(isReticleVisible); |
||||
|
||||
// Resize the renderer for good measure.
|
||||
this.onResize_(); |
||||
|
||||
// Analytics.
|
||||
if (window.analytics) { |
||||
analytics.logModeChanged(isVR); |
||||
} |
||||
|
||||
// When exiting VR mode from iOS, make sure we emit back an exit-fullscreen event.
|
||||
if (!isVR && Util.isIOS()) { |
||||
Util.sendParentMessage({type: 'exit-fullscreen'}); |
||||
} |
||||
|
||||
// Emit a mode change event back to any listeners.
|
||||
this.emit('modechange', isVR); |
||||
}; |
||||
|
||||
WorldRenderer.prototype.createScene_ = function(opt_params) { |
||||
var scene = new THREE.Scene(); |
||||
|
||||
// Add a group for the photosphere.
|
||||
var photoGroup = new THREE.Object3D(); |
||||
photoGroup.name = 'photo'; |
||||
scene.add(photoGroup); |
||||
|
||||
return scene; |
||||
}; |
||||
|
||||
WorldRenderer.prototype.onHotspotFocus_ = function(id) { |
||||
// Set the default cursor to be a pointer.
|
||||
this.setCursor_('pointer'); |
||||
}; |
||||
|
||||
WorldRenderer.prototype.onHotspotBlur_ = function(id) { |
||||
// Reset the default cursor to be the default one.
|
||||
this.setCursor_(''); |
||||
}; |
||||
|
||||
WorldRenderer.prototype.setCursor_ = function(cursor) { |
||||
this.renderer.domElement.style.cursor = cursor; |
||||
}; |
||||
|
||||
WorldRenderer.prototype.onContextMenu_ = function(e) { |
||||
e.preventDefault(); |
||||
e.stopPropagation(); |
||||
return false; |
||||
}; |
||||
|
||||
module.exports = WorldRenderer; |
||||
@ -0,0 +1,33 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
/** |
||||
* Messages from the API to the embed. |
||||
*/ |
||||
var Message = { |
||||
PLAY: 'play', |
||||
PAUSE: 'pause', |
||||
TIMEUPDATE: 'timeupdate', |
||||
ADD_HOTSPOT: 'addhotspot', |
||||
SET_CONTENT: 'setimage', |
||||
SET_VOLUME: 'setvolume', |
||||
MUTED: 'muted', |
||||
SET_CURRENT_TIME: 'setcurrenttime', |
||||
DEVICE_MOTION: 'devicemotion', |
||||
GET_POSITION: 'getposition', |
||||
SET_FULLSCREEN: 'setfullscreen', |
||||
}; |
||||
|
||||
module.exports = Message; |
||||
@ -0,0 +1,29 @@ |
||||
import '../../../node_modules/three/src/polyfills.js'; |
||||
|
||||
export { WebGLRenderer } from '../../../node_modules/three/src/renderers/WebGLRenderer.js'; |
||||
export { Scene } from '../../../node_modules/three/src/scenes/Scene.js'; |
||||
export { Mesh } from '../../../node_modules/three/src/objects/Mesh.js'; |
||||
export { VideoTexture } from '../../../node_modules/three/src/textures/VideoTexture.js'; |
||||
export { MeshBasicMaterial } from '../../../node_modules/three/src/materials/MeshBasicMaterial.js'; |
||||
export { ShaderMaterial } from '../../../node_modules/three/src/materials/ShaderMaterial.js'; |
||||
export { TextureLoader } from '../../../node_modules/three/src/loaders/TextureLoader.js'; |
||||
export { PerspectiveCamera } from '../../../node_modules/three/src/cameras/PerspectiveCamera.js'; |
||||
export { Object3D } from '../../../node_modules/three/src/core/Object3D.js'; |
||||
export { Raycaster } from '../../../node_modules/three/src/core/Raycaster.js'; |
||||
export { _Math as Math } from '../../../node_modules/three/src/math/Math.js'; |
||||
export { Quaternion } from '../../../node_modules/three/src/math/Quaternion.js'; |
||||
export { Euler } from '../../../node_modules/three/src/math/Euler.js'; |
||||
export { Matrix4 } from '../../../node_modules/three/src/math/Matrix4.js'; |
||||
export { Matrix3 } from '../../../node_modules/three/src/math/Matrix3.js'; |
||||
export { Vector4 } from '../../../node_modules/three/src/math/Vector4.js'; |
||||
export { Vector3 } from '../../../node_modules/three/src/math/Vector3.js'; |
||||
export { Vector2 } from '../../../node_modules/three/src/math/Vector2.js'; |
||||
export { Color } from '../../../node_modules/three/src/math/Color.js'; |
||||
export { TorusGeometry } from '../../../node_modules/three/src/geometries/TorusGeometry.js'; |
||||
export { SphereGeometry } from '../../../node_modules/three/src/geometries/SphereGeometry.js'; |
||||
export { CircleGeometry } from '../../../node_modules/three/src/geometries/CircleGeometry.js'; |
||||
export { RingGeometry } from '../../../node_modules/three/src/geometries/RingGeometry.js'; |
||||
export * from '../../../node_modules/three/src/constants.js'; |
||||
|
||||
import '../../../node_modules/three/examples/js/controls/VRControls.js'; |
||||
import '../../../node_modules/three/examples/js/effects/VREffect.js'; |
||||
@ -0,0 +1,10 @@ |
||||
var THREE; |
||||
var define; |
||||
var module; |
||||
var exports; |
||||
var performance; |
||||
var WebGL2RenderingContext; |
||||
var VRDisplay; |
||||
var PositionSensorVRDevice; |
||||
var HMDVRDevice; |
||||
var VRFrameData; |
||||
@ -0,0 +1,34 @@ |
||||
import * as fs from 'fs'; |
||||
|
||||
var outro = ` |
||||
Object.defineProperty( exports, 'AudioContext', { |
||||
get: function () { |
||||
return exports.getAudioContext(); |
||||
} |
||||
});`;
|
||||
|
||||
function glsl () { |
||||
return { |
||||
transform ( code, id ) { |
||||
if ( !/\.glsl$/.test( id ) ) return; |
||||
|
||||
return 'export default ' + JSON.stringify( |
||||
code |
||||
.replace( /[ \t]*\/\/.*\n/g, '' ) |
||||
.replace( /[ \t]*\/\*[\s\S]*?\*\//g, '' ) |
||||
.replace( /\n{2,}/g, '\n' ) |
||||
) + ';'; |
||||
} |
||||
}; |
||||
} |
||||
|
||||
export default { |
||||
entry: 'src/third_party/three/Three.js', |
||||
dest: 'build/three.js', |
||||
moduleName: 'THREE', |
||||
format: 'umd', |
||||
plugins: [ |
||||
glsl() |
||||
], |
||||
outro: outro |
||||
}; |
||||
@ -0,0 +1,241 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
var Util = window.Util || {}; |
||||
|
||||
Util.isDataURI = function(src) { |
||||
return src && src.indexOf('data:') == 0; |
||||
}; |
||||
|
||||
Util.generateUUID = function() { |
||||
function s4() { |
||||
return Math.floor((1 + Math.random()) * 0x10000) |
||||
.toString(16) |
||||
.substring(1); |
||||
} |
||||
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + |
||||
s4() + '-' + s4() + s4() + s4(); |
||||
}; |
||||
|
||||
Util.isMobile = function() { |
||||
var check = false; |
||||
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); |
||||
return check; |
||||
}; |
||||
|
||||
Util.isIOS = function() { |
||||
return /(iPad|iPhone|iPod)/g.test(navigator.userAgent); |
||||
}; |
||||
|
||||
Util.isSafari = function() { |
||||
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent); |
||||
}; |
||||
|
||||
Util.cloneObject = function(obj) { |
||||
var out = {}; |
||||
for (key in obj) { |
||||
out[key] = obj[key]; |
||||
} |
||||
return out; |
||||
}; |
||||
|
||||
Util.hashCode = function(s) { |
||||
return s.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0); |
||||
}; |
||||
|
||||
Util.loadTrackSrc = function(context, src, callback, opt_progressCallback) { |
||||
var request = new XMLHttpRequest(); |
||||
request.open('GET', src, true); |
||||
request.responseType = 'arraybuffer'; |
||||
|
||||
// Decode asynchronously.
|
||||
request.onload = function() { |
||||
context.decodeAudioData(request.response, function(buffer) { |
||||
callback(buffer); |
||||
}, function(e) { |
||||
console.error(e); |
||||
}); |
||||
}; |
||||
if (opt_progressCallback) { |
||||
request.onprogress = function(e) { |
||||
var percent = e.loaded / e.total; |
||||
opt_progressCallback(percent); |
||||
}; |
||||
} |
||||
request.send(); |
||||
}; |
||||
|
||||
Util.isPow2 = function(n) { |
||||
return (n & (n - 1)) == 0; |
||||
}; |
||||
|
||||
Util.capitalize = function(s) { |
||||
return s.charAt(0).toUpperCase() + s.slice(1); |
||||
}; |
||||
|
||||
Util.isIFrame = function() { |
||||
try { |
||||
return window.self !== window.top; |
||||
} catch (e) { |
||||
return true; |
||||
} |
||||
}; |
||||
|
||||
// From http://goo.gl/4WX3tg
|
||||
Util.getQueryParameter = function(name) { |
||||
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); |
||||
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), |
||||
results = regex.exec(location.search); |
||||
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); |
||||
}; |
||||
|
||||
|
||||
// From http://stackoverflow.com/questions/11871077/proper-way-to-detect-webgl-support.
|
||||
Util.isWebGLEnabled = function() { |
||||
var canvas = document.createElement('canvas'); |
||||
try { gl = canvas.getContext("webgl"); } |
||||
catch (x) { gl = null; } |
||||
|
||||
if (gl == null) { |
||||
try { gl = canvas.getContext("experimental-webgl"); experimental = true; } |
||||
catch (x) { gl = null; } |
||||
} |
||||
return !!gl; |
||||
}; |
||||
|
||||
Util.clone = function(obj) { |
||||
return JSON.parse(JSON.stringify(obj)); |
||||
}; |
||||
|
||||
// From http://stackoverflow.com/questions/10140604/fastest-hypotenuse-in-javascript
|
||||
Util.hypot = Math.hypot || function(x, y) { |
||||
return Math.sqrt(x*x + y*y); |
||||
}; |
||||
|
||||
// From http://stackoverflow.com/a/17447718/693934
|
||||
Util.isIE11 = function() { |
||||
return navigator.userAgent.match(/Trident/); |
||||
}; |
||||
|
||||
Util.getRectCenter = function(rect) { |
||||
return new THREE.Vector2(rect.x + rect.width/2, rect.y + rect.height/2); |
||||
}; |
||||
|
||||
Util.getScreenWidth = function() { |
||||
return Math.max(window.screen.width, window.screen.height) * |
||||
window.devicePixelRatio; |
||||
}; |
||||
|
||||
Util.getScreenHeight = function() { |
||||
return Math.min(window.screen.width, window.screen.height) * |
||||
window.devicePixelRatio; |
||||
}; |
||||
|
||||
Util.isIOS9OrLess = function() { |
||||
if (!Util.isIOS()) { |
||||
return false; |
||||
} |
||||
var re = /(iPhone|iPad|iPod) OS ([\d_]+)/; |
||||
var iOSVersion = navigator.userAgent.match(re); |
||||
if (!iOSVersion) { |
||||
return false; |
||||
} |
||||
// Get the last group.
|
||||
var versionString = iOSVersion[iOSVersion.length - 1]; |
||||
var majorVersion = parseFloat(versionString); |
||||
return majorVersion <= 9; |
||||
}; |
||||
|
||||
Util.getExtension = function(url) { |
||||
return url.split('.').pop().split('?')[0]; |
||||
}; |
||||
|
||||
Util.createGetParams = function(params) { |
||||
var out = '?'; |
||||
for (var k in params) { |
||||
var paramString = k + '=' + params[k] + '&'; |
||||
out += paramString; |
||||
} |
||||
// Remove the trailing ampersand.
|
||||
out.substring(0, params.length - 2); |
||||
return out; |
||||
}; |
||||
|
||||
Util.sendParentMessage = function(message) { |
||||
if (window.parent) { |
||||
parent.postMessage(message, '*'); |
||||
} |
||||
}; |
||||
|
||||
Util.parseBoolean = function(value) { |
||||
if (value == 'false' || value == 0) { |
||||
return false; |
||||
} else if (value == 'true' || value == 1) { |
||||
return true; |
||||
} else { |
||||
return !!value; |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* @param base {String} An absolute directory root. |
||||
* @param relative {String} A relative path. |
||||
* |
||||
* @returns {String} An absolute path corresponding to the rootPath. |
||||
* |
||||
* From http://stackoverflow.com/a/14780463/693934.
|
||||
*/ |
||||
Util.relativeToAbsolutePath = function(base, relative) { |
||||
var stack = base.split('/'); |
||||
var parts = relative.split('/'); |
||||
for (var i = 0; i < parts.length; i++) { |
||||
if (parts[i] == '.') { |
||||
continue; |
||||
} |
||||
if (parts[i] == '..') { |
||||
stack.pop(); |
||||
} else { |
||||
stack.push(parts[i]); |
||||
} |
||||
} |
||||
return stack.join('/'); |
||||
}; |
||||
|
||||
/** |
||||
* @return {Boolean} True iff the specified path is an absolute path. |
||||
*/ |
||||
Util.isPathAbsolute = function(path) { |
||||
return ! /^(?:\/|[a-z]+:\/\/)/.test(path); |
||||
} |
||||
|
||||
Util.isEmptyObject = function(obj) { |
||||
return Object.getOwnPropertyNames(obj).length == 0; |
||||
}; |
||||
|
||||
Util.isDebug = function() { |
||||
return Util.parseBoolean(Util.getQueryParameter('debug')); |
||||
}; |
||||
|
||||
Util.getCurrentScript = function() { |
||||
// Note: in IE11, document.currentScript doesn't work, so we fall back to this
|
||||
// hack, taken from https://goo.gl/TpExuH.
|
||||
if (!document.currentScript) { |
||||
console.warn('This browser does not support document.currentScript. Trying fallback.'); |
||||
} |
||||
return document.currentScript || document.scripts[document.scripts.length - 1]; |
||||
} |
||||
|
||||
|
||||
module.exports = Util; |
||||
@ -0,0 +1,25 @@ |
||||
/* |
||||
* Copyright 2016 Google Inc. All Rights Reserved. |
||||
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
* you may not use this file except in compliance with the License. |
||||
* You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
/** |
||||
* Video Types |
||||
*/ |
||||
var VideoTypes = { |
||||
HLS: 1, |
||||
DASH: 2, |
||||
VIDEO: 3 |
||||
}; |
||||
|
||||
module.exports = VideoTypes; |
||||
@ -0,0 +1,100 @@ |
||||
html, body { |
||||
background-color: #000; |
||||
color: #eee; |
||||
margin: 0px; |
||||
padding: 0px; |
||||
position: fixed; |
||||
overflow: hidden; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
|
||||
/* Prevent user selection. */ |
||||
user-select: none; |
||||
touch-callout: none; |
||||
-webkit-touch-callout: none; |
||||
-webkit-user-select: none; |
||||
} |
||||
.dialog { |
||||
display: none; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-family: sans-serif; |
||||
font-size: 170%; |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: rgba(255, 255, 255, 0.2); |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
user-select: none; |
||||
} |
||||
.dialog.visible { |
||||
display: flex; |
||||
} |
||||
.dialog .wrap { |
||||
padding: 30px 60px; |
||||
margin: 20px auto; |
||||
width: 60%; |
||||
background: rgba(0, 0, 0, 0.8); |
||||
border-radius: 5px; |
||||
} |
||||
.dialog h1 { |
||||
margin: 0; |
||||
} |
||||
|
||||
a, a:visited { |
||||
color: skyblue; |
||||
} |
||||
|
||||
#watermark img { |
||||
position: fixed; |
||||
overflow: hidden; |
||||
left: 0; |
||||
bottom: 0; |
||||
opacity: 0.3; |
||||
width: 24px; |
||||
height: 24px; |
||||
padding: 12px; |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
user-select: none; |
||||
} |
||||
#watermark img:hover { |
||||
opacity: 1; |
||||
-webkit-filter: drop-shadow(white 0 0 5px); |
||||
} |
||||
|
||||
|
||||
canvas { |
||||
cursor: -webkit-grab; |
||||
} |
||||
canvas:active { |
||||
cursor: -webkit-grabbing; |
||||
} |
||||
|
||||
#play-overlay { |
||||
position: fixed; |
||||
width: 100%; |
||||
height: 100%; |
||||
left: 0; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
display: none; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
#play-overlay.visible { |
||||
display: flex; |
||||
} |
||||
#play-overlay img { |
||||
width: 30%; |
||||
height: 30%; |
||||
} |
||||
|
||||
#error .message { |
||||
font-family: monospace; |
||||
} |
||||
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 971 B After Width: | Height: | Size: 868 B |
|
After Width: | Height: | Size: 822 B |
|
After Width: | Height: | Size: 748 B |
|
After Width: | Height: | Size: 858 B |
|
After Width: | Height: | Size: 817 B |
|
Before Width: | Height: | Size: 872 B After Width: | Height: | Size: 905 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 632 B After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 967 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 952 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 2.9 KiB |