I recently built a quick prototype to get the classic interactive movie game Night Trap running in the browser. Assets stream from Azure Media Services and play through the open source video.js player as an .mp4. I also converted all of the video to adaptive streaming and am now in the process of using the Azure Media Player. Read my two-part post, Deconstructing Night Trap, for an overview of the process.
In rebuilding Night Trap, I ran into an issue where I needed to listen for an event, specifically when the URL for the video feed changes as a user is viewing a camera in a particular room. For example, I am looking at the kitchen camera and there is nothing going on, and at the 1:20 mark characters are supposed to enter the room. How do I tell the video player that the URL has changed at that time and that it should be playing the new URL I just passed in?
In comes Object.observe to save the day.
What is Object.observe?
In my search for a solution that I could use immediately, I stumbled across this excellent GitHub repo from MaxArt2501. Within it, he wrote a polyfill that allowed me to use Object.observe right now. Perfect!
His description sums up the issue well:
Object.observe is a very nice EcmaScript 7 feature that has landed on Blink-based browsers (Chrome 36+, Opera 23+) in the first part of 2014. Node.js delivers it too in version 0.11.x, and it’s supported by io.js since its first public release.
In short, it’s one of the things web developers wish they had 10-15 years ago: it notifies the application of any changes made to an object, like adding, deleting or updating a property, changing its descriptor and so on. It even supports custom events. Sweet!
The problem is that most browsers still doesn’t support Object.observe. While technically it’s impossible to perfectly replicate the feature’s behaviour, something useful can be done keeping the same API.