DRAFT BUT LEAVING-UP AS I WORK ON IT
MVC stuff was getting me bogged-down a bit – felt like I needed to do something different for a bit – and I needed to do a Contact page.
I fancied doing:
- Google Earth video background from space, flying to my house culminating at StreetView level (Liz was a little concerned about that so I decided to just go to the street)
- Some contact detail clickable three.js visualisation on top of the video
Sounded simple, but so far taken err … a while.
- No plug-ins for the video (in case future changes messes-up my overlay divs
Challenges have included:
- Couldn’t record Google Earth video at decent frameworks in my main VM (turned off hardware acceleration for stability issues)
- Capturing a region of video, cropping-out controls
- Hosting the video for streaming – options changed over the years
- Deprecation of player_api on YouTube in favour of iframe_api
- For YouTube iframe_api: having empty-div in DOM ready for async API-ready event
- Video height issues on Android (with CSS) – working around with JQuery/resize for now
For video capturing I eventually leveraged Window 10’s built-in XBOX app which worked very well and easily for capturing the entire Google Earth window, efficiently. The Google Earth Pro’s built-in video-capture solution didn’t seem to do what I wanted and I didn’t want to spend a huge amount of time with it looking at making Tours etc.
For cropping I went heavy-handed with Adobe Premiere 6, using a crop-transform. I also used Premiere to take-out the still-moments in my video capture. Didn’t have time to make a new capture to just get rid of one tool-tip-show error though; it had required a few “takes” already. It was a struggle to render output efficiently though … I was planning to use Handbrake for multi-pass transcoding/recompression but skipped that when I settled on just using YouTube.
The last time I had streaming video on a webpage I had options of using DropBox, and, I assumed GoogleDrive. I have paid-for space on both, and thought I could just use HTML5 <video> etc. Things have moved-on however and after fruitless trying to make things work I then discovered through negative-research that the options don’t appear to be viable (maybe I’m mistaken but seemed that way).
I already have my main IIS server set-up for streaming, but the VM it sits in is upstairs, with the network bottle-necked by HomePlug networking-over-mains. The house layout and construction isn’t convenient for running Cat5 downstairs without a fair bit of unwelcome disruption (explored in some depth – incl. seeking professional opinion) and is difficult for line-of-sight WiFi though I do intend to use the Link Aggregation facility on my cheap network switches to include a 5GHz 802.11ac wireless bridge in the future. When I can afford it. Some how. Eventually I’ll have IIS and Apache solutions working downstairs and I also looked at setting-up Apache2 for streaming.
This all took a long time.
Eventually I settled on YouTube but got side-tracked looking at player_api solutions before I realised that was deprecated now in favour if iframe_api. More time.
For some reason Internet Explorer 11.5 (I think) on my Compute Stick keeps showing the controls for the embedded YouTube video, which changes its dimensions such that the width gets messed-up when I dynamically resize it. I keep the controls because I don’t know how to turn them off dynamically (seem to be part of player-vars that are injected at construction) and I need the controls on for a decent mobile-experience which doesn’t permit autoplay. It would be nice if I could check during a playing-event that everything’s ok and disable the controls dynamically. This threw me for a bit anyway until I realised it wasn’t an Internet Explorer problem per se, but some issue with that instance on my Compute Stick and so probably not anything to worry about in the wider-sense.
After completing my little Google Earth video I realised it was like POV flying, and maybe I could render something in Three.js to be a simple spaceship or some such thing. I really wanted to try three.js for fun, and to learn … as I imagined it might assist me with communicating better in the future, eventually vanquishing my compulsion to write. Initially I was thinking of having a simple game as a captcha – maybe using device orientation api on a mobile device, in order to reveal contact information but I simply don’t have time to get so side-tracked. Instead … KISS. Keep It Simple Stupid.
First of all, I wanted to try a simple CSS3D transform. I needed to know I could transform a child element over a parent YouTube iframe and use it as a canvas for three.js. And responsively resize it. That’s all I need to know for the future.
Next, I started the first three.js tutorial for creating a scene / spinning cube. (I’m not detailing every step like making the canvas background transparent etc. etc.) I did a search for ready-made spaceships hoping there might be a three.js TARDIS, but couldn’t find one. Did find a CSS3D TARDIS. Simplest thing I could find, to do for now … http://yomotsu.github.io/threejs-examples/basic_with_textures/ I’ll see if I can know-out a few .pngs in PhotoShop that’ll do for me. Found: http://armadafiles.com/files/armada-2/miscellaneous/texture-mods/borg-cube-textures/details