Mozilla Demo Studio

  • ส่งการสาธิต

Gumgram

Take a snapshot from your webcam and give it retro filters

สร้างโดยใช้ JavaScript, HTML5, Canvas, วีดิโอ

  • 113 การดู
  • 0 ความคิดเห็น

ข้อมูลเพิ่มเติมเกี่ยวกับการสาธิตนี้จากผู้สร้าง

The name comes from the contest idea. GUM is short getUserMedia and gram, well it's like a popular photo app that may have inspired the idea. Ideally I'd have liked to use the CSS3 filters but they aren't quite cross browser yet, so using some math I directly manipulate the pixel values.

Black and White - average of RGB per pixel
Blue Shift - swap the Red Values and Blue Values i.e. RGB => BGR
Hulk and Retro - Attempt to Hue Rotate from RGB, found an algorithm to Swap though YIQ space, read more here http://beesbuzz.biz/code/hsv_color_transforms.php
Sepia - Found a matrix of values online and adjusted RGB values. Similiar to Hulk and Retro, but less math.
Solarized - Invert the colors. Since colors fall between 0 - 255 you have to transform around 127

Basic video code was stood up around MDN getUserMedia tutorial. I've added jQuery (preference), and a bit if image processing.

ยังไม่มีความคิดเห็น

Register or log in to add your own.

รับโค้ดต้นฉบับ

ดาวน์โหลดต้นฉบับ 2.66 KB · ไฟล์ ZIP

Browse the Source

การสาธิตนี้ถูกใช้งานภายใต้ใบอนุญาต Public Domain (where applicable by law)