Merge pull request #830 from onfido/spike/live-doc-capture-in-jpeg-fo…

…rmat

Live doc image capture in JPEG format

src/components/Photo/DocumentLiveCapture.js

@@ -62,7 +62,7 @@ export default class DocumentLiveCapture extends Component<Props, State> {
   captureDocumentPhoto = () => {
     this.setState({ isLoading: true })
     sendEvent('Taking live photo of document')
-    screenshot(this.webcam, this.captureDocument)
+    screenshot(this.webcam, this.captureDocument, 'image/jpeg')
   }
 
   componentWillUnmount() {

src/components/utils/blob.js

@@ -41,13 +41,13 @@ const base64toBlob = (image) => {
   return new Blob([base64Data.integerArray], {type: base64Data.mimeString})
 }
 
-export const canvasToBlob = (canvas, callback) => {
+export const canvasToBlob = (canvas, callback, mimeType = 'image/png') => {
   if (!HTMLCanvasElement.prototype.toBlob) {
     // Handle browsers that do not support canvas.toBlob() like Edge
     const dataUrlImg = canvas.toDataURL()
     return callback(base64toBlob(dataUrlImg))
   }
-  return canvas.toBlob(callback, "image/png")
+  return canvas.toBlob(callback, mimeType)
 }
 
 const toDataUrl = type => (canvas, callback) => callback(canvas.toDataURL(type))

src/components/utils/camera.js

@@ -1,13 +1,13 @@
 import { canvasToBlob } from './blob'
 
-export const screenshot = (webcam, callback) => {
+export const screenshot = (webcam, callback, mimeType) => {
   const canvas = webcam && webcam.getCanvas()
   if (!canvas) {
     console.error('webcam canvas is null')
     return
   }
   const sdkMetadata = getDeviceInfo(webcam.stream)
-  canvasToBlob(canvas, blob => callback(blob, sdkMetadata))
+  canvasToBlob(canvas, blob => callback(blob, sdkMetadata), mimeType)
 }
 
 export const getRecordedVideo = (webcam, callback) => {