flimshaw / valiant360 Goto Github PK

Thanks so much for this project! However, there's no actual code on the repository, which limits how anyone can help... anyway, here's what would normally work as a pull request, but as an open issue instead.

Fullscreen doesn't work properly under this condition:

1. The current browser screen is the second screen a multi-monitor setup
2. The current browser screen's top is set up as being higher than the primary screen's top
3. OS is Windows 7 (at least)

Under this setup, the window.screenY/window.screenTop will have negative values. This leads this fullscreen check (line 498) to fail:

    fullscreen: function() {
        if(!window.screenTop && !window.screenY && $(this.element).find('a.fa-expand').length > 0) {

Fullscreen works for the browser, but the classes are not applied, so the video is never resized.

My suggestion is to get rid of the top checks (are they really necessary?) as they have false positives. This seems to work just as well:

    fullscreen: function() {
        if($(this.element).find('a.fa-expand').length > 0) {

Hi,

Is there a way to remove the progress bar?

thanks!

chuck

All in the title

can play it with vr？

to make the mobile chrome play the video,

you need to add the following line to jquery.valiant360.js line:217

add this line:
this._video.setAttribute('crossorigin', 'anonymous');
to:
( original line 217 is " // make a self reference we can pass to our callbacks" , just add above this line)

hope this helps.

And Thanks for sharing this great plugin.

After returning from fullscreen, the video disappear. This is because canvas dimensions are 0.
Somehow, this._originalWidth (line 178 and following) return "null".

I've changed these lines to:
this._originalWidth = $(document).find('div').width();
this._originalHeight = $(document).find('div').height();

It works.

A think it would be usefull to add a progress bar and the ability to start playing the video from a certain time.

Awesome project and thanks for putting it together. We've been testing with it a bit and it works perfectly in chrome (haven't tested in others.) As you may be aware, it appears that CORS is a problem on video. We've tried setting crossOrigin = 'anonymous' on the video object, THREE.ImageUtils.crossOrigin = "anonymous", and various other things. This is the error:

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.

It appears that we aren't the only ones experiencing this problem with CORS and video/canvas/WebGL (across a number of different projects and threads on StackOverflow), but wondering if you've stumbled across a fix or if you've found it's just impossible at the moment without some kind of proxy type hack to make things look like the same domain?

It doesn't run if I try to include two valiantContainers. Scanned the code but couldn't find any hint...

I suppose the solution is to iframe the instances, is this it?

Thanks for the superb library, pure joy 💯

Hi I used Ionic Cordova web app with Valiant360 on Android, when I inspect it using chrome debugger I found this error:

S3TC compressed textures not supported.

How can I fix it?

Any way to get a progress bar showing the downloading of the image file or video?

When I downloaded the demo from your website it showed me 2 grey boxes. The video is not playing. What did I do wrong? I'm using Chrome.

i want to use this project on windows7 environment.
but i don't know how to install it on windows7.

Please let me know..
Thank you in advanced.

Could you change the navigation inside the panorama so that the image or movie is only rotated as long as the mouse button is pressed?

That's the way everyone else (theta360.com, Google photospheres on G+, Google Streetview, Microsoft Photosynth ...) seems to be doing it. Some also have a little bit of slow auto-rotate on-load.

Is it possible to play a video from an m3u8 file (metadata file). I guess it is more of an HTML5 question, relating to the

I open the example page in IE11 and firefox and it don't work...

Hello,

Is it possible to stream and view live 360 video to your software?

Thanks, Shahriar

Hi,

Is it possible to use a MediaStream object as a source? I tried loading using a stream instead of the path to file in the loadVideo function but it returns an error.

Is this possible?

Hi, I am trying to figure it out how to display JPG image in div instead of video. I am using basicly the same code as on your web page.

<div class="valiantContainer" data-video-src="/images/3601.jpg"></div>

On index page

<script src="/js/app/360/three.min.js"></
<script src="/js/app/360/jquery.valiant360.min.js"></script>

And this is all my browser displays

Hei
First i just want to say i am loving this project

I am trying to Loop through .jpg photoes (like a slow fps movie)
What i am struggeling with is getting :
$('.valiantPhoto').Valiant360('loadPhoto', 'path/to/photo');

When i use this function it just load what i have in :

<div class="valiantPhoto" data-photo-src="equirectangular-bathroom-tile.jpg" style="width: 480px; height: 380px;"></div>

I downloaded the project from git, and everything seems to be working except beeing able to load in new images in the same "frame"

in the full js : $(this.element).append(controlsHTML, true);

is translated into : a(this.element).append(d, !0),

in the minified .min.js

this print the word "true" in the html.

Replacing with a(this.element).append(d) fixes the issue.

Hi,
From this sample I only can define one video to play. How can we more video to play like playlist?
video1.mp4;video2.mp4;...
Thank you
Panya

Hi,

i am trying to play a 4k video in your plugin. It works perfectly in chrome but unfortunately in firefox (46) the performance is very poor.

Is there any solution to improve the performance of the rendering?

this is a great plugin. simple & easy to use. I just have one issue - I have my initial fov set at 135 and it looks like there's a glitch when I try scrolling. It instantly jumps to a low fov, around 10-15.

it is a great script works very good with videos
but
i tried to use the photo property but it did not work also it did not work in the example the the video only works well
how to use it ?

thanks

There is a way to init Valiant360 inside a hidden div (inside Bootstrap Tabs), without trigger or calling on tab press?

Multiple init with 360 with same class only works if are all visible.

Dear Charlie Hoey, flimshaw,
I have tried the version 0.4.0 but nothing happened.
A file named equirectangular-bathroom-tile.jpg is missing, so it's dark at this point,
and the mp4-File can't be seen. Dark at this point.
It would be very kind, if you try your ziped-file yourself, to see, what
I can see and it is nothing. Sorry.

Hi,

I contacted you on Twitter.

I have an implementation of Valiant360 where i have implemented it as shown in the demo, and i run into issues with the height of the video being 0, and it being styled as 0px under the style element. Do you have any idea what can cause this?

I have tried using the 0.2.0 version, and the latest master.

Thank you in advance.

three.js gives loads of errors like:
Uncaught DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0. Maybe incompatable graphic drivers???
localhost-1497536904789.txt

Is there a way to use keyboard arrows to navigate through the video or the photo being presented by the player?

Hi, when I view a 360 pano movie in the web browser the quality is considerably worse than viewing the same video file in a player. Are there compression settings?

Hi,I develop web app for ios and android .I want to use your code,but find not run on ios ,such as your main page panorama .Will you support ios and android?

I'm sorry, my English is not good.

Is there a recommended way to hook into the same mouse move events that are changing the perspective and to access _lat and _lon and the video playback position?

I open the example link in firefox and IE, it can't be renderd? Show error logs

Is there a way to disable zoom?

I'd like to set it to a constant FOV and re-enable scrolling.

How would I do this?

Thanks

When user add this parameter "autoplay: false" to options, video doesn't start and preloader appears. Preloader blocks all of the controls because of its z-index. So people can't start the video.

Currently in the code in the mouseMove function there are some harcoded values that affect which point is considered the "center" of the video. While these are simple enough to change in the source file, this should probably be a setup option.

    this._lon = ( x / $(this.element).find('canvas').width() ) * 430 - 225;    
    this._lat = ( y / $(this.element).find('canvas').height() ) * -180 + 90;

to

    this._lon = ( x / $(this.element).find('canvas').width() ) * 430 - this.options.viewOffsetX;    
    this._lat = ( y / $(this.element).find('canvas').height() ) * -180 + this.options.viewOffsetY;

    $('.valiant').Valiant360({
        viewOffsetX: 225,                 // offset for camera angle Lon    
        viewOffsetY: 90,                 // offset for camera angle Lat
    });

First of all - Great work by the devs. The plugin is awesome and I want to extend it for a small project I'm taking up. What I ultimately want to achive is play multiple videos in WebGl rendering so that I can control the x,y coordinates of all simultaneously. So the mouseover of any valiantcontainer should update the x,y of all other valiant containers appropriately.

For that, I was just fiddling around with the code but I am not able to get a handle on the plugin object where I can call all the functions that you've defined in Plugin.protoype. I tried $('.valiantPhoto').Valiant360().pause() and even $('.valiantPhoto').Valiant360('pause') mentioned in the README but both seem to fail.

My question is how do I get a handle on the Valiant360 object which exposes those functions to me. I'd ulitmately want to over-ride the mouse-over functionality for it. Any help is deeply appreciated.

Is there any way within the valiant API to handle video sources being streamed?

At the moment our video is just over 1GB and we'd like to avoid the entire download before I user can experience the fiery awesomeness of the app! :P

The Samsung Gear 360 camera stores the images on the MicroSD card unstitched as two round fisheye pictures next to each other.

Examples:

• https://www.svetandroida.cz/media/2017/07/360_0029.jpg
• https://www.dropbox.com/s/l1s780dytz9xspf/samsung_360_raw.JPG?dl=0
• http://developer.samsung.com/forum/board/thread/file.do?attachmentId=24356

It would be great if Valiant360 would be able to also handle this image format in addition to the equirectangular images.

It would have to cut the image into two halves and then deskew them somehow.
Any ideas on how this could be achieved?

I have plans to use Valiant360 in my project.Can anyone please tell how the equirectangular-bathroom-tile is created.I have tried creating a panorama on my phone and tried to use it.But the 360 view is distorted.Why is the image present in the Example app so clear?How do i create one such image.

Please help.
Thank you!

This software looks interesting.

Some questions:

• Is the video stream it expects of a standard 360 format, or something custom? (Some kind of stitching from four GoPros?)
• Are there any Creative Commons (or similarly) licensed 360 videos for download anywhere?
• Is there any other free and open source software that can play 360 videos (based on threejs or otherwise)?

jquery.valiant360.js:352 Access to XMLHttpRequest at 'file:///C:/Users/Maverick/Desktop/three/video/Video.MOV' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

I have used this as it's in the documentation, still getting Cors error and video status error :0

<script type="text/javascript">
		$(document).ready(function() {
			
			$('.valiantContainer').Valiant360({
	crossOrigin: 'anonymous',	// valid keywords: 'anonymous' or 'use-credentials'
	clickAndDrag: false,	// use click-and-drag camera controls
	keyboardControls: true, // use keyboard controls (move by arrows)
	flatProjection: false,	// map image to appear flat (often more distorted)
	fov: 35, 				// initial field of view
	fovMin: 3, 				// min field of view allowed
	fovMax: 100, 			// max field of view allowed
	hideControls: false,	// hide player controls
	lon: 0, 				// initial lon for camera angle
	lat: 0, 				// initial lat for camera angle
	loop: "loop", 			// video loops by default
	muted: true,			// video muted by default
	volume: 0.5,			// video volume by default
	autoplay: true			// video autoplays by default
});

I'd like to use Valiant360 without Google Analytics.
What changes do I have to make?

I have another feature request. When taking photos with a Ricoh Theta camera, they contain ZenithX, ZenithY and Compass data in the exif so the viewer can auto-level the horizon if the camera wasn't held 100% vertically during the shot.
Could you add support for the Zenith data as extra parameters?

You can find some details on these (japanese) pages
http://like.silk.to/theta360/zenith.cgi
http://xanxys.hatenablog.jp/entry/20131110/1384094832#20131110f1

The Ricoh Theta windows app can also auto-level the orientation and write a new jpeg file but since that is a lossy operation, I'd prefer it if the rotation happens in the viewer.
Perhaps it's just a matter of applying some transformation once when you create the ThreeJS mesh sphere?

PS: I believe this is different than the lot/lan parameters which just specify the initial viewing direction but do not tilt the axis permanently, right?

Hi Every one,
I'm receiveing the following error in Google Chrome Console:

three.min.js: Uncaught InvalidStateError: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0.

I can't figure out how avoid that error, and I can't see the video, I only see a grey box in the center of the player container.

I've donwloaded the demo.html and the same error.

I'll will appreciate if you can help us to solve this problem.

Thanks.

how can use in angular 4 project? Or Valiant360 module package for angular 2-4 exist?

I'm receiveing the following error in Google Chrome Console:

852 three.min.js:302 Uncaught InvalidStateError: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0.

The version of Google Chrome is Versión 49.0.2623.87 (64-bit)
My O.S. is Ubuntu 14.04

I can't figure out how avoid that error, and I can't see the video, I only see a grey box in the center of the player container.

I've donwloaded the demo.html and the same error.

I'll will appreciate if you can help us to solve this problem.
Thanks.

Update: I've attached an image with the error.