This post has been updated. See note below.
View the demo » (Firefox or Chrome required)
View the source code »
In the course of a documentary video, subjects will, from time to time, present images or language that some audiences find objectionable. In the United States, the FCC regulates content it considers “indecent” on broadcast networks, but even on cable TV and the Internet, distributors often craft their own “standards and practices” to suit their company image and the target audience. Standards for what content is considered objectionable can vary widely depending on the distributor and the audience, even within a given geographical area and can even vary depending on the time of day. So as a practical matter, content must sometimes be filtered to meet the strictest of the many standards that may apply.
Though I acknowledge that censorship is often required, I tend towards trusting viewers to make their own decisions and therefore hate to see it applied any more than necessary. So I built an experimental video player that will allow a viewer or publisher to determine precisely which terms and images should be censored. With the media APIs in modern web browsers, it is possible to dynamically bleep or blur a video, using a single video file (well, one for each supported format) for potentially dozens of configurations.
View the demo, based on a clip from the Emmy Award-winning Where Soldiers Come From, directed by Heather Courtney, which aired on POV in 2011 and 2012. You can check off which words to scrub and whether or not to pixelate the mouths of people using those words. The demo is compatible with Firefox and Chrome.
Technology and Implementation
Spoken terms are typically scrubbed with a “bleep,” which consists of two audio operations: muting the source audio and generating a tone. We can do both with the Web Audio API, which enables real-time audio advanced processing in the browser. We’re using two of its simplest features: an oscillator to generate the tone and a couple of gain controls to raise or lower the volume of the tone and the source audio as needed.
The Web Audio API is available on all modern browsers, except for Internet Explorer, though it is broken in Safari. Though it’s not fully implemented in the demo, we could degrade the feature gracefully by simply lowering the volume of the audio track, skipping the “bleep” tone but at least muting the profanity. (Mobile Safari blocks this ability, so there isn’t a solution there yet. Hopefully the bugs will be fixed in the upcoming version.)
Images, like written profanity, graphic violence or nudity, are sometimes obscured by heavily pixelating the offending portion of the screen. There isn’t any nudity in the sample clip, so I used this feature to pixelate the mouths of the subjects while they’re swearing, as is sometimes done to prevent lip reading. (The demo allows you to turn this feature off.)
For this feature, I used my video processing library, Seriously.js, and created a new pixelate effect plugin for it. Seriously.js runs on WebGL, which is available in all modern browsers except Safari. In that case, we can fall back by creating a DOM element as a black rectangle covering the area instead. I used a simple, static rectangle for the demo, but with a little more work, one could use different shapes and animate the position of the pixelated area to match the moving image.
The audio and video effects are triggered by Popcorn.js, a Javascript library that is very effective at coordinating timed events along a video timeline. There is a JSON data file that stores every occurrence of a potentially objectionable word or image, each one with a start time, an end time and optionally the coordinates of a rectangle to pixelate. The video player gets the list of which words in that list to filter from the URL or via “postMessage” so we can toggle each word on and off instantly without reloading.
Future Improvements and Use Cases
The demo shows a very simple set of configuration options, but one can imagine a range of different ways to intelligently customize a viewing experience. You might group terms and images into ranks that might suit different audiences: one set of parameters for a school website, another for a business audience and another for the general public. Rather than selecting terms manually, a script could automatically guess at the best configuration based on geographic location, time of day or the viewer’s IP address. The FCC’s rules, for example, are more lenient after 10pm, but when broadcasting from the east coast of the US, those rules may need to wait until 1am when the west coast has caught up. But on the web, everybody has their own clock, so the video can be customized accordingly.
Update (9/10/2014): We’ve discovered that this demo won’t work in Firefox due to a known bug that prevents media from playing when it is served from a different domain than the page and is connected to the Web Audio API. The code is still usable, but only if your video is on the same server as the rest of your page.
Please let me know what you think of this tool. Did you try it? Share a link. You can comment below, use the hashtag #povtech or email us at filmmakers@pov.org.
Thanks to filmmaker Heather Courtney and Quincy Hill Films for allowing us to use a clip from Where Soldiers Come From. Watch the film at http://www.wheresoldierscomefrom.com/dvd/.
Get more documentary film news and features: Subscribe to POV’s documentary blog, like POV on Facebook or follow us on Twitter @povdocs.