use native media devices to capture webcam images

Disco.Web/ClientSource/Scripts/Modules/Disco-AttachmentUploader/disco-attachmentuploader.js

@@ -1,6 +1,4 @@
-/// <reference path="webcam.js" />
+(function (window, document, $) {
-
-; (function (window, document, $, Webcam) {
     "use strict";
 
     var attachmentUploader = function (uploadUrl, dropTarget, uploadProgressContainer) {
@@ -82,12 +80,11 @@
 
         // #region Webcam Support
         self.uploadImage = function () {
-            var mediaWidth = 720;
+            let mediaStream = null;
-            var mediaHeight = 540;
+            let videoStreaming = false;
-            var mediaStream;
 
             // Setup Dialog
-            var dialog = $('<div>')
+            var dialog = $('<div><video></video></div>')
                 .attr({
                     id: 'Disco_AttachmentUpload_ImageDialog',
                     title: 'Upload Image',
@@ -98,46 +95,68 @@
                 draggable: false,
                 modal: true,
                 resizable: false,
-                width: mediaWidth,
+                width: 720,
-                height: mediaHeight,
+                height: 405,
                 close: function () {
-                    Webcam.reset();
+                    if (mediaStream) {
+                        mediaStream.getTracks().forEach(track => track.stop());
+                    }
                     window.setTimeout(function () {
                         dialog.dialog('destroy');
                     }, 1);
                 }
             }).closest('.ui-dialog').children('.ui-dialog-titlebar').css('border-bottom', 'none');
+            const video = dialog.find('video')[0];
 
-            var dialogButtons = [{
+            navigator.mediaDevices
-                text: 'Capture',
+                .getUserMedia({
-                click: captureImage
+                    audio: false,
-            }];
+                    video: {
+                        width: { ideal: 1080 },
+                        height: { ideal: 720 },
+                        facingMode: 'environment'
+                    }
+                })
+                .then(stream => {
+                    mediaStream = stream;
+                    video.srcObject = stream;
+                    video.play();
+                })
+                .catch(err => {
+                    console.error(err);
+                    dialog.dialog('destroy');
+                });
 
-            // Capturing
+            video.addEventListener('canplay', ev => {
-            function captureImage() {
+                if (!videoStreaming) {
-                var dataUri = Webcam.snap();
+                    const width = 720;
-                self._uploadImage(dataUri);
+                    let height = video.videoHeight / (video.videoWidth / width);
-            }
+                    if (isNaN(height)) {
-            Webcam.set({
+                        height = 405;
-                width: mediaWidth,
+                    }
-                height: mediaHeight,
+                    video.setAttribute('width', width);
-                dest_width: mediaWidth * 1.5,
+                    video.setAttribute('height', height);
-                dest_height: mediaHeight * 1.5,
+                    videoStreaming = true;
-                jpeg_quality: 95
+                    dialog.dialog('option', 'buttons', [{
-            });
+                        text: 'Capture',
-            Webcam.setSWFLocation('/ClientSource/Scripts/Modules/Disco-AttachmentUploader/webcam.swf');
+                        click: () => {
-            Webcam.on('error', function (error) {
+                            const canvas = document.createElement('canvas');
-                alert(error);
+                            canvas.width = video.videoWidth;
-                dialog.dialog('close');
+                            canvas.height = video.videoHeight;
-            });
+                            const context = canvas.getContext('2d');
-            Webcam.on('live', function () {
+                            context.drawImage(video, 0, 0);
-                dialog.dialog('option', 'buttons', dialogButtons);
+                            canvas.toBlob(blob => {
-                dialog.closest('.ui-dialog')
+                                self._uploadImage(blob);
-                    .children('.ui-dialog-buttonpane')
+                            }, 'image/jpg');
-                    .css('margin-top', 0)
+                        }
-                    .find('.ui-button:first').focus();
+                    }]);
-            });
+                    dialog.css('height', '');
-            Webcam.attach(dialog.attr('id'));
+                    dialog.closest('.ui-dialog')
+                        .children('.ui-dialog-buttonpane')
+                        .css('margin-top', 0)
+                        .find('.ui-button:first').focus();
+                }
+            })
         };
         // #endregion
 
@@ -198,28 +217,18 @@
             });
         };
 
-        self._uploadImage = function (dataUri) {
+        self._uploadImage = function (blob) {
-
-            if (self._hideFlashVideoOverlay())
-                $('#webcam_movie_obj, #webcam_movie_embed').css('display', 'none');
-
-            var imageData = dataUri.replace(/^data\:image\/\w+\;base64\,/, '');
-
-            var imageBlob = new Blob([Webcam.base64DecToArr(imageData)], { type: 'image/jpeg' });
-
             var fileName = 'CapturedImage-' + moment().format('YYYYMMDD-HHmmss') + '.jpg';
 
             self.getFileComments(fileName, function (img) {
+                const dataUri = URL.createObjectURL(blob);
                 img.attr('src', dataUri);
                 return true;
             }, function (result, comments) {
-                if (self._hideFlashVideoOverlay())
-                    $('#webcam_movie_obj, #webcam_movie_embed').css('display', '');
-
                 if (!result)
                     return;
 
-                self._uploadFile(imageBlob, fileName, comments);
+                self._uploadFile(blob, fileName, comments);
             });
         };
 
@@ -279,23 +288,6 @@
         };
         // #endregion
 
-        // Flash Video hides Dom elements (comment dialog) in <= Win7
-        self.__hideFlashVideoOverlay = null;
-        self._hideFlashVideoOverlay = function () {
-            if (self.__hideFlashVideoOverlay === null) {
-                self.__hideFlashVideoOverlay = false;
-
-                // Test for: <= Windows 7
-                try {
-                    var match = /(windows nt) ([\w.]+)/.exec(navigator.userAgent.toLowerCase());
-                    if (!!match && parseFloat(match[2]) <= 6.2) 
-                        self.__hideFlashVideoOverlay = true;
-                } catch (e) { }
-            }
-
-            return self.__hideFlashVideoOverlay;
-        }
-
         return self;
     };
 
@@ -304,4 +296,4 @@
     }
     document.Disco.AttachmentUploader = attachmentUploader;
 
-}(this, document, $, Webcam));
+}(this, document, $));

Disco.Web/ClientSource/Style/BundleSite.css

@@ -5023,9 +5023,6 @@ div.Disco-AttachmentUpload-CommentDialog table td.thumbnail img {
 div.Disco-AttachmentUpload-ImageDialog {
   background-color: #000 !important;
   padding: 0 !important;
-  overflow: hidden !important;
-  width: 720px !important;
-  height: 540px !important;
 }
 body > .User_FlagAssignment_Tooltip span.name {
   display: block;

Disco.Web/ClientSource/Style/Site.css

@@ -1256,9 +1256,6 @@ div.Disco-AttachmentUpload-CommentDialog table td.thumbnail img {
 div.Disco-AttachmentUpload-ImageDialog {
   background-color: #000 !important;
   padding: 0 !important;
-  overflow: hidden !important;
-  width: 720px !important;
-  height: 540px !important;
 }
 body > .User_FlagAssignment_Tooltip span.name {
   display: block;

Disco.Web/ClientSource/Style/Site.less

@@ -1273,9 +1273,6 @@ div.Disco-AttachmentUpload-CommentDialog {
 div.Disco-AttachmentUpload-ImageDialog {
     background-color: @black !important;
     padding: 0 !important;
-    overflow: hidden !important;
-    width: 720px !important;
-    height: 540px !important;
 }
 
 body > .User_FlagAssignment_Tooltip {

Disco.Web/Disco.Web.csproj

@@ -1330,7 +1330,6 @@
     <None Include="ClientSource\Scripts\Modules\Disco-jQueryExtensions\disco.jQueryExtensions.js" />
     <None Include="ClientSource\Scripts\Modules\Disco-PropertyChangeHelpers\disco.propertychangehelpers.js" />
     <None Include="ClientSource\Scripts\Modules\jQuery-Isotope\jquery.isotope.js" />
-    <None Include="ClientSource\Scripts\Modules\Disco-AttachmentUploader\webcam.js" />
     <None Include="ClientSource\Scripts\Core.js" />
     <Content Include="ClientSource\Scripts\Core.js" Condition=" '$(Configuration)' == 'Debug' " />
     <Content Include="ClientSource\Scripts\Core\disco.dataTables.extensions.js" Condition=" '$(Configuration)' == 'Debug' " />
@@ -1354,7 +1353,6 @@
     <Content Include="ClientSource\Scripts\Modules\Disco-jQueryExtensions\disco.jQueryExtensions.js" Condition=" '$(Configuration)' == 'Debug' " />
     <Content Include="ClientSource\Scripts\Modules\Disco-PropertyChangeHelpers\disco.propertychangehelpers.js" Condition=" '$(Configuration)' == 'Debug' " />
     <Content Include="ClientSource\Scripts\Modules\jQuery-Isotope\jquery.isotope.js" Condition=" '$(Configuration)' == 'Debug' " />
-    <Content Include="ClientSource\Scripts\Modules\Disco-AttachmentUploader\webcam.js" Condition=" '$(Configuration)' == 'Debug' " />
     <Content Include="ClientSource\Scripts\Core.min.js">
       <DependentUpon>Core.js</DependentUpon>
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
@@ -1371,7 +1369,6 @@
       <DependentUpon>Disco-AttachmentUploader.js</DependentUpon>
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
-    <Content Include="ClientSource\Scripts\Modules\Disco-AttachmentUploader\webcam.swf" />
     <None Include="ClientSource\Scripts\Modules\Disco-CreateJob.js" />
     <Content Include="ClientSource\Scripts\Modules\Disco-CreateJob.js" Condition=" '$(Configuration)' == 'Debug' " />
     <Content Include="ClientSource\Scripts\Modules\Disco-CreateJob.min.js">

Disco.Web/bundleconfig.json

@@ -26,7 +26,6 @@
   {
     "outputFileName": "ClientSource/Scripts/Modules/Disco-AttachmentUploader.js",
     "inputFiles": [
-      "ClientSource/Scripts/Modules/Disco-AttachmentUploader/webcam.js",
       "ClientSource/Scripts/Modules/Disco-AttachmentUploader/disco-attachmentuploader.js"
     ]
   },