googlearchive/vrview

Library for embedding immersive media into traditional websites.

VR View

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.min.js
• https://googlevr.github.io/vrview/build/embed.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.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)

Relevant commands:

$ 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

vrview's Issues

start_yaw has different/ no effect depending on platform

May be just me - but when I use the start_yaw variable it has different results depending on whether I'm viewing on mobile (iPhone 6 Plus, Safari) or desktop (iMac 2015, Safari) - both latest versions as of writing.

I can also confirm this is the case with the latest version of Google Chrome on iPhone.

1) Desktop - initial view as expected when using the start_yaw variable, e.g. start_yaw=90 - does what it says on the tin.
2) Mobile - ignores start_yaw completely.

Images used taken with Ricoh Theta S camera.

Cheers.

Supporting more types of cardboards

When I view the images on my phone the VR/cardboard configurator cog only offers me two choices: Google 2014 and Google 2015. I'm using Marshmallow on a Galaxy Note 3. Is it possible to add Google 2016 format cardboard support and maybe even other ones?

360 Videos Freezes on Android

On Android the player doesn't response to the gyroscope motion sometimes and the video appears to be freeze.

Carboard Camera converter does not recognise image created in cardboard camera app

I have tried to convert the example 'coral' image and a panoramic image I took on the cardboard camera app on the cardboard camera converter site and everytime it gives me the error

Mute Video Feature

It would be useful to have a mute button and a is_muted setting for the video.
This feature is useful mostly when you embed multiple VRViews in the same page and you don't want to hear every audio source.

Thanks in advance.

Is there ability to animate / control current yaw?

Hello

Does this library have API methods to control Yaw at runtime.
For animation for example. Or for navigation to specific part of image.

Thank you.

how to refer to external url in the image parameter of iframe

i am trying to put the following iframe

<iframe width="100%" scrolling="no" allowfullscreen
      src="../../index.html?image=http://mysite.com/1.jpg&is_stereo=false&preview=http://mysite.com/1.jpg"></iframe>

I am trying to pass http://mysite.com/1.jpg as the image and the preview. But it says unable to load texture http://mysite.com/1.jpg

So can i pass url from external links it is not working.

VR View Info Gone - Replaced by GoogleVR Mobile only?

Clicking on the "i" button in VR views embedded in web pages takes me to an updated web page that no longer mentions website-based VR View, only GoogleVR for mobile platforms.

No information remains for web site usage?

feature request: clickable areas on the image (“virtual tour” feature)

It would be good to detect clicks on special areas of the image (or video).

The web site might then dispay some description relevant to the clicked area or let the user “walk” (by such clicking) from one VR scene to another.

image viewing trouble with iOS 10

I was able to view images on a page on my iPhone before the iOS 10 update. Now the image view from inside the page is pointed straight up and I can't look around and change my view. When I expand the the image to full screen, everything works as it should. Using Chrome, or Safari, I am having the same issue.

Controlling volume via query parameter/postMessage

I'd like to add support for controlling the volume level of the video element inside the iframe. I suggest to allow

• specifying the initial volume level via a new volume query parameter
• changing the volume level by sending a message to the iframe via postMessage

To be inline with the device motion messages already sent, the data of the message could look like

{type: 'SetVolume', volume: 0.5}

Would a PR making this change be accepted?

error webGL not support in Android webview

lots of android phone webview not support webGL?

Polymer element

Could you create polymer element?

Horizontal rotation on mobile

On mobile when I move the device up/down the movie follows accordingly. The same is not true for horizontal movement which can only be triggered by swiping left/right.

Could Horizontal movements also be triggered by device rotation?

Tested on motorola moto G3 2015 with Android 6.0.1

Is it possible to read 360 (not 720) images taken by cardboard APP

Is it possible to read 360 (not 720) images taken by cardboard APP

It look like only both mono and stereo Spherical panorama(not cubic format) images are supported for new , is 360 (horizontal only panorama) planed to support ?

initial yaw on different devices

Hello

On PC in Chrome and Firefox initial yaw loking to 3/4 from left of source image.
In mobile Chrome it looks at 1/2 of source image.
YouTube looks at 1/2 too. That make sense.

Displaying black on iOS 9.3.2 Safari on iPhone 6 Plus

A vrview iframe that displays properly on desktop on other platforms, OSX, Windows 7, Chrome, Safari, and on iPad iOS 9.3.2, Chrome and Safari, and on an iPhone iOS 9.3.2 6 Plus with Chrome, displays a black square when viewed from the same iPhone iOS 9.3.2 6 Plus through Safari.

The media and code are hosted on the same server. I don't believe that this is caught under any of the Known Issues.

Happy to provide a link for testing if needed.

Error Loader : Unable to load scene Required parameter missing

when I start the VRVIEW,it shows:
Error
Loader:Unable to load scene.Required parameter missing.
How can I solve this problem?

Thankyou

Enabling head tracking

Hi All,

I am using the SDK in my android app to display a 360 video with VRVideoView but don't seem to have the head tracking functionality...anyone else experienced this?

This is how I'm calling it:

 @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment_fourth, container,false);
            videoWidgetView = (VrVideoView) view.findViewById(R.id.video_view);

            try {
                videoWidgetView.loadVideoFromAsset("video.mp4", null);
                videoWidgetView.pauseVideo();
            } catch(IOException ex) {
                //Do nothing
            }

            Button mClickButton1 = (Button) view.findViewById(R.id.button);
            mClickButton1.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                        videoWidgetView.playVideo();
                }
            });


            setRetainInstance(true);
            return view;
        }

        //Set title
        public void onResume(){
            super.onResume();
            ((MainActivity) getActivity()).setActionBarTitle("VR Experience");


        }

Thanks in advance

Unable to load scene.

when I start the VRVIEW,it shows:
Error
Loader:Unable to load scene.Required parameter missing.
How can I solve this problem?

vrview.js filesize

I didnt check it deeply, but I think a lot of code inside vrview.js is not really needed there (eg. parts of LensFlare of THREE.js and much much more.

Is there anything I can do about it? Loading it slows down page load time significantly.

Please Enable WASD Navigation

Could you also include alternative WASD keys navigation around a scene (as well as the normal arrow keys) - so it replicates the functionality of YouTube 360/VR videos?

It also helps because on occasion when embedding VR views in forums just using the arrow keys can cause the web page to jitter up and down - which using WASD would resolve.

Thanks!

Devsite demo doesn't work in iOS

On iOS devices (both Safari and Chrome), the demo webpage iframe:

https://developers.google.com/vr/concepts/vrview

Points the user at the ceiling, does not respond well/at all to touch (depending on the version of iOS/Safari), and doesn't follow the user when they move.

However, if the user taps the full screen icon, the photo goes into full screen and suddenly everything works as expected. The Cardboard mode option also works as expected.

Add Play/stop button for 360 video

Adding play/pause button specifically for 360 video.

also video progress line would be a great feature as well.

Tap to play image?

Hello, as it could make the mobile version you have to do is tap to see the image in 360 and does not rotate automatically.

404 in the materials links

Getting started with VR view for HTML > 1. Overview > What you'll need > VR View for the web source code - gives 404

cannot enable VR mode on my android device

I download the whole source code to my pc and host it on server,　then I open the url with parameters like this.
"HOST/examples/pano/index.html?HOST/examples/pano/andes_512.jpg&is_stereo=true."
it works fine except the view is not splitted into two, which is the VR mode I expect. so I click the cardboard button at the bottom corner, it goes to a page to remind me to put my device into cardboard.
and still ! only one view.
Have I missed some configuration here? is it because of my android device not supported, cause I checked the source code, and seems that XiaoMi4(chinese android device manufacture) is not included in "DPDB_CACHE", or is it because of my browser? but it does ok when I try other VR frame work.

VR-View loads black screen in the iframe using Chrome on MacBook

Issue:

VR-View loads black screen in the iframe using Chrome Version 51.0.2704.103 (64-bit) on MacBook running OSX 10.11.4 (15E65) El Capitan. Image and VR-View source code are hosted in same folder on server with GoDaddy Hosting and Wordpress. Thanks in advance for your help; I have been troubleshooting for weeks and have exhausted my resources.

Here is the link to an example of the issue:

http://www.eolianvr.com/test50/

Here is the Code:

<iframe src="http://www.eolianvr.com/vrview-master/index.html?image=//www.eolianvr.com/vrview-master/cliff.jpg&;is_sterio=false" width="300" height="150"></iframe>

When it works:

Same page’s VR image loads correctly using same computer (MacBook running OSX 10.11.4) in Firefox and Safari; and loads correctly using Samsung S7 in Chrome, Samsung S5 in Chrome, IMac running OSX 10.11.4 El Capitan in Chrome, Safari, and Firefox.

The exact same code written into another webpage with same hosting seems to work perfectly, though, even when referencing the plugin/api source code and image from the site with the issue, see link below:

http://ourvrwedding.com/test50/

The VR-View API works correctly when this code is entered directly into URL:

http://storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&is_stereo=true

But, the VR-View API does not work correctly when this code is entered directly into URLhas the same issue:

http://www.eolianvr.com/vrview-master/index.html?image=//www.eolianvr.com/vrview-master/cliff.jpg&;is_sterio=false

I have tried:

• Re-installed wordpress from scratch and re-encountered the exact same problem before loading in any content or themes.

• Reinstalled chrome and encountered the exact same problem

• Cleared images from cache

• Entering Getrequest into URL instead

• Resized the image to 4096x2084

• Injected metadata specifying created from Ricoh Theta360 cam

• I have tried the using the image and API hosted on storage.google and encountered the same problem.

  See these examples:
  Does not work: http://www.eolianvr.com/test51/
  Works: http://ourvrwedding.com/test51/

• SearchedStackoverflow, chrome support, and all possible forums for a fix without avail. No known issues found.

JavaScript Console when it does not work

JQMIGRATE: Migrate is installed, version 1.4.0
vrview-analytics.min.js:21 No THREE.js found.
vrview-analytics.min.js:12 THREE.WebGLRenderer 73
vrview-analytics.min.js:19 Recalculating device params.
vrview-analytics.min.js:19 User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
vrview-analytics.min.js:19 Pixel width: 1151.9999694824219
vrview-analytics.min.js:19 Pixel height: 719.9999809265137
vrview-analytics.min.js:19 No DPDB device match.
vrview-analytics.min.js:19 New device parameters:
vrview-analytics.min.js:19 null
vrview-analytics.min.js:19 Failed to recalculate device parameters.
vrview-analytics.min.js:19 Fetching DPDB...
vrview-analytics.min.js:19 Using fallback iOS device measurements.
vrview-analytics.min.js:20 Using the Cardboard I/O 2014 viewer.
vrview-analytics.min.js:20 Mode change: 0 => 1
vrview-analytics.min.js:22 onModeChange_ 1
vrview-analytics.min.js:22 Analytics: going from mode undefined to NORMAL
vrview-analytics.min.js:22 Loaded scene SceneInfo {id: undefined, title: undefined, image: "//www.eolianvr.com/vrview-master/cliff.jpg", preview: "", isStereo: false…}audio: ""id: undefinedimage: "//www.eolianvr.com/vrview-master/cliff.jpg"isStereo: falseisYawOnly: falsepreview: ""title: undefinedvideo: ""yaw: 0__proto__: Object
vrview-analytics.min.js:19 Successfully loaded online DPDB.
vrview-analytics.min.js:19 Recalculating device params.
vrview-analytics.min.js:19 User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
vrview-analytics.min.js:19 Pixel width: 1151.9999694824219
vrview-analytics.min.js:19 Pixel height: 719.9999809265137
vrview-analytics.min.js:19 No DPDB device match.
vrview-analytics.min.js:19 New device parameters:
vrview-analytics.min.js:19 null
vrview-analytics.min.js:19 Failed to recalculate device parameters.
vrview-analytics.min.js:12 THREE.WebGLRenderer: image is not power of two (5512x2756). Resized to 4096x2048 <img crossorigin=​"anonymous" src=​"/​/​www.eolianvr.com/​vrview-master/​cliff.jpg">​

JavaScript Console when it does work

JQMIGRATE: Migrate is installed, version 1.4.0
vrview-analytics.min.js:21 No THREE.js found.
vrview-analytics.min.js:12 THREE.WebGLRenderer 73
vrview-analytics.min.js:19 Recalculating device params.
vrview-analytics.min.js:19 User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
vrview-analytics.min.js:19 Pixel width: 1280
vrview-analytics.min.js:19 Pixel height: 800
vrview-analytics.min.js:19 No DPDB device match.
vrview-analytics.min.js:19 New device parameters:
vrview-analytics.min.js:19 null
vrview-analytics.min.js:19 Failed to recalculate device parameters.
vrview-analytics.min.js:19 Fetching DPDB...
vrview-analytics.min.js:19 Using fallback iOS device measurements.
vrview-analytics.min.js:20 Using the Cardboard I/O 2014 viewer.
vrview-analytics.min.js:20 Mode change: 0 => 1
vrview-analytics.min.js:22 onModeChange_ 1
vrview-analytics.min.js:22 Analytics: going from mode undefined to NORMAL
vrview-analytics.min.js:19 Successfully loaded online DPDB.
vrview-analytics.min.js:19 Recalculating device params.
vrview-analytics.min.js:19 User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
vrview-analytics.min.js:19 Pixel width: 1280
vrview-analytics.min.js:19 Pixel height: 800
vrview-analytics.min.js:19 No DPDB device match.
vrview-analytics.min.js:19 New device parameters:
vrview-analytics.min.js:19 null
vrview-analytics.min.js:19 Failed to recalculate device parameters.
vrview-analytics.min.js:22 Loaded scene SceneInfo {id: undefined, title: undefined, image: "//www.eolianvr.com/vrview-master/cliff.jpg", preview: "", isStereo: false…}
(index):451 WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403
vrview-analytics.min.js:12 THREE.WebGLRenderer: image is not power of two (5512x2756). Resized to 4096x2048 <img crossorigin=​"anonymous" src=​"/​/​www.eolianvr.com/​vrview-master/​cliff.jpg">​
(index):451 WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403
wordpress google-chrome google-cardboard vr google-vr

How to embed youtube 360 videos in the VR view

i would to like to know to how we can embed a youtube 360 video into the VR view?
i developed a page using the code mentioned here.
but i want to put an youtube video on the vr view

can you guys help me?

multiple vrviews in one page

i want to view 10 images using vrview.

so i inserted 10 iframes. then all are showing with a black scree.

If i try individually they show

Browser bar UI on ios iPhone 5 not hidden in VR mode

The browser UI on the iPhone 5 and smaller iPhones does not hide when in VR cardboard mode in landscape.

This is undesirable for because you see the browser when looking through the cardboard is there any way around this?

I can see Safari hides the UI when you scroll down on a page that is longer than the viewport.

The example video not work well

I host this project with nginx, when I visit it with "hostname/?video=examples/video/congo_2048.mp4&is_stereo=true", I cannot see or move it to normal angle, it shows like below, what I am missing?

Enabling controls for 360 video

I am trying to add html5 video controls to VRView content. In our case we just need the HTML5 basics like play, pause, seeking, mute etc.

When looking through the project I found where the video element is created. This is also where the attribute loop is enabled:

https://github.com/google/vrview/blob/master/src/main.js#L114

I set videoElement.loop to false to make sure I was in the right place and that worked.

I attempted the add videoElement.controls = true; with no luck. No controls showed up in the video.

Is this possible? How can I enable video controls for 360 VRView content?

No media at all

Hi,

I've downloaded the ZIP and opened the index.html and examples. It keeps giving me error messages. On the homepage it says "Loader: Unable to load scene. Required parameter missing." On the video example page "Video load error" and on the pano example it says "Render: Unable to load texture from examples/pano/andes_512.jpg". The console gives me this: "Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access."

It's all load errors. Am I retreiving the content the wrong way? Do I need to use https or something? I have not changed anything in the demo code. Also tried to get it to work on a local server (xampp), didn't work either. How can I get this to work? Absolutely love the idea to make 360/VR available in browser.

Thank you.
Dylan

iOS 10 relaxes video playback policies

https://webkit.org/blog/6784/new-video-policies-for-ios/

I guess this means, some of the limitations no longer apply.

360 video orientation change issue

Hi

I have integrated this SDK in my application. I will show the VrVideoView as the fullscreen using match parent. and i locked the screen for better user experience to view the 360 video, but i have done some controls over the screen. How can i change the position when change orientation.

OR

Please suggest any alternate idea.

1. Screen not rotate when change orientation
   2, Update the icon position when change the orientation

IPD increased on larger QHD screens

I have a Samsung Galaxy Note 4, paired with a google cardboard V2 HMD.

When viewing equirectangular content that works well with other VR apps, the web vrview portal seems to widen the inter-pupillary distance so that the images are too far apart for you to easily focus on. This is not apparent on other, smaller devices and may only apply to either 5.5" displays or even just my particular 5.7" quad HD display.

My screen is 1440 x 2560px with 518 ppi.

loadVideoFromAsset should have 2 parameters but here has 1 parameter!

@OverRide
public void setUserVisibleHint(boolean isVisibleToUser) {
super.setUserVisibleHint(isVisibleToUser);

    if (isVisibleToUser) {
        try {
            if (videoWidgetView.getDuration() <= 0) {
                videoWidgetView.loadVideoFromAsset("congo_2048.mp4");// **here is my problem!**
            }
        } catch (Exception e) {
            Toast.makeText(getActivity(), "Error opening video: " + e.getMessage(), Toast.LENGTH_LONG)
                    .show();
        }
    } else {
        isPaused = true;
        if (videoWidgetView != null) {
            videoWidgetView.pauseVideo();
        }
    }
}

Unable to load source

It seems that video src is not working properly when specifying a file from other sites e.g. src="../../index.html?video=//example.com/video.mp4&is_stereo=true&image=//example.com/video.jpg". It just says "Video load error"

Misalignment on VR mode with QHD screen such as Nexus 6

Misalignment on VR mode with QHD screen such as Nexus 6, the left and right split images/videos are shifted to the left a lot.

TouchPanner does not seem to pan vertically

Is this intentional?

On safari, doesnt working well

Hello guys,

On your website, developers.google, when i see the VR View on Web for Safari, doesnt work well, you can see how it appears:

http://prntscr.com/cnfpq2

But if you got for fullscreen, work well. Its the newest version of Safari, and its on the same server.

How can i resolve this?

Many thanks

Handling non-360 imagery

I have panoramic images that are stitched together via Hugin. The resulting images are not always 360 degrees and/or the proper aspect ratio. Is there method to pad the image since making it seamless results in a weird appearance. I think empty blackness would be better than an incorrect seam.

Panorama image loading does not send any cookies on mobile Safari

Hi there,
Let me elaborate on the situation a bit: we use paywall-guarded webserver that relies on a certain cookie being present to deliver contents. If this cookie is not there, the user is redirected to a login page.

While using vrview with paywall enabled on Android is working just fine, on iOS with Safari the one GET request for the pano image does not have the cookie set, all other requests do have it.

I've attached the tcpdump taken on the server box for reference. You can open this with wireshark and filter for http and see that the GET request in frame 1171 does not have the pay cookie set.
ifon4s.dump.zip

step 7: loadVideoFromAsset method needs second parameter

        if (videoWidgetView.getDuration() <= 0) {
            videoWidgetView.loadVideoFromAsset("congo_2048.mp4");
        }

errors out because the loadVideoFromAsset method needs an options parameter

Start in cardboard view right away

1. Is there a way to start in cardboard view right away (so you don't need to tap on the icon)?
   Also:
2. Is there away to autoplay the media if it's a video (without a tap)?
   Thanks!

Typo in Step 2: Getting Started

Text says:

"For this codelab, We'll start is an application that has 2 fragments."

Should be:

""For this codelab, we'll start with an application that has 2 fragments.""

Is it possible to add THREE.js geometry

Since this library is working with THREE.js, is it possible to add THREE.js geometry in the scene? For instance to make clickable hotspots?

The start_yaw control parameter

start_yaw allows me to rotate the image in only one dimension. Is it possible to rotate it in two dimensions, for example rotate 180 degrees horizontally and then rotate 90 degrees vertically ?

Thanks.

dash support

Does the web player supports mpeg-dash?