graphics/webvideo.js

  1. 'use strict';
  3. var Thing = require('./thing.js');
  5. var DEFAULT_WIDTH = 150;
  6. var DEFAULT_HEIGHT = (DEFAULT_WIDTH * 3) / 4;
  8. const WEBCAM_INDICATOR = 'WEBCAM';
  10. /**
  11.  * @constructor
  12.  * @augments Thing
  13.  * @param {string} filename - Filepath to the video
  14.  */
  15. function WebVideo(filename) {
  16.     if (typeof filename !== 'string') {
  17.         throw new TypeError(
  18.             'You must pass a string to <span class="code">' +
  19.                 "new WebVideo(filename)</span> that has the video's location."
  20.         );
  21.     }
  22.     Thing.call(this);
  23.     var self = this;
  25.     var vid = document.createElement('video');
  26.     this.width = DEFAULT_WIDTH;
  27.     this.height = DEFAULT_HEIGHT;
  28.     this.type = 'WebVideo';
  30.     this.isWebCam = filename === WEBCAM_INDICATOR;
  32.     this.browserSupportsVideo = !!vid.canPlayType;
  33.     if (this.browserSupportsVideo) {
  34.         this.video = vid;
  35.         if (!this.isWebCam) {
  36.             this.video.src = filename;
  37.         } else if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  38.             navigator.mediaDevices
  39.                 .getUserMedia({video: true})
  40.                 .then(function(stream) {
  41.                     self.video.srcObject = stream;
  42.                     self.video.play();
  43.                 })
  44.                 .catch(function(error) {
  45.                     throw new Error('Web camera access was denied: ' + error);
  46.                 });
  47.         } else {
  48.             throw new TypeError('Your browser does not support web camera access');
  49.         }
  50.         this.filename = filename;
  51.         this.video.autoplay = true;
  52.         this.video.loop = false;
  54.         // Treat cross origin URLs as same origin. Allows for videos from different
  55.         // origins to be loaded and played, as long as that origin allows us to load
  56.         // the given video resource.
  57.         this.video.crossOrigin = 'anonymous';
  58.     }
  59. }
  61. WebVideo.WEBCAM = WEBCAM_INDICATOR;
  63. WebVideo.prototype = new Thing();
  64. WebVideo.prototype.constructor = WebVideo;
  66. /**
  67.  * Draws the WebVideo in the canvas.
  68.  *
  69.  * @param {CodeHSGraphics} __graphics__ - Instance of the __graphics__ module.
  70.  */
  71. WebVideo.prototype.draw = function(__graphics__) {
  72.     if (this.browserSupportsVideo) {
  73.         var context = __graphics__.getContext('2d');
  75.         // Scale and translate
  76.         // X scale, X scew, Y scew, Y scale, X position, Y position
  77.         context.setTransform(1, 0, 0, 1, this.x + this.width / 2, this.y + this.height / 2);
  78.         context.rotate(this.rotation);
  80.         context.drawImage(this.video, -this.width / 2, -this.height / 2, this.width, this.height);
  82.         // Reset transformation matrix
  83.         // X scale, X scew, Y scew, Y scale, X position, Y position
  84.         context.setTransform(1, 0, 0, 1, 0, 0);
  85.     }
  86. };
  88. /**
  89.  * Checks if the passed point is contained in the WebVideo.
  90.  *
  91.  * @param {number} x - The x coordinate of the point being tested.
  92.  * @param {number} y - The y coordinate of the point being tested.
  93.  * @returns {boolean} Whether the passed point is contained in the WebVideo.
  94.  */
  95. WebVideo.prototype.containsPoint = function(x, y) {
  96.     if (this.browserSupportsVideo) {
  97.         return x >= this.x && x <= this.x + this.width && y >= this.y && y <= this.y + this.height;
  98.     }
  99.     return false;
  100. };
  102. /**
  103.  * Gets the width of the WebVideo.
  104.  *
  105.  * @returns {number} Width of the WebVideo.
  106.  */
  107. WebVideo.prototype.getWidth = function() {
  108.     return this.width;
  109. };
  111. /**
  112.  * Gets the height of the WebVideo.
  113.  *
  114.  * @returns {number} Height of the WebVideo.
  115.  */
  116. WebVideo.prototype.getHeight = function() {
  117.     return this.height;
  118. };
  120. /**
  121.  * Sets the size of the WebVideo.
  122.  *
  123.  * @param {number} width - The desired width of the resulting WebVideo.
  124.  * @param {number} height - The desired height of the resulting WebVideo.
  125.  */
  126. WebVideo.prototype.setSize = function(width, height) {
  127.     this.width = width;
  128.     this.height = height;
  129. };
  131. /**
  132.  * Sets whether the WebVideo should start playing automatically once loaded.
  133.  *
  134.  * @param {boolean} autoplay - True/false whether the video should start playing automatically.
  135.  */
  136. WebVideo.prototype.setAutoplay = function(autoplay) {
  137.     if (this.browserSupportsVideo) {
  138.         this.video.autoplay = autoplay;
  139.     }
  140. };
  142. /**
  143.  * Sets whether the WebVideo should loop and play again once finished.
  144.  *
  145.  * @param {boolean} loop - True/false whether the video should loop.
  146.  */
  147. WebVideo.prototype.setLoop = function(loop) {
  148.     if (this.browserSupportsVideo) {
  149.         this.video.loop = loop;
  150.     }
  151. };
  153. /**
  154.  * Sets whether the WebVideo is muted or not.
  155.  *
  156.  * @param {boolean} muted - True/false whether the video should be muted.
  157.  */
  158. WebVideo.prototype.setMuted = function(muted) {
  159.     if (this.browserSupportsVideo) {
  160.         this.video.muted = muted;
  161.     }
  162. };
  164. /**
  165.  * Starts playing the WebVideo.
  166.  */
  167. WebVideo.prototype.play = function() {
  168.     if (this.browserSupportsVideo) {
  169.         this.video.play();
  170.     }
  171. };
  173. /**
  174.  * Pauses the WebVideo.
  175.  */
  176. WebVideo.prototype.pause = function() {
  177.     if (this.browserSupportsVideo) {
  178.         this.video.pause();
  179.     }
  180. };
  182. /**
  183.  * Stops the WebVideo.
  184.  */
  185. WebVideo.prototype.stop = function() {
  186.     if (this.browserSupportsVideo) {
  187.         this.video.pause();
  188.         this.video.currentTime = 0;
  190.         if (this.isWebCam && this.video.srcObject) {
  191.             this.video.srcObject.getTracks().forEach(function(track) {
  192.                 track.stop();
  193.             });
  194.         }
  195.     }
  196. };
  198. /**
  199.  * Returns whether the WebVideo is currently playing.
  200.  *
  201.  * @returns {boolean} True if the video is playing, false if it is not.
  202.  */
  203. WebVideo.prototype.isPlaying = function() {
  204.     if (this.browserSupportsVideo) {
  205.         return !(this.video.paused || this.video.ended);
  206.     }
  207.     return false;
  208. };
  210. /**
  211.  * Returns whether the WebVideo is currently muted.
  212.  *
  213.  * @returns {boolean} True if the video is muted, false if it is not.
  214.  */
  215. WebVideo.prototype.isMuted = function() {
  216.     if (this.browserSupportsVideo) {
  217.         return this.video.muted;
  218.     }
  219.     return false;
  220. };
  222. /**
  223.  * Defines a function to call once the video has loaded enough and is ready to play.
  224.  * @param  {Function} fn A function to call when the video is ready to play.
  225.  */
  226. WebVideo.prototype.onReadyToPlay = function(fn) {
  227.     if (this.browserSupportsVideo) {
  228.         this.video.oncanplay = fn;
  229.     }
  230. };
  232. module.exports = WebVideo;