From 853051375602b569856146ecd38abce29f0418ed Mon Sep 17 00:00:00 2001
From: Waheed Ahmed <waheed.ahmed@arbisoft.com>
Date: Fri, 26 Jul 2019 14:31:11 +0500
Subject: [PATCH] Fix image cropping for photo ID verify.

In chrome on latest MacOS image was cropping, fixed by setting
video width and height to canvas.

PROD-499
---
 .../verify_student/views/webcam_photo_view.js | 25 ++++++-------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/lms/static/js/verify_student/views/webcam_photo_view.js b/lms/static/js/verify_student/views/webcam_photo_view.js
index acbf40b7e7..42560a2074 100644
--- a/lms/static/js/verify_student/views/webcam_photo_view.js
+++ b/lms/static/js/verify_student/views/webcam_photo_view.js
@@ -50,11 +50,14 @@
                  },
 
                  snapshot: function() {
-                     var video;
+                     var video, canvas;
 
                      if (this.stream) {
                          video = this.getVideo();
-                         this.getCanvas().getContext('2d').drawImage(video, 0, 0);
+                         canvas = this.getCanvas();
+                         canvas.width = video.videoWidth;
+                         canvas.height = video.videoHeight;
+                         canvas.getContext('2d').drawImage(video, 0, 0);
                          video.pause();
                          return true;
                      }
@@ -151,20 +154,6 @@
                      return this.imageData;
                  },
 
-                 flashObjectTag: function() {
-                     return (
-                        '<object type="application/x-shockwave-flash" ' +
-                            'id="flash_video" ' +
-                            'name="flash_video" ' +
-                            'data="/static/js/verify_student/CameraCapture.swf" ' +
-                            'width="500" ' +
-                            'height="375">' +
-                         '<param name="quality" value="high">' +
-                         '<param name="allowscriptaccess" value="sameDomain">' +
-                         '</object>'
-                     );
-                 },
-
                  getFlashObject: function() {
                      return $('#flash_video')[0];
                  },
@@ -242,10 +231,10 @@
              this.setSubmitButtonEnabled(false);
 
             // Load the template for the webcam into the DOM
-             renderedHtml = _.template($(this.template).html())(
+             renderedHtml = edx.HtmlUtils.template($(this.template).html())(
                 {backendName: this.backend.name}
             );
-             $(this.el).html(renderedHtml);
+             edx.HtmlUtils.setHtml($(this.el), renderedHtml);
 
              $resetBtn = this.$el.find('#webcam_reset_button');
              $captureBtn = this.$el.find('#webcam_capture_button');