Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A webcam example using WebRTC - in action here: http://codepo8.github.com/interaction-cam/

branch: master
Octocat-spinner-32 copies mozcamp logo November 16, 2012
Octocat-spinner-32 safe mozcamp logo November 16, 2012
Octocat-spinner-32 README.md sounds November 11, 2012
Octocat-spinner-32 copy.php fixes+cleanup November 13, 2012
Octocat-spinner-32 index.html fixes+cleanup November 13, 2012
Octocat-spinner-32 interactioncam.css fixes+cleanup November 13, 2012
Octocat-spinner-32 interactioncam.js fixing dimensions August 15, 2013
Octocat-spinner-32 mozcamp.png mozcamp logo November 16, 2012
Octocat-spinner-32 mozfest copy.png mozcamp logo November 16, 2012
Octocat-spinner-32 mozfest.png sounds November 11, 2012
Octocat-spinner-32 rip.wav sounds November 11, 2012
Octocat-spinner-32 screenshot.png sounds November 11, 2012
Octocat-spinner-32 simplecam.html sounds November 11, 2012
Octocat-spinner-32 snap.wav sounds November 11, 2012
Octocat-spinner-32 takeoff.wav sounds November 11, 2012
README.md

Interaction Cam

Interaction Cam is a WebRTC powered photobooth application. It is named that way because we are planning to use MaKey MaKey to trigger the camera with a high-five of visitors of the Mozilla Festival

Setup

The app has been tested on Chrome, Opera an Firefox Nightly 18. In order to get it to work on Chrome, you need to grant it access to the Camera and in Firefox Nightly you need to enable streaming media:

  • Type about:config and say yes that you want to make changes
  • Find the media.navigator.enabled entry and set it to true

Demo

The demo is right here on GitHub on this repository:

screenshot@100

Usage

The cam is very simple - I deliberately did not use any fancy image effects as there are enough cam examples like that out there.

  • Press space or click on the video to take a photo and get to the review
  • Press the "Uh, let's try that again" button or hit the left cursor key to take another photo
  • Press the "Win! Upload this!" button or hit the right cursor key to upload the photo to imgUrl.
  • Once uploaded, hit the "Take another" button or the right cursor key to take another photo

Image uploading

The image uploading is using the CORS anonymous API of imgur for storing pictures. The original code was used in the Motivational Poster Generator which used to be part of the Mozilla Web'o'Wonder.

If you use this, please get your own Application Key as the API is limited to 50 images per hour!

Something went wrong with that request. Please try again.