publiclab · jywarren · Sep 17, 2020 · Aug 29, 2020 · Aug 29, 2020
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -51,6 +51,7 @@ module.exports = function(grunt) {
                     'examples/capture/detect_sample_row.js',
                     'examples/capture/toggleRotation.js',
                     'examples/capture/getRow.js',
+                    'examples/capture/getUserMedia.js'
                 ],
                 dest: 'dist/capture.dist.js'
             }

diff --git a/dist/capture.dist.js b/dist/capture.dist.js
@@ -73,25 +73,61 @@
     if (selected_row > -1) $W.setSampleRows(selected_row, selected_row+1);
     else console.log('AutoDetectSampleRow: Increase light intensity and try again!')
   }
+$W.toggle_rotation=function(){
+
+  $W.rotated = !$W.rotated
+  if ($W.rotated == true) $('.btn-rotate').addClass('active');
+  else                    $('.btn-rotate').removeClass('active');
+  var style = $('#heightIndicator')[0].style
+  var stylePrev = $('#heightIndicatorPrev')[0].style
+  if ($W.rotated) {
+    style.marginTop = '0px';
+    style.borderBottomWidth = "0px"
+    style.borderRightWidth = "2px"
+    style.height = "240px"
+    style.width = "0px"
+    stylePrev.marginTop = '0px';
+    stylePrev.borderBottomWidth = "0px"
+    stylePrev.borderRightWidth = "2px"
+    stylePrev.height = "100px"
+    stylePrev.width = "0px"
+    $('#heightIndicator .vertical').show();
+    $('#heightIndicator .horizontal').hide();
+    $('.spectrum-example-horizontal').hide();
+    $('.spectrum-example-vertical').show();
+  } else {
+    style.marginLeft = '0px';
+    style.borderBottomWidth = "2px"
+    style.borderRightWidth = "0px"
+    style.width = "320px"
+    style.height = "0px"
+    stylePrev.marginLeft = '0px';
+    stylePrev.borderBottomWidth = "2px"
+    stylePrev.borderRightWidth = "0px"
+    stylePrev.width = "100%"
+    stylePrev.height = "0px"
+    $('#heightIndicator .vertical').hide();
+    $('#heightIndicator .horizontal').show();
+    $('.spectrum-example-horizontal').show();
+    $('.spectrum-example-vertical').hide();
+  }
+  // reset the indicator to the correct sample row:
+  $W.setSampleRows($W.sample_start_row,$W.sample_start_row)
+}
 $W.getRow=function() {
-     $W.frame += 1
-    if ( $W.options.context === 'webrtc') {
-      var video = $('video')[0];
-      // Grab the existing canvas:
-      var saved =  $W.excerptCanvas(0,0, $W.width, $W.height, $W.ctx).getImageData(0,0, $W.width, $W.height)
-
-      // manipulate the canvas to get the image to copy onto the canvas in the right orientation
-       $W.ctx.save()
-       $W.getCrossSection(video)
-       $W.ctx.restore()
-
-      // draw old data 1px below new row of data:
-       $W.ctx.putImageData(saved,0,1)
-    } else if( $W.options.context === 'flash'){
-      window.webcam.capture();
-    } else {
-      console.log('No context was supplied to getSnapshot()');
-    }
+    $W.frame += 1
+    var video = $('video')[0];
+    // Grab the existing canvas:
+    var saved =  $W.excerptCanvas(0,0, $W.width, $W.height, $W.ctx).getImageData(0,0, $W.width, $W.height)
+
+    // manipulate the canvas to get the image to copy onto the canvas in the right orientation
+    $W.ctx.save()
+    $W.getCrossSection(video)
+    $W.ctx.restore()
+
+    // draw old data 1px below new row of data:
+    $W.ctx.putImageData(saved,0,1)
+
 
     // populate the sidebar preview if there's a "preview" element:
     if ($('#preview').length > 0) {
@@ -204,44 +240,34 @@ $W.getRow=function() {
       }
     }
   }
-$W.toggle_rotation=function(){
+// Temasys Adapter JS
+// https://github.com/Temasys/AdapterJS
+// AdapterJS provides polyfills and cross-browser helpers for WebRTC. It wraps around
+// the native APIs in Chrome, Opera and Firefox and provides support for WebRTC in 
+// Internet Explorer and Safari on Mac and Windows through the available Temasys Browser Plugins.
+
+$W.getUserMedia = function(options) {
+  AdapterJS.webRTCReady(() => {
+    // The WebRTC API is ready.
+    const container = document.getElementById('webcam'),
+          video = document.createElement('video');
 
-  $W.rotated = !$W.rotated
-  if ($W.rotated == true) $('.btn-rotate').addClass('active');
-  else                    $('.btn-rotate').removeClass('active');
-  var style = $('#heightIndicator')[0].style
-  var stylePrev = $('#heightIndicatorPrev')[0].style
-  if ($W.rotated) {
-    style.marginTop = '0px';
-    style.borderBottomWidth = "0px"
-    style.borderRightWidth = "2px"
-    style.height = "240px"
-    style.width = "0px"
-    stylePrev.marginTop = '0px';
-    stylePrev.borderBottomWidth = "0px"
-    stylePrev.borderRightWidth = "2px"
-    stylePrev.height = "100px"
-    stylePrev.width = "0px"
-    $('#heightIndicator .vertical').show();
-    $('#heightIndicator .horizontal').hide();
-    $('.spectrum-example-horizontal').hide();
-    $('.spectrum-example-vertical').show();
-  } else {
-    style.marginLeft = '0px';
-    style.borderBottomWidth = "2px"
-    style.borderRightWidth = "0px"
-    style.width = "320px"
-    style.height = "0px"
-    stylePrev.marginLeft = '0px';
-    stylePrev.borderBottomWidth = "2px"
-    stylePrev.borderRightWidth = "0px"
-    stylePrev.width = "100%"
-    stylePrev.height = "0px"
-    $('#heightIndicator .vertical').hide();
-    $('#heightIndicator .horizontal').show();
-    $('.spectrum-example-horizontal').show();
-    $('.spectrum-example-vertical').hide();
-  }
-  // reset the indicator to the correct sample row:
-  $W.setSampleRows($W.sample_start_row,$W.sample_start_row)
-}
+    container.appendChild(video);
+    video.autoplay = true;
+    video.id = 'webcam-video'
+
+    const successCallback = stream => {
+      $('#heightIndicator').show()
+      $('#webcam-msg').hide()
+      attachMediaStream(video, stream)
+      if ($W.flipped == true) {
+        $W.flipped = false; // <= turn it false because f_h() will toggle it. messy.
+        $W.flip_horizontal();
+      }
+    };
+
+    const errorCallback = () => console.warn(error);
+
+    getUserMedia($W.defaultConstraints, successCallback, errorCallback);
+  });
+};
diff --git a/examples/capture/capture.js b/examples/capture/capture.js
@@ -1,4 +1,3 @@
-// window.webcam.getCameraList()
 flotoptions = {"crosshair":{"mode":"x"},"series":{"lines":{"show":true,"lineWidth":1}},"yaxis":{"show":true,"max":100,"min":0},"xaxis":{"show":false},"shadowSize":0,"threshold":{"below":0,"color":"#a00"},"grid":{"clickable":true,"hoverable":true,"borderWidth":0,"color":"#ccc","backgroundColor":"#111"},"colors":["#ffffff","rgba(255,0,0,0.3)","rgba(0,255,0,0.3)","rgba(0,0,255,0.3)","#ffff00"]}
 
   flotoptions.grid = {
@@ -29,6 +28,7 @@ $W = {
   // width: 1280,
   // height: 720,
   frame: 0,
+  defaultConstraints: { video: true, audio: false },
 
   initialize: function(args) {
     this.mobile = args['mobile'] || false
@@ -51,10 +51,7 @@ $W = {
       this.sample_start_row = localStorage.getItem('sw:samplestartrow') || this.width/2;
     }
     this.setSampleRow(this.sample_start_row)
-
-    getUserMedia(this.options, this.success, this.deviceError)
-
-    window.webcam = this.options
+    this.getUserMedia(this.options, this.success, this.deviceError);
     this.canvas = document.getElementById("canvas")
     $('canvas').width = this.width+"px"
     this.canvas.width = this.width
@@ -91,102 +88,9 @@ $W = {
     }
   },
 
-  success: function (stream) {
-    //console.log('success')
-    if ($W.options.context === 'webrtc') {
-      $('#heightIndicator').show()
-      $('#webcam-msg').hide()
-      var video = $W.options.videoEl, vendorURL = window.URL || window.webkitURL;
-      window.stream = stream
-      window.video = video
-      //if (!!stream) {
-      //  video.src = null;
-      //  stream.stop();
-      //}
-      if (navigator.mozGetUserMedia) video.mozSrcObject = stream;
-      else video.srcObject = stream;
-      video.onerror = function (e) {
-        stream.stop();
-      };
-      //video.play()
-      // flip image horiz. based on init terms
-      if ($W.flipped == true) {
-        $W.flipped = false; // <= turn it false because f_h() will toggle it. messy.
-        $W.flip_horizontal();
-      }
-    } else {
-      //flash context
-      console.log('flash or something else')
-    }
-  },
   deviceError: function (error) {
     //console.log(error)
   },
-  // options contains the configuration information for the shim
-  // it allows us to specify the width and height of the video
-  // output we're working with, the location of the fallback swf,
-  // events that are triggered onCapture and onSave (for the fallback)
-  // and so on.
-  options: {
-
-    "audio": false,
-    "video": true,
-
-    // the element (by id) you wish to apply
-    el: "webcam",
-
-    extern: null,
-    append: true,
-
-    // the recommended mode to be used is 'callback '
-    // where a callback is executed once data
-    // is available
-    mode: "callback",
-
-    // the flash fallback Url
-    swffile: "/javascripts/webcam-fallback/jscam_canvas_only.swf",
-
-    // quality of the fallback stream
-    quality: 100,
-    context: "",
-
-    debug: function () {},
-
-    // callback for capturing the fallback stream
-    onCapture: function () {
-      window.webcam.save();
-    },
-    onTick: function () {},
-
-    // callback for saving the stream, useful for
-    // relaying data further.
-    onSave: function (data) {
-      // in progress for Flash now
-      // seems to execute 240 times... once for each column?
-      var col = data.split(";"),
-        img = $W.canvas.getContext('2d').getImageData(0, 0, this.width, this.height);
-        tmp = null,
-        w = this.width,
-        h = this.height;
-
-      for (var i = 0; i < w; i++) {
-        tmp = parseInt(col[i], 10);
-        img.data[$W.pos + 0] = (tmp >> 16) & 0xff;
-        img.data[$W.pos + 1] = (tmp >> 8) & 0xff;
-        img.data[$W.pos + 2] = tmp & 0xff;
-        img.data[$W.pos + 3] = 0xff;
-        $W.pos += 4;
-      }
-
-      if ($W.pos >= 4 * w * $W.sample_height) {
-        $W.canvas.getContext('2d').putImageData(img, 0, 0);
-        $W.ctx.drawImage(img, 0, 0);
-        $W.pos = 0;
-      }
-
-    },
-    onLoad: function () {}
-  },
 
   // Draws the appropriate pixels onto the top row of the waterfall.
   // Override this if you want a non-linear cross section or somethine

diff --git a/examples/capture/getRow.js b/examples/capture/getRow.js
@@ -1,22 +1,17 @@
 $W.getRow=function() {
-     $W.frame += 1
-    if ( $W.options.context === 'webrtc') {
-      var video = $('video')[0];
-      // Grab the existing canvas:
-      var saved =  $W.excerptCanvas(0,0, $W.width, $W.height, $W.ctx).getImageData(0,0, $W.width, $W.height)
+    $W.frame += 1
+    var video = $('video')[0];
+    // Grab the existing canvas:
+    var saved =  $W.excerptCanvas(0,0, $W.width, $W.height, $W.ctx).getImageData(0,0, $W.width, $W.height)
 
-      // manipulate the canvas to get the image to copy onto the canvas in the right orientation
-       $W.ctx.save()
-       $W.getCrossSection(video)
-       $W.ctx.restore()
+    // manipulate the canvas to get the image to copy onto the canvas in the right orientation
+    $W.ctx.save()
+    $W.getCrossSection(video)
+    $W.ctx.restore()
+
+    // draw old data 1px below new row of data:
+    $W.ctx.putImageData(saved,0,1)
 
-      // draw old data 1px below new row of data:
-       $W.ctx.putImageData(saved,0,1)
-    } else if( $W.options.context === 'flash'){
-      window.webcam.capture();
-    } else {
-      console.log('No context was supplied to getSnapshot()');
-    }
 
     // populate the sidebar preview if there's a "preview" element:
     if ($('#preview').length > 0) {

diff --git a/examples/capture/getUserMedia.js b/examples/capture/getUserMedia.js
@@ -0,0 +1,32 @@
+// Temasys Adapter JS
+// https://github.com/Temasys/AdapterJS
+// AdapterJS provides polyfills and cross-browser helpers for WebRTC. It wraps around
+// the native APIs in Chrome, Opera and Firefox and provides support for WebRTC in 
+// Internet Explorer and Safari on Mac and Windows through the available Temasys Browser Plugins.
+
+$W.getUserMedia = function(options) {
+  AdapterJS.webRTCReady(() => {
+    // The WebRTC API is ready.
+    const container = document.getElementById('webcam'),
+          video = document.createElement('video');
+
+    container.appendChild(video);
+    video.autoplay = true;
+    video.id = 'webcam-video'
+
+    const successCallback = stream => {
+      $('#heightIndicator').show()
+      $('#webcam-msg').hide()
+      attachMediaStream(video, stream)
+      if ($W.flipped == true) {
+        $W.flipped = false; // <= turn it false because f_h() will toggle it. messy.
+        $W.flip_horizontal();
+      }
+    };
+
+    const errorCallback = () => console.warn(error);
+
+    getUserMedia($W.defaultConstraints, successCallback, errorCallback);
+  });
+};
+
diff --git a/examples/capture/index.html b/examples/capture/index.html
@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css"/>
     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
 
-    <script src="../../node_modules/getusermedia-js/dist/getUserMedia.min.js"></script>
+    <script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.min.js"></script>
     <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
     <script src="../../node_modules/flot/jquery.flot.js"></script>
     <script src="../../node_modules/flot/jquery.flot.crosshair.js"></script>

diff --git a/package.json b/package.json
@@ -27,7 +27,6 @@
     "d3": "~3.5.17",
     "flot": "~0.8.0-alpha",
     "font-awesome": "~4.7.0",
-    "getusermedia-js": "~1.0.0",
     "http-server": "^0.12.3",
     "jquery": "^3.3.1",
     "nvd3": "~1.8.6",