Project 3: Programming Video Emoticons

The goal of this project is to gain familiarity with prototyping with video and comparing between two working prototypes of different design approaches.

You will be creating a web-based messaging application that replaces emoticons with a video message that expresses the emotion. That is, instead of typing ":-)", the user records a video message demonstrating their smile. Or instead of typing "lol", the user records a video message demonstrating laughing out loud. Your challenge is to work in a pair to pick two design approaches for replacing emoticons with video and implement working prototypes. The goal is to learn from implementing design concepts, do not worry too much about the UI polish. We will provide the basic scaffolding to implement a web-based messaging system and programmatically control video — the rest is up to you!

Designs
Your team should brainstorm as many different ideas as you can. One exercise to try is do some messaging while you're in the same room and where you try to get your partner to react to your messages--then pay attention to the cues of when your partner reacts and how you might capture that in video and send it along in the message (a combination of participant observation and bodystorming). Choose your ideas to be interestingly different!

Technology
We are providing scaffolding code that enables creating a web-based messaging application and controlling video. You can find a demo online here.
To get the starter code, you can either download it as a zip file or fork the github repository

You will need:

• A Firebase account
• Node.js
• A way to host/upload your code. We recommend Heroku

To run: In a terminal window, navigate to the folder and type

node app

Then, in a web browser, navigate to localhost:3000.

Files you will need to edit:

• views/index.handlebars -- the HTML of the app (You can use plain HTML syntax or handlebars syntax)
• public/stylesheets/main.less -- the CSS of the app (You can use plain CSS syntax or Less syntax)
• public/javascript/main.js -- the meat of the app.

Most of your work will be in main.js. We are using a library called MediaStreamRecorder to record streaming video from your webcam, and Firebase as a way of managing your data. Make sure to look through the documentation given below and familiarize yourself with the code given before you start tinkering. It should be mostly self-explanitory, but please come to lab or office hours if you have any questions!

There are many resources online for the technologies we're using. Here are a few: Firebase, Media Stream Recorder, HTML5 video tutorial, Video element documentation, Less, Handlebars

We recommend hosting your code using a public repository on the CS 247 organization in GitHub. It provides hosting, task management, and source control. GitHub will be required for later assignments, but you are welcome to use it with this one as well.

Deliverables. The first and easiest deliverable is to sign your group up on this P3 group form by 12:00 midnight on Tuesday April 8. The other deliverables are due on Tuesday January 15 by 12:00 noon before class. The project should be submitted using the P3 submission form:

1. Working demo pointer
   For each prototype, submit a pointer to the web-based messaging system where we can try it out ourselves.
2. Project code pointer
   Turn in a zip archive of your development workspace for each prototype, including all source code. If you are using the CS 247 Github organization, send us the link to your repo. We should be able to simply open the project on a localhost server and run the application. Please provide any special instructions if needed.
3. Reflection comparison on the two prototypes
   A description of what you learned by building and comparing two working prototypes. This could be done by doing a heuristic evaluation, but getting a few people to informally try it out and get their feedback would also be very valuable.

You must work in pairs for this assignment. This does not need to be the same team as P2 or your final project, so we encourage you to explore and meet new possible team members.

Grading
40%   Design of Prototype A

• 30% Design concept for sending and viewing video messages
• 10% Implementation

40%   Design of Prototype B

• 30% Design concept for sending and viewing video messages
• 10% Implementation

20%   Reflection comparing the two prototypes

P3 Grading Rubric

---

Please feel free to e-mail us at cs247@cs.stanford.edu if you have any questions.