favor webm videos

auduno · Sep 17, 2016 · 01b2864 · 01b2864
1 parent 5d5a074
commit 01b2864
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 37 deletions.
diff --git a/examples/components/ClmImageExample.js b/examples/components/ClmImageExample.js
@@ -18,7 +18,7 @@ import '!style!css!react-image-crop/dist/ReactCrop.css';
 import './ClmImageExample.styl';
 
 
-const MEDIA_SRC = 'media/franck_02159.jpg';
+import MEDIA_SRC from '../media/franck_02159.jpg';
 const MEDIA_SIZE = { width: 625, height: 500 };
 
 

diff --git a/examples/components/ClmVideoExample.js b/examples/components/ClmVideoExample.js
@@ -4,6 +4,10 @@ import VideoExample from './VideoExample';
 
 import Tracker from 'clmtrackr/js/Tracker';
 
+import WEBM_VIDEO from '../media/cap12_edit.webm';
+import OGG_VIDEO from '../media/cap12_edit.ogv';
+import MP4_VIDEO from '../media/cap12_edit.mp4';
+
 
 export default class ClmVideoExample extends VideoExample {
   constructor () {
@@ -13,8 +17,9 @@ export default class ClmVideoExample extends VideoExample {
     });
 
     this.mediaSize = { width: 400, height: 300 };
-    this.oggVideoSrc = 'media/cap12_edit.ogv';
-    this.mp4VideoSrc = 'media/cap12_edit.mp4';
+    this.webmVideoSrc = WEBM_VIDEO;
+    this.oggVideoSrc = OGG_VIDEO;
+    this.mp4VideoSrc = MP4_VIDEO;
   }
 
   newTracker () {

diff --git a/examples/components/FaceDeformationVideoExample.js b/examples/components/FaceDeformationVideoExample.js
@@ -12,6 +12,10 @@ import Deformer from 'clmtrackr/js/deformers/twgl';
 import './FaceDeformationVideoExample.styl';
 
 
+import WEBM_VIDEO from '../media/franck.webm';
+import OGG_VIDEO from '../media/franck.ogv';
+
+
 export default class FaceDeformationVideoExample extends VideoExample {
   constructor () {
     super();
@@ -23,7 +27,8 @@ export default class FaceDeformationVideoExample extends VideoExample {
     });
 
     this.mediaSize = { width: 370, height: 288 };
-    this.oggVideoSrc = 'media/franck.ogv';
+    this.webmVideoSrc = WEBM_VIDEO;
+    this.oggVideoSrc = OGG_VIDEO;
     this.mp4VideoSrc = null;
   }
 

diff --git a/examples/components/FaceMaskExample.js b/examples/components/FaceMaskExample.js
@@ -17,6 +17,11 @@ import Deformer from 'clmtrackr/js/deformers/twgl';
 import './FaceMaskExample.styl';
 
 
+import WEBM_VIDEO from '../media/cap13_edit2.webm';
+import OGG_VIDEO from '../media/cap13_edit2.ogv';
+import MP4_VIDEO from '../media/cap13_edit2.mp4';
+
+
 export default class FaceMaskExample extends VideoExample {
   constructor () {
     super();
@@ -27,6 +32,10 @@ export default class FaceMaskExample extends VideoExample {
 
     this.mediaSize = { width: 370, height: 288 };
     this._animateRequestId = null;
+
+    this.webmVideoSrc = WEBM_VIDEO;
+    this.oggVideoSrc = OGG_VIDEO;
+    this.mp4VideoSrc = MP4_VIDEO;
   }
 
   newTracker () {

diff --git a/examples/components/SimpleExample.js b/examples/components/SimpleExample.js
@@ -5,13 +5,17 @@ import {
   requestAnimFrame,
   cancelRequestAnimFrame
 } from 'clmtrackr/js/utils/anim';
+import { SUPPORTED_CODECS } from 'clmtrackr/js/utils/video';
 
 import TrackerContainer from 'clmtrackr/ui/container/TrackerContainer';
 
 import './ClmImageExample.styl';
 
 
-const MEDIA_SRC = 'media/franck.ogv';
+import WEBM_VIDEO from '../media/franck.webm';
+import OGG_VIDEO from '../media/franck.ogv';
+import MP4_VIDEO from '../media/franck.mp4';
+
 const MEDIA_SIZE = { width: 368, height: 288 };
 
 
@@ -23,6 +27,14 @@ export default class SimpleExample extends React.Component {
       points: null
     };
 
+    if (SUPPORTED_CODECS.webm) {
+      this.mediaSrc = WEBM_VIDEO;
+    } else if (SUPPORTED_CODECS.ogg) {
+      this.mediaSrc = OGG_VIDEO;
+    } else {
+      this.mediaSrc = MP4_VIDEO;
+    }
+
     this._animateRequestId = null;
   }
 
@@ -87,7 +99,7 @@ export default class SimpleExample extends React.Component {
         <TrackerContainer
           ref='trackerContainer'
           mediaType={'video'}
-          mediaSrc={MEDIA_SRC}
+          mediaSrc={this.mediaSrc}
           mediaSize={MEDIA_SIZE}
           showStats={true}
           tracker={this.state.tracker}

diff --git a/examples/components/VideoExample.js b/examples/components/VideoExample.js
@@ -5,9 +5,8 @@ import RaisedButton from 'material-ui/RaisedButton';
 import Toggle from 'material-ui/Toggle';
 
 import {
+  SUPPORTED_CODECS,
   supportsVideo,
-  supportsH264BaselineVideo,
-  supportsOggTheoraVideo,
   supportsUserMedia,
   loadVideo
 } from 'clmtrackr/js/utils/video';
@@ -39,8 +38,9 @@ export default class VideoExample extends React.Component {
     };
 
     this.mediaSize = { width: 400, height: 300 };
-    this.oggVideoSrc = 'media/cap13_edit2.ogv';
-    this.mp4VideoSrc = 'media/cap13_edit2.mp4';
+    this.webmVideoSrc = null;
+    this.oggVideoSrc = null;
+    this.mp4VideoSrc = null;
 
     this._onFrameAnimId = null;
   }
@@ -130,20 +130,18 @@ export default class VideoExample extends React.Component {
   }
 
   _insertAltVideo () {
-    if (supportsVideo()) {
-      if (supportsOggTheoraVideo()) {
-        this.setState({ mediaSrc: this.oggVideoSrc });
-      } else if (supportsH264BaselineVideo()) {
-        if (this.mp4VideoSrc) {
-          this.setState({ mediaSrc: this.mp4VideoSrc });
-        } else {
-          alert('no mp4 video available');
-        }
-      } else {
-        alert('No stock video available for your browser');
-      }
-    } else {
+    if (!supportsVideo()) {
       alert('Your browser does not support video');
+      return;
+    }
+    if (this.webmVideoSrc && SUPPORTED_CODECS.webm) {
+      this.setState({ mediaSrc: this.webmVideoSrc });
+    } else if (this.oggVideoSrc && SUPPORTED_CODECS.ogg) {
+      this.setState({ mediaSrc: this.oggVideoSrc });
+    } else if (this.mp4VideoSrc && SUPPORTED_CODECS.h264) {
+      this.setState({ mediaSrc: this.mp4VideoSrc });
+    } else {
+      alert('No stock video available for your browser');
     }
   }
 

diff --git a/js/utils/video.js b/js/utils/video.js
@@ -1,3 +1,5 @@
+import _ from 'lodash';
+
 let VIDEO_EL;
 
 const getVideoEl = () => {
@@ -13,20 +15,13 @@ export const supportsVideo = () => {
 };
 
 
-export const supportsH264BaselineVideo = () => {
-  if (!supportsVideo()) {
-    return false;
-  }
-  return getVideoEl().canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
-};
-
-
-export const supportsOggTheoraVideo = () => {
-  if (!supportsVideo()) {
-    return false;
-  }
-  return getVideoEl().canPlayType('video/ogg; codecs="theora, vorbis"');
-};
+export const SUPPORTED_CODECS = _.mapValues({
+  ogg: 'video/ogg; codecs="theora, vorbis"',
+  h264: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
+  webm: 'video/webm; codecs="vp8, vorbis"'
+}, (v) => {
+  return supportsVideo() && getVideoEl().canPlayType(v);
+});
 
 
 export const URL = (