Merge pull request #293 from edx/mroytman/MST-361-stop-camera-after-submit

stop camera once user successfully submits photos to IDVerification s…

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();

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.

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);
       }
     }

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())
   });
 });