× Haoshu #1 The Lost PenBox #2 STAR TREE Generator #3 Match Clock #4 Lonely Universe Monster #5 Chinese Name Mondrian Encoder #6 Put your mask on! #7 A Day with Tech #8 Put your mask on! v2.0 #9 Daily Laughter #10 Apple Global Suppliers #11 Nested For Loop Visualizer
☰ Menu

Project #8 Experimental Camera with Consentful Interface | Put your mask on!

Please allow camera access if it's continuously loading.
Your camera data will never be sent to any server or documented. You are free to close this page at any time and the camera will be off once you have done it.

Designed by Haoshu Yang.


This is an iteration of the former project Experimental Camera by adding consentful interface. The design of interface follows the F.R.I.E.S model. The main purpose of this interface is to let users understand that this page never gains any user data and totally respects user privacy. Consequently, they will feel free to allow the page when it acquires camera access.

Design Process

The original version of the Experimental Camera only has the Loading Page and Main Page. The former runs immediately when the page is open and asks for camera access without informing the user in advance. The later has only one button changing the masks in default style and cannot close the camera when using. It doesn’t follow the F.R.I.E.S model at all.

Therefore, I build an additional Agree Page before asking the camera access and an About Page to introduce this program and the privacy rule. Also, several buttons in more delicate styles are added to the Main Page to trigger functions including “About”, “Restart” and “Reload”. The flowchart and sketches are shown below.

From the code level, the video is captured once the Agree button is clicked in the Agree Page. Thus, it won’t ask for camera access at the beginning. Button styles are set by different classes in “style.css” and respond when mouse hovering and clicking.


In terms of the F.R.I.E.S model, the Agree Page follows the rule of Informed and Specific by telling user how this page works, how their camera data is processed and their privacy is respected honestly. Users get to know that this page is about a video effect so that they can click the “Agree and Continue” button freely and enthusiastically. Meanwhile, when showing the camera effect, users can reload the page to stop showing it and close the camera, or simply close the page manually, which defers to the rule of Reversible.

User’s experience of this program is recontextualized by the consentful interface comparing with the original version. They won’t feel ‘panic’ anymore when it asks camera access. People know what it is at the beginning and they are aware of the their rights of leave at any time. Therefore, when these rights are guaranteed, user’s are more likely to immerse themself in this program.