converting color video to black and white video

+2 manuelg bustamante · February 27, 2015
I have been trying to run an example presented in the book HTML5 for Masterminds.
This example appears in the First Edition (2012) of the book and deals with the problem of converting color video to black and white video. The HTML, css3 and JavaScript codes provided in the book do not reproduce the original color video in black and white. I guess the JS code has a mistake but I could not find it and I wonder if there is someone that could fix it. In advance I thank you for your interest. The code found in the Listings of the book is the following:

HTML) Listing 7-28 - template for video on canvas
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Video on Canvas</title>
  <style>
    .boxes{
      display: inline-block;
      margin: 10px;
      padding: 5px;
      border: 1px solid #999999;
    }
  </style>
  <script src="canvasvideo.js"></script>
</head>
<body>
  <section class="boxes">
    <video id="media" width="483" height="272">
      <source src="http://www.minkbooks.com/content/trailer2.mp4">
      <source src="http://www.minkbooks.com/content/trailer2.ogg">
    </video>
  </section>
  <section class="boxes">
    <canvas id="canvas" width="483" height="272">
      Your browser doesn't support the canvas element
    </canvas>
  </section>
</body>
</html>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

JS) Listing 7-29 - converting color video to black and white video
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

function initiate(){
  var elem=document.getElementById('canvas');
  canvas=elem.getContext('2d');
  video=document.getElementById('media');
 
  video.addEventListener('click', push, false);
}
function push(){
  if(!video.paused && !video.ended){
    video.pause();
    window.clearInterval(loop);
  }else{
    video.play();
    loop=setInterval(processFrames, 33);
  }
}
function processFrames(){
  canvas.drawImage(video,0,0);
 
  var info=canvas.getImageData(0,0,483,272);
  var pos;
  var gray;
  for(x=0;x<=483;x++){
    for(y=0;y<=272;y++){
      pos=(info.width*4*y)+(x*4);
      gray=parseInt(info.data[pos]*0.2989 + info.data[pos+1]*0.5870 + info.data[pos+2]*0.1140);
      info.data[pos]=gray;
      info.data[pos+1]=gray;
      info.data[pos+2]=gray;
    }
  }
  canvas.putImageData(info,0,0);
}
window.addEventListener("load", initiate, false);
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx



Post a Reply

Replies

Oldest  Newest  Rating
+1 Samuel Oloruntoba · February 27, 2015
/images/forum/upload/2015-02-27/4d72101f9ececc2215603cf0918f261c.gif
hahahaha, I have encountered this error before and there is nothing wrong with your javascript(see the gif above) the problem lies with the browser you are using, the error said cross-origin data meaning that CORS(cross origin resource sharing) was not enabled on your server, therefore the browser takes this as a security issue as it is programmed to take something like this as an attempt to hack your website, but if you really want to request a file from another domain, all you need do is add an attribute of  crossOrigin with value anonymous and you should see something similar to the gif above.

<video id="media" width="483" height="272" crossOrigin="anonymous">
       <source src="http://www.minkbooks.com/content/trailer2.mp4">
<source src="http://www.minkbooks.com/content/trailer2.ogg">
</video> 
0 manuelg bustamante · February 27, 2015
Thank you very much!! adding this attribute of crossOrigin fixed immediately the problem. 
0 Samuel Oloruntoba · February 27, 2015
you're welcome
  • 1

HTML / CSS / Web Design

107,070 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators