babylon2.2.js master file console errors

[dbawel]

 Hello,

 

I should have posted this a couple of months ago, however it causes no problems with my scene, only reports the console errors for the babylon.js 2.2 master file - which also apears to be the cause of reporting an error in my index.html file. So I just wanted to share these in case these are errors which the community may be unaware of, and may need to be addressed.

 

  

 

Also, it reports that it is not able to find my .mp4 file - however this video file loads correctly even though the console reports that it is not found.

 

DB

[RaananW]

Hi DB,

 

Those are chrome errors, not Babylon.js's. B.js might have tried downloading them, but chrome reports 404.

I tried the mp4 file - http://www.qedsoft.com/DEMOS2014/creative_drawing_v1/textures/Dora.mp4 , unless I misspelled, the file really doesn't exist. Maybe it is somehow cached in your browser_ maybe you gave two different URLs to the video texture?

[dbawel]

@RaananW - the file does exist in the specified directory, and is called correctly and plays correctly when the scene is loaded - which is why I posted the console messages, as my scene works fine and all files including the Dora.mp4 is loaded as a video texture and plays correctly.

 

If you would like to see this working, I have a test scne with this .mp4 file working - the .mp4 which generates the 404 error. This scene is WIP, and geared toward a young demographic, so it's a bit cartoonish - but you can see the scene working, and will find the console errors.

 

http://www.qedsoft.com/DEMOS2014/creative_drawing_v1/index2.html

 

You may need to refresh a couple of times for all of the buttons to appear, until I add refresh and loader functions to assure all elements load correctly before playing.

 

Thanks,

 

DB

[RaananW]

Hi DB,

 

The .mp4 file is 404 not found. The video texture loads a webm file (Dora.webm - located at http://www.qedsoft.com/DEMOS2014/creative_drawing_v1/textures/Dora.webm ) that actually exists. The JPG file returns 404. 

 

I just want to make sure it really isn't a B.js problem.

[dbawel]

Hi RanaanW,

 

As you can see, there is a Dora.mp4 file in the same directory as the Dora.webm file. So this is why I tought I might post the console errors as it was a concern. Also, when I try and load this scene on my Android tablet, the video will not play - even if I initiate a videoTexture.video.play() operation. Any ideas on how I might get the videoTexture to play on mobile devices? I thought that using a webm file and calling a play function would solve this. What might I be missing?

 

 

Thanks,

 

DB

[RaananW]

Hi DB,

 

filenames are case sensitive. dora.mp4 is not the same as Dora.mp4

 

To play the video on mobile devices you will have to create a user interaction (videos won't auto play on mobiles). I updated the advanced texturing doc, explaining how to do that. check video texture on this page - http://doc.babylonjs.com/tutorials/01._Advanced_Texturing

[dbawel]

Hi RaananW,

 

Yes, this of course I am aware - so I made an idiot mistake which is why the 404 error just showed itself - as I was writing out different video files to test last week to try and get the video texture to play on mobile. Dumb mistake which is now corrected.  The file is returned to it's uppercase name, and the 404 error is gone, duh.

 

Also, all other errors for the babylon.2.2.js master file are still the same as the image of the console I posted earlier - so I wanted you to know to make certain that there is not an issue with the master file. If you try this link again, you'll see that the scene is calling the .Dora.mp4 file correctly again, and you'll see the babylon.js error in the console and be able to look at the specific lines in the babylon.js master file which are providing the WebGL GL_Texture_2D and other errors - so it's worth looking at to perhaps know the cause.

 

So yes, it was playing the .webm file on my desktop since I negated the .mp4 file by naming incorrectly on export while testing. Now it is using the .mp4 file again.

 

But I still cannot get the videoTexture to play on my tablet - even though I have the play and pause controls set to GUI buttons on the interface - which as you can see work fine on the desktop. So why wouldn't they work on the tablet - as you directed me to do this several times, and I've done specifically as documented, but this still only works on my desktop. Any other thoughts as to why the .webm file might not play? I've written various .webm files out of several different imaging applications, so I don't believe that it is a formatting, codec, or compression issue - but of course, I cannot be certain. If you have a .webm file that you know works on Anroid tablets, it would help me if I could call a known working file to rule out file issues.

 

Thanks,

 

DB

 

 

EDIT - I just again set the following in my script:

 

scene.onPointerDown = function () { 

  videoTexture.video.play();

}

 

 

 

And as before, I cannot get the video to play on the tablet - and I've tried everythig you've been suggesting these past weeks, as well as everything else I could think of doing.

[RaananW]

Hi,

 

just checked on my android device - works. But requires patience.

I believe the entire film buffered before it started playing. This might be server related, or device related. If the server doesn't support streaming (206 status), the entire file would have to be downloaded before playing it. I can't debug it at the moment. check on your end if it starts playing after a minute or two.

[dbawel]

Thank you so much for your help on this post today. I did wait almost a minute, as I knew it required to buffer the entire video - but I did not wait long enough obviously. I'm still trying to get the scene to play, and it would be helpful to know what actions you used to get the video to play.

 

Upon loading, when you see the black screen (videoTexture plane mesh), do you simply wait and then hit the play button? Or what actions did you take to get this to work? Also, what tablet are you using?

 

Thanks,

 

DB

[RaananW]

Morning,

All I did was press the play button and waited. I tested this on my android smartphone, running stock Android 5.1.1

Just a note - when testing this morning, the play button only started the audio and not the video. The screen stayed black. Did you change anything?

Would be great to know if anyone else tested the scene and saw (or didn't) dora.

[dbawel]

The scene has not changed at all,so there should be no change in behavior. I'm running 4.4.2 on my Sony Xperia Z2 Anroid tablet, and the behavior you're reporting is exactly what I would expect as that is the way I've build the function into the scripts. However, on my tablet, when I hit the play button, the screen turns white (in chrome), and I receive a meesage that says "oops - WebGL hit a snag." - and then there is a hypertecxt on the bottom right of the screen that says LEARN MORE, RELOAD, or IGNORE.  When I hit reload, the screen reloads and the same process occurs when I hit the play button and the browser screen turns white again upon refresh.

 

If anyone else reading this could please follow the link below and onc the scene is loaded with a black screen, please press the play button and let me know what happens and what device and version of Anroid you're using - or other OS such as Apple. This is the only way I can think of to perhaps begin to understand why my tablet will not play the video will not play for me but plays for RaananW.

 

Please test on your tablet if you can:

 

http://www.qedsoft.com/DEMOS2014/creative_drawing_v1/index2.html

 

DB

[Dad72]

Hi,

you have to try the ogv format. not sure it changes a lot, but depending on the browser, certain format are not supported. Or maybe the file is too large for the tablet.

Try with a small video file and with 3 formats (mp4, webm and ogv) to test.

[dbawel]

Hi Dad72 and RaananW,

 

OK, I'm now using the .ogv file format for my video texture, and the scene is working - except I'm finding the same behavior as RaananW - which is no video image, only audio playback with the play and pause buttons working fine. I'm very confused as RW said he first was able to play both video and audio on his phone yesterday - but now only audio which is only what I am able to play back also. The scene still runs fine on desktop, but I'm not certain how to proceed to fix video playback for mobile devices.

 

If anyone has any experience with this, I would greatly appriciate any suggestions you might have. And thank you both Dad72 and RW for helping me to get this far, as even audio playback is a good advancement.

 

Again, if anyone can possible help to troubleshoot this, the WIP link is:

http://www.qedsoft.com/DEMOS2014/creative_drawing_v1/index2.html

 

Not all buttons are attached to functions currently, as I'm in the process of optimizing the code overall - and on a seperate script, as I'll keep this script consistant until I can solve the video playback problem on mobile devices. However, the play and pause buttons are working correctly and you are still able to select a color and draw directly on the video.

 

Thanks,

 

DB

[RaananW]

Hi DB

 

Just checked once again - video is showing correctly on my android phone (see attachment)

 

Clicked play, waited a bit, and there is was.

[Dad72]

It's strange if you had the sound and not pictures...

 

I try with my android phone and I have the same problem. the sound but no picture. I have a black screen. 

 

I do not know why. I think of incompatibility or activate one option in the phone.

[Dad72]

I just see that I have a double screen on my browser. maybe this is the problem ?

 

 

look at the picture center, you have a second small video screen

[dbawel]

@Dad72,

 

Yes, the artifact seen at the origin (cery tiny) has been in the scene since I began building the app months ago. I am not creating any additional objects other than what you see on screen, and the only thing I can think of is that this is some kind of artifact from the bGui extension - but I'm not familiar enough with Temechon's code to know if this is the case. However, I have not had any conflicts whatsoever from any function or operation in my scene - so I don't believe that this is contributing in any way to my video playback issue, and I've never had any playback problems on my laptop with this artifact always present.

 

And as mentioned, the scene works perfectly on desktops and laptops - and only has a problem on my tablet. I have been looking at this artifact, and have a message into Temechon on this and another issue, but haven't heard back from him in a couple of days. I'm sure he'll respond soon, and I'll ask him to see if he might have an idea if the bGui extension might somehow be causing this artifact. However, I believe this is a bug in babylon.js from using multiple canvas' to draw on a dynamic texture - but not certain why, although I'm sure this is not contributing to the videoTexture playback issue. If you have time and are able to view the scene on a desktop or laptop, you can see all connected GUI and other functions working correctly as you are able to select colors and paint on the video or a 3D object. And I can report that the draw function is working fine on mobile, only that you are not able to see the result as the video plane mesh is rendered black without the video color on mobile devices - since the video is not playing any color image - there is no image, only black with audio playing. And of course, the play and pause buttons are enabled and working fine. And if any buttons do not load their images correctly, you can refresh or simply use them without their images - however, they usually load OK on refresh.

 

Also, if I replace the videoTexture with an image, the image displays correctly on all devices, and allows me to paint on a textured 3D mesh or the same video plane which I'm attaching the videoTexture on. I have spent several weeks now trying to figure out why I cannot play a videoTexture on my tablet - but have not made this a huge priority until now as I still had many functions to build into the app. Now that I have practically every function built and am ready to complete the app (close to completion), I now have this as a priority to solve the mobile videoTexture playback problem. The scene I've directed the link below to is a version of the app that does not have all of the features, as I stripped out everything that was not essential in order to work with a scene that only plays back video and still has the draw function embedded, as the draw function using a dynamic texture is key to the app.

 

So if you or anyone else has time to look at my primary index.js script with the GUI, scene creation, and essential functions, perhaps someone might be able to see what the problem is. Otherwise, I have very little more to build for the app to be finished, and it will be good if I could only get the scene to perform on mobile devices the same way it performs on desktops. I've attached a zip file of the script (index.js) to this post if anyone has the time to review, and below is a new link to the scene using the attached index.js file:

 

http://www.qedsoft.com/DEMOS2014/creative_drawing_v1/index11.html

 

 

Thank you and everyone very much for your time,

 

DB

[Dad72]

Sorry I have no idea of ​​the problem. For against yes, the small double image is caused by the orthographic camera bGUI. I already had this problem when I try. and I ended up construir CastorGUI.

I think you can used with layerMask this problem to avoid duplicates.

 

I hope you find the solution.

[dbawel]

Hi Dad72,

 

I'm not certain how I might implement layer masks to correct the duplicate scene objects artifact. If you have any examples I might review, it would be very helpful.

 

Also, I really like bGUI, however, I've been anxious to try CastorGUI - but it has taken me much longer than expected to finish my current app due to serious family illness which I've had to dedicate much of my time lately. But now I have to deliver the drawing app for beta testing to a couple of companies by the first week of January. But my next app will use CastorGUI, and I'm looking forward to pushing the envelope as far as possible with the next app - which is a multi-user real-time social app to share Facebook, YouTube, personal media, and many of the most popular social sites - by groups of friends simltaniously synced in real-time. I already have many of the functions working, but no GUI as of yet - so I'll be diving into this by mid-January.

 

Thanks so much,

 

DB

[dbawel]

Finally - I have the video and audio correctly playing on all tested mobile devices, browsers, and OS versions. The problem was a video encoding issue. Although I used every application I could including Premiere, Sony Vegas, and so many others, and attempting to encode videos using literally every online converter to .webm and .ogv, none of these would provide proper encoding for playback on all mobile devices - yet none of these formats which I encoded in various applications and online played back both video and audio correctly on my desktops and of course laptops. And I had no idea if it was a conflict in my scripts, an issue with multiple canvas' and dynamic materials and textures, or some unknown bug I'd had the bad fortune to run into.

 

So the solutions I found are to use either Sony Vegas, Premiere (which I was already using to encode video and audio), although I now prefer and recommend the VLC player/converter for encoding .mp4 video files for the very best control and optimization for an HTML5 video or a videoTexture in babylon.js - within all browsers I tested today. So encoding and playback .mp4 video files using most video editors and encoders was never a problem on desktops and most browsers, but the best solution in my opinion for .mp4 is definately the VLC player/converter.

 

Now, for the main problem which I have been having playback issues for 2 months now, is that I could not encode a .webm or .ogv video file for playback on all mobile devices, and at best, only audio and rarely video playback worked - dependng on the mobile device and the browser on various tablets and phones - both Android and Iphone.

 

So in despair I kept at it, and after trying practically everything I could think of, I spent the past two days just working on encoding and analyzing the resulting video, compression, bitrates, etc. What I discovered is that if I encode both the .webm and .ogv using the FireFogg extension for FireFox, and using the correct advanced settings, I now have video files which so far have played back both video and audio correctly on multiple mobile devices, OS versions, and browsers without fail.

 

I found that I did not need to modify my scene (scripts and application) in any way - that the problem was only due to encoding and conversion of video files. I have read other posts in the past where users have had similar issues and there was apparently no solution, so I hope now that no one else has to go through the lengthy troubleshooting process which I had to do - along with all of the other seasoned users on this forum who aided me as much as they were able.

 

If anyone needs the general conversion settings and specifics I found to universally work for video and audio on most all devices, browsers, and OS versions, please let me know and I'm happy to post these. If you believe this is appropriate to add to the documentation site, I'll certainly update the site - however, these might change in future revisions of browsers and OS versions, but I doubt it.

 

So for me, this is a banner day.  Although, it has been one of the most painful periods I've ever spent troubleshooting ny application, since there is no consistant documentation online for HTML5 video encoding for mobile devices - as nothing I read online worked. And as working in baylon.js is generally new to practically all of us and evolving rapidly, there was no basis for believing it wasn't in my scripting or usage. I simply tried everything and stumbled upon a very reliable set of encoding solutions.

 

Thank you to all those who responded to my posts and put in the time to provide help. I'm just very happy that I found a solution - not only for me, but for everyone who might now avoid any incompatabilities in the future.

 

Cheers,

 

DB