LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



If you wanna see a magic, make you room more dark. 🔮
Hey, there! Turn the lights on. 💡
Oh, snap! Your browser has probably problem with CodePen.io + Media Devices API. Try Chrome instead. 💔
CSS
/*
  
  An experiment with a web camera. Based on the luminosity of pixels is decided if a user is in dark room or contrariwise.
  
  It's a little bit hacked. I hope that I'll clean the code someday. But for now, I have to sleep. 1:09 AM. xoxoxo

*/
body {
  background: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
}

.message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: blue;
  color: red;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}
.message .title {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  opacity: 0;
}
.message--on > .title--on {
  opacity: 1;
}
.message--off > .title--off {
  opacity: 1;
}
.message--error > .title--error {
  opacity: 1;
}

#canvas,
#video {
  display: none;
  height: 100px;
  width: 100px;
}

.lightbulb {
  height: 200px;
  width: 200px;
  border-radius: 100%;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  opacity: 0;
}
.lightbulb--off, .lightbulb--on {
  opacity: 1;
}
.lightbulb--off {
  background: transparent;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
  box-shadow: 0px 0px 5px rgba(255, 255, 0, 0), 0px 0px 60px rgba(255, 255, 0, 0), 0px 0px 150px rgba(255, 255, 0, 0), inset 0px 1px 5px rgba(255, 255, 255, 0.1), inset 0px 2px 20px rgba(255, 255, 255, 0.1), inset 0px 2px 150px rgba(255, 255, 255, 0.1);
}
.lightbulb--on {
  background: rgba(255, 255, 0, 0.8);
  box-shadow: 0px 0px 5px rgba(255, 255, 0, 0.4), 0px 0px 60px rgba(255, 255, 0, 0.3), 0px 0px 150px rgba(255, 255, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0), inset 0px 2px 20px rgba(255, 255, 255, 0), inset 0px 2px 150px rgba(255, 255, 255, 0);
}
JS
/*
  
  An experiment with a web camera. Based on the luminosity of pixels is decided if a user is in dark room or contrariwise.
  
  It's a little bit hacked. I hope that I'll clean the code someday. But for now, I have to sleep. 1:09 AM. xoxoxo

*/

const message = document.querySelector('.message');
const lightbulb = document.querySelector('.lightbulb');
const video = document.getElementById('video');
const canvas = document.getElementById('canvas').getContext('2d')
let initialState = false;

function setLightbulb(state) {  
  if (state) {
    if (!initialState){
        message.classList.remove('message--off');
    }
    lightbulb.classList.add('lightbulb--on')
    lightbulb.classList.remove('lightbulb--off')
  }else{
    if (initialState){
        message.classList.remove('message--on');
    }
    lightbulb.classList.add('lightbulb--off')
    lightbulb.classList.remove('lightbulb--on')
  }
}

function compute(first) {
    canvas.drawImage(video, 0, 0, video.height, video.width);
    const frame = canvas.getImageData(0, 0, video.height, video.height)
    
    let l = frame.data.length / 4;
    
    let state = false;
    for (let i = 0; i < l; i++) {
      let r = frame.data[i * 4 + 0];
      let g = frame.data[i * 4 + 1];
      let b = frame.data[i * 4 + 2];
      
      const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
      
      if (luma > 30) {
        state = true;
        break;
      }
    }
  
    if (first) return state
  
    setLightbulb(state);
}

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }).catch(() =>   message.classList.add('message--error'));
}else{
  message.classList.add('message--error');
}


video.addEventListener('play', function() {
    setTimeout(() => {
      initialState = compute(true);
    message.classList.add(`message--${initialState ? "on" : "off"}`);
      document.querySelector('.lightbulb').classList.add(`lightbulb--${initialState ? "on" : "off"}`)
    setInterval(compute, 1000)
    }, 1000)
});

Host Instantly Drag and Drop Website Builder

 

Description

An experiment with a web camera. Based on the luminosity of pixels is decided if a user is in dark room or contrariwise.
Term
Mon, 11/27/2017 - 21:34

Related Codes

Pen ID
Pen ID
Pen ID