From 1319bd63772afe4157be6ceea3c6f3628df1410b Mon Sep 17 00:00:00 2001
From: Michael Roytman <mroytman@edx.org>
Date: Thu, 13 Aug 2020 15:27:09 -0400
Subject: [PATCH] stop camera once user successfully submits photos to
 IDVerification service

---
 src/id-verification/Camera.jsx                         | 4 ++++
 src/id-verification/IdVerificationContext.jsx          | 7 +++++++
 src/id-verification/panels/SummaryPanel.jsx            | 2 ++
 src/id-verification/tests/panels/SummaryPanel.test.jsx | 6 ++++--
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/id-verification/Camera.jsx b/src/id-verification/Camera.jsx
index f10af46..015d2e5 100644
--- a/src/id-verification/Camera.jsx
+++ b/src/id-verification/Camera.jsx
@@ -22,6 +22,10 @@ class Camera extends React.Component {
     this.cameraPhoto.startCamera(FACING_MODES.USER, { width: 1280 });
   }
 
+  async componentWillUnmount() {
+    this.cameraPhoto.stopCamera();
+  }
+
   takePhoto() {
     if (this.state.dataUri) {
       return this.reset();
diff --git a/src/id-verification/IdVerificationContext.jsx b/src/id-verification/IdVerificationContext.jsx
index e1b5769..3375269 100644
--- a/src/id-verification/IdVerificationContext.jsx
+++ b/src/id-verification/IdVerificationContext.jsx
@@ -52,6 +52,13 @@ function IdVerificationContextProvider({ children }) {
         setMediaAccess(MEDIA_ACCESS.DENIED);
       }
     },
+    stopUserMedia: () => {
+      if (mediaStream) {
+        const tracks = mediaStream.getTracks();
+        tracks.forEach(track => track.stop());
+        setMediaStream(null);
+      }
+    }
   };
 
   // Call verification status endpoint to check whether we can verify.
diff --git a/src/id-verification/panels/SummaryPanel.jsx b/src/id-verification/panels/SummaryPanel.jsx
index 99dd110..141e5ef 100644
--- a/src/id-verification/panels/SummaryPanel.jsx
+++ b/src/id-verification/panels/SummaryPanel.jsx
@@ -21,6 +21,7 @@ function SummaryPanel(props) {
     idPhotoFile,
     nameOnAccount,
     idPhotoName,
+    stopUserMedia,
   } = useContext(IdVerificationContext);
   const nameToBeUsed = idPhotoName || nameOnAccount || '';
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -36,6 +37,7 @@ function SummaryPanel(props) {
       };
       const result = await submitIdVerification(verificationData);
       if (result.success) {
+        stopUserMedia();
         history.push(nextPanelSlug);
       }
     }
diff --git a/src/id-verification/tests/panels/SummaryPanel.test.jsx b/src/id-verification/tests/panels/SummaryPanel.test.jsx
index f541fb6..54aecdf 100644
--- a/src/id-verification/tests/panels/SummaryPanel.test.jsx
+++ b/src/id-verification/tests/panels/SummaryPanel.test.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
-import { render, cleanup, act, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import { render, cleanup, act, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@edx/frontend-platform/analytics';
+import '@testing-library/jest-dom/extend-expect';
 import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
 import { submitIdVerification } from '../../data/service';
 import { IdVerificationContext } from '../../IdVerificationContext';
@@ -31,6 +31,7 @@ describe('SummaryPanel', () => {
     idPhotoFile: 'test.jpg',
     nameOnAccount: '',
     idPhotoName: '',
+    stopUserMedia: jest.fn(),
   };
 
   beforeEach(async () => {
@@ -74,5 +75,6 @@ describe('SummaryPanel', () => {
     const button = await screen.findByTestId('submit-button');
     fireEvent.click(button);
     expect(submitIdVerification).toHaveBeenCalled();
+    await waitFor(() => expect(contextValue.stopUserMedia).toHaveBeenCalled())
   });
 });