Advanced Web Technology — WEB14302

What I did on the project WEB14302

The advanced web technology unit provided many challenges, in the initial lecture Innocent and myself discussed possible ways in which we could create a project which incorporates video and interactive elements. We came up with multiple ideas around adding additional information to the video using code to enhance the experience. Customisation is something that is key to an interactive experience so in order to customise it we thought of ways we can scrape information about the user, using things like the Facebook API or a form at the begining of the experience could help us to create a more immersive project. With Burak later we thought about using existing video content, using existing content would decrease the work load in terms of content creation and allow us to focus more on customising the experience, we came up with the idea of a customised episode of Friends. Friends is an iconic TV show that many are familiar with, because of that customisations for the user are obvious and can draw on what the user knows about the TV show. Friends has been out of production for a significant amount of time, this makes it ideal for showing the possiblities of how we can customise an interactive experience for the user to demonstrate to those who may be interested in creating one for something that they are currently try to promote as they can relate it to how it would work for their show as they’re likely to be familiar with the content and it gave us a lot of potential video content to use.

We began looking at elements we could customise of the episodes and scraping together episodes with relevant content, we decided to try to make the storyline based around an event for the user such as their Birthday so began looking for episodes with birthdays and the Characters getting ready. I began working on the site whilst innocent edited footage that Burak had found and marked up. For the website I found a picture of a retro TV online which I cut out in photoshop and changed elements to make it interactive for the user, I tested putting some MP4s into the video using the friends titles and found that it worked, I then decided to implement a form and look at getting user data into the website, I’d tried using the facebook API already and could only get minimal permissions without having the app all the way completed, I wanted to get an as immersive experience as possible but getting the user to fill out as little information as possible. To get additional information I decided to see what the browser can access and got the user location and also request access to their webcam and microphone, I thought other impressive things that I could get from the user would be their name, to choose a music genre, their phone number and postcode. I sampled trying out what I could do with all of this infomation, I looked up a way to use HTML5 canvas to show the webcam of the user, this is only supported in firefox and chrome but is a cool effect, I also used CSS animation to live write their name in the friends font so i could add them into the titles, I use the user location from the browser and their postcode to request multiple location images from the google maps api of locations that the user would be familiar with using street view and satelite view. I also researched how we can send text messages to the user with an api, I found these guys called clockwork sms who do it really simply so that I can send a text just be redirecting an iframe on the page, it’s open to abuse so couldn’t go on the site but works for demonstrative purposes.

I then began piecing all of this together out of HTML, CSS and Javascript, I had to change some of the video edits I was given to fit in with the website and export them again and then began on getting popcorn to control the way the videos are played, once the user has filled out the form normal javascript triggers the begining of the titles video, popcorn.js takes over from here and shows and hides the video at relevant times, creates assets like the users name in the friends fornt and shows their webcam, at the end of the video it changes the tv element to have additional buttons for the user to navigate between the next 2 scenes, it was paired down to 2 scenes instead of 3 after it was apparent that some of the group wasn’t going to add any work. Whilst Burak worked on some redesigned TV images I started setting up the way the next 2 scenes work, they largely use friends content but send texts at specific points using popcorn and shows and hides google map elements, once each of the videos are played they add a number to an array called total, once the array is larger than 1 the final video is played, this way you can watch the early scenes in any order. The final scene uses more user content within it, once innocent finished the video I had to widen the gaps between the cut aways and splice in images, we added in static videos we took from Simerons and Matts social networks as we can’t actually scrape the information from their facebook yet so we use this content as an example for the summative, the part where they enter the apartment is the only part we actually couldn’t change, I wanted to add in video with transparency but it’s only supported by chrome and requires a huge amount of work to convert it to an array of PNGs and then use ffmpeg to convert it to WebM. I think actually I would use 2 videos either side of the tv sceen and use css animation to change the size of the video on the right with the door opening however this would take a huge amount of time and I ran out. The Facebook API is integrated into the website but I had to take the function off of the button as theres no point in implementing it as I can’t get the information that I want, but if I did use it which I could once Facebook have approved me is that when you click it it will popup a window with facebook asking you to approve the request for information about you, facebook then returns that to me as an object I can access, it reutrns pictures as a JSON array which I would use, as well as other elements, this would mean I get rid of the form or at least have less fields, this will make it a more exciting shareable project. I would also need to add an if function for if certain information is missing like if the browser doesn’t support webcam access to show their profile picture instead.

I also created some interactivity with the tv screen to make things move about although they serve no purpose just to make the experience nicer.

This project was really interesting and I learnt to do some things I didn’t know I could do but it was overly ambitious and doesn’t have enough of a high quality finish in my opinion, just the titles and a short scene would’ve allowed us to make a slicker experience. Friends is really difficult to edit as it has a laugh track and a strong story line it is difficult to change because of this the story doesn’t make huge amount of sense but the customisations work in a cool way and the project has potential for the future. With this project how i would change it to make it a good shareable product I would make it a shorter experience using just the titles and ending scene to make it a more concise customised experience.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.