Advertisement
BrU32

JS Canvas Webcam Custom Display Image If Cam Is Covered FIN!

Feb 13th, 2017
145
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.72 KB | None | 0 0
  1. <center>
  2. <body bgcolor="black">
  3. <video id="video" width="640" height="480" autoplay></video>
  4. <b>
  5. <button id="t" hidden><b>Test Now!!</button>
  6. <canvas id="canvas" width="640" height="480"></canvas>
  7. <script>
  8. document.addEventListener("DOMContentLoaded", function() {
  9. var canvas = document.getElementById('canvas');
  10. var context = canvas.getContext('2d');
  11. var video = document.getElementById('video');
  12. var mediaConfig = { video: true,audio:false};
  13. var errBack = function(e) {
  14. console.log('An error has occurred!', e)
  15. };
  16. if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  17. navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
  18. video.src = window.URL.createObjectURL(stream);
  19. video.play();
  20. });
  21. }
  22. var cct=getBase64Image(video)
  23. var ctt=getBase64Image(video);
  24. var doc=document.getElementById('t');
  25. document.addEventListener('mousemove', function() {
  26.  
  27. context.drawImage(video, 0, 0, 640, 480);
  28. ctt=getBase64Image(video);
  29. var dexrnd=Math
  30. if(ctt>491990){
  31.  
  32.  
  33. }else{
  34. Load_Img('https://api.audiotool.com/track/dj_bru_-_acid_step/2/cover/640x480.jpg?showDefault=true')
  35. return 0; }
  36.  
  37. });
  38. }, false);
  39. function getBase64Image(img) {
  40.  
  41. var canvas = document.createElement("canvas");
  42. canvas.width = img.width;
  43. canvas.height = img.height;
  44.  
  45. var ctx = canvas.getContext("2d");
  46. ctx.drawImage(img, 0, 0);
  47.  
  48. var dataURL = canvas.toDataURL("image/png");
  49.  
  50. return dataURL.length-4000;
  51. }
  52. function Load_Img(path){
  53. var h,w;
  54. h=('500');
  55. w=('500')
  56. var canvas = document.getElementById("canvas");
  57. var ctx = canvas.getContext("2d");
  58. var img = new Image();
  59. img.src=(path);
  60. ctx.drawImage(img, 1, 1,h,w);
  61.  
  62. }
  63. </script>
  64.  
  65. </body>
  66. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement