Skip to content

Instantly share code, notes, and snippets.

@mjromper

mjromper/chroma.js

Last active December 19, 2015 15:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mjromper/5974552 to your computer and use it in GitHub Desktop.
Save mjromper/5974552 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chroma.js
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia (
// constraints
{
video: true,
audio: true
},
// successCallback
function(localMediaStream) {
$('.warn').hide();
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
},
// errorCallback
function(err) {
console.log("The following error occured: " + err);
}
);
var Chroma = {
capturing: false,
bgframe: null,
chromaImg: 'http://home.comcast.net/~funtoos/Desktop-capture2.jpg',
doLoad: function() {
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
this.c2 = document.getElementById("c2");
this.ctx2 = this.c2.getContext("2d");
var self = this;
this.video.addEventListener("play", function() {
self.width = self.video.videoWidth;
self.height = self.video.videoHeight;
self.ctx1.translate(self.width, 0);
self.ctx1.scale(-1, 1);
self.timerCallback();
}, false);
},
timerCallback: function() {
if (this.video.paused || this.video.ended) {
return;
}
this.computeFrame();
var self = this;
setTimeout(function () {
self.timerCallback();
}, 50);
},
computeFrame: function() {
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
var l = frame.data.length / 4;
if (this.capturing){
this.bgframe = frame;
this.capturing = false;
}
if (this.bgframe){
for (var i = 0; i < l; i++) {
var r1 = frame.data[i * 4 + 0];
var g1 = frame.data[i * 4 + 1];
var b1 = frame.data[i * 4 + 2];
var r2 = this.bgframe.data[i * 4 + 0];
var g2 = this.bgframe.data[i * 4 + 1];
var b2 = this.bgframe.data[i * 4 + 2];
if (this.rgbDistance([r1, g1, b1],[r2,g2,b2]) < 70){
frame.data[i * 4 + 3] = 0;
}
}
}
this.ctx2.putImageData(frame, 0, 0);
return;
},
rgbDistance: function(c1, c2){
var rmean = (c1[0]+c2[0])/2;
var rD = c1[0] - c2[0];
var gD = c1[1] - c2[1];
var bD = c1[2] - c2[2];
return Math.sqrt( (((512+rmean)*rD*rD)/256)+4*gD*gD+(((767-rmean)*bD*bD)/256) );
},
captureFrame: function(){
this.capturing = true;
$('#c2').css('background-image', 'url('+this.chromaImg+')');
},
resetFrame: function(){
this.bgframe = null;
$('#c2').css('background-image', 'none');
},
setChroma: function(elem){
console.log($(elem).attr('src'));
this.chromaImg = $(elem).attr('src');
if (this.bgframe !== null){
$('#c2').css('background-image', 'url("'+this.chromaImg+'")');
}
}
};
Raw
index.html
<!DOCTYPE html>
<head>
<style>
body {
background: black;
color:#CCCCCC;
}
.warn{
color: red;
}
video {
display:none;
}
#c1 {
display:none;
}
#c2 {
float:left;
background-repeat: no-repeat;
background-size: 640px 480px;
z-index: 1;
}
.backgrounds {
margin-left: 20px;
float: left;
}
img {
cursor: pointer;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="chroma.js"></script>
</head>
<body onload="Chroma.doLoad()">
<p class="warn" align="center">First of all!! Allow the browser use your camera</p>
<div>
<button onclick="Chroma.captureFrame()">START CHROMA</button>
<button onclick="Chroma.resetFrame()">RESET</button>
</div>
<div class="container">
<video id="video" autoplay="true" width="160" height="120"></video>
<canvas id="c2" width="640" height="480"></canvas>
<div class="backgrounds">
<h2>Select chroma image</h2>
<div><img src="http://home.comcast.net/~funtoos/Desktop-capture2.jpg" width="160" height="120" onclick="Chroma.setChroma(this)" /></div>
<br/>
<div><img src="http://th01.deviantart.net/fs71/PRE/f/2011/362/b/7/windows_yiffy_mod_by_rockeyda-d4kgmll.png" width="160" height="120" onclick="Chroma.setChroma(this)" /></div>
<br/>
<div><img src="http://www.stardock.com/products/odnt/odnt-mar00d.jpg" width="160" height="120" onclick="Chroma.setChroma(this)" /></div>
</div>
</div>
<canvas id="c1" width="640" height="480"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment