Javascript Component to Scan Document from Browser Camera and Upload as PDF

Introduction

In this whitepaper, we are going to create a pure JavaScript component to scan documents/pictures from browser camera. This component will take pictures one by one and compile it into a PDF within the browser and will upload it to file server using Ajax. 

Sounds great? Oh yeah. no need to capture and download pictures, no need to create PDF from pictures, everything will be inside the browser and it will give a very good user experience.

So without much ado, Lets begin.

Prerequisites

Add below scripts in your web page.

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js">
</script>

Setup Browser Camera 

Add a video tag in your html where you want to display video.

<video autoplay playsinline></video>
<canvas></canvas>
<button id="showVideo">Show Video</button>

Add below script to initialize video.

function handleSuccess(stream) {
 const videoTracks = stream.getVideoTracks();
 console.log('Got stream with constraints:', constraints);
 console.log('Using video device: ${videoTracks[0].label}');
 window.stream = stream; // make variable available to browser console
 video.srcObject = stream;
 
}

async function init(e) {
 try {
 const stream = await navigator.mediaDevices.getUserMedia(constraints);
 handleSuccess(stream);
 e.target.disabled = true;
 } catch (e) {
 alert(e);
 }
}

document.querySelector('#showVideo').addEventListener('click', e => init(e));

Take Pictures

Add a button in your web HTML

<button id="takePicture">Take snapshot</button>

Add below script in your Javascript code

const button = document.querySelector('#takePicture');
button.onclick = function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
 
};

Upload PDF

Above code will capture pictures from your live camera video and will display it on screen.

Now we are going to move one step ahead and instead of showing it on screen we will take multiple pictures and save it into one PDF within the browser and display it.

Replace Take Picture button's click function above with below script

const button = document.querySelector('#takePicture');
button.onclick = function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
 
  if(pdf == null)
  {
      pdf = new jsPDF("l", "pt", [video.videoWidth,video.videoHeight]);
  }
  var imgData = canvas.toDataURL("image/jpeg", 1.0);
  pdf.addImage(imgData, 'JPEG', 0, 0,video.videoWidth,video.videoHeight,'','NONE');
  var blob = pdf.output('blob')
  var newurl = window.URL.createObjectURL(blob);
  iframe.src = newurl;
  pdf.addPage();
};

Now, we have a PDF object in your browser where you have all pictures compiled in one file. you can use this file as base64 and upload it on file server.

Note: To show on browser do not use base64 directly as it will break your code, instead create an object URL.

Upload PDF

You can find PDF as base64 using below code

pdf.output('datauristring')

By using simple Ajax upload you can send pdf data using base64 parameter to your file upload server.

For example:

$.post( "YourFileUploadServerURL",{
         "dataObject" : pdf.output('datauristring')
     }).done(function(data) {
		alert("File has been uploaded successfully");
});

And  that's it.. Download working copy of code below...! 

👇 

Download Demo