How to use thumbnails

Dynamsoft Camera SDK has two built-in containers: one video container and one image container. To show thumbnails, add another image viewer for displaying big images on the same page.

In the ThumbnailNavigation.html

<html>
<head>
<title>Thumbnail Navigation</title>
	</head>
<body>
	<div id="image-container" style="width: 150px; height: 525px; border: solid 1px #ddd; display: inline-block"></div>
    <div style="width: 700px; height: 525px; border: solid 1px #ddd; display: inline-block; position: relative;">
	        <div id="video-container" style="width:100%;height:100%;"></div>
	        <div id="big-image-container" style="width:100%;height:100%;display:none;"></div>
	        <div id="black-bar" style="width: 100%; padding: 10px 0; text-align: center; background-color: #555; position: absolute; bottom: 0px; display: none;">
		         <button onclick="okClick()">ok</button>
			 <button onclick="cancelClick()" style="margin-left: 100px;">cancel</button>
		      </div>
  	 </div>
    <button id="btn-grab" style="margin-left: 400px; display: block;" onclick="onBtnGrabClick()">Grab a Snapshot</button><br />
	<button id="btn-showVideo" style="margin-left: 400px; display: none;" style="display:none;" onclick="onBtnShowVideoClick()">Show Video</button>

    <script type="text/javascript" src="DCSResources/dynamsoft.camera.config.js"> </script>
	<script type="text/javascript" src="DCSResources/dynamsoft.camera.initiate.js"> </script>
    <script src="Scripts/script.js"></script>
</body>
</html>

In the script.js

	function onBtnGrabClick(){
    document.getElementById("black-bar").style.display="block";
    document.getElementById("btn-grab").style.display="none";
// pause the video
    dcsObject.camera.pauseVideo();
}

function onBtnShowVideoClick(){
// play the video
    dcsObject.camera.playVideo();
    document.getElementById("big-image-container").style.display="none";
    document.getElementById("video-container").style.display="block";
    document.getElementById("btn-showVideo").style.display="none";
    document.getElementById("btn-grab").style.display="block";
}

function okClick(){
    document.getElementById("black-bar").style.display="none";
    document.getElementById("btn-grab").style.display="block";
// grab an image
    if (!dcsObject) return;

    dcsObject.camera.captureImage('image-container');

// play the video
    dcsObject.camera.playVideo();
}

function cancelClick(){
    document.getElementById("black-bar").style.display="none";
    document.getElementById("btn-grab").style.display="block";
// play the video
    dcsObject.camera.playVideo();
}

var dcsObject, imageViewer;

function onInitSuccess(videoViewerId, imageViewerId) {
    dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId);
    imageViewer = dcsObject.getImageViewer(imageViewerId); 
    imageViewer.ui.setImageViewMode(1, 4);
    imageViewer.ui.setMouseShape(true); // set as hand
    bigImageViewer = dcsObject.addImageViewer("big-image-container");   
    bigImageViewer.image.setCapacity(1);

    var cameraList = dcsObject.camera.getCameraList();
    if (cameraList.length > 0) {
        dcsObject.camera.takeCameraOwnership(cameraList[0]);
        dcsObject.camera.playVideo();
    } else {
        alert('No camera is connected.');
    }

    imageViewer.ui.onmouseclick = function(index){
        bigImageViewer.image.remove([0]);
        imageViewer.image.copyToImageViewer(index, bigImageViewer);
    // pause the video
        dcsObject.camera.pauseVideo();
        document.getElementById("video-container").style.display="none";
        document.getElementById("big-image-container").style.display="block";
        document.getElementById("btn-grab").style.display="none";
        document.getElementById("btn-showVideo").style.display="block";
    };

}

function onInitFailure(errorCode, errorString) {
    alert('Init failed: ' + errorString);
};

dynamsoft.dcsEnv.init('video-container', 'image-container', onInitSuccess, onInitFailure);

window.onbeforeunload = function() {
    if (dcsObject) dcsObject.destroy();
};

Below is what it looks like:

thumbnails

NOTE: the control on the left has a view mode of 1*4 and the one on the right has a view mode of 1*1 and it is set to hold only 1 image at a time.

 imageViewer.ui.setImageViewMode(1, 4);    // Set view mode to 1*4
 bigImageViewer = dcsObject.addImageViewer("big-image-container");   //Add an image viewer for the big container
 bigImageViewer.image.setCapacity(1);    // Set it to hold one image only

When you click “Grab a Snapshot” button, you can choose to accept or discard it. If accepted, the image will be shown in the thumbnail viewer. If discarded, you can continue to grab a new image.

 dcsObject.camera.captureImage('image-container'); // Capture an image to the thumbnail viewer

Whether the image is accepted or discarded, the video container will continue to play the video stream.

dcsObject.camera.playVideo(); // Continue to play the video stream

With the above implementation, you only need one image viewer on the left, (the thumbnails view). The big image viewer shows only the current image. When the current image changes, you need to update the big image viewer. For example, when you click on one of the images in the thumbnails, you need to copy it to the big image viewer:

imageViewer.ui.onmouseclick = function(index){
    bigImageViewer.image.remove([0]);
    imageViewer.image.copyToImageViewer(index, bigImageViewer);
    // pause the video
    dcsObject.camera.pauseVideo();
    document.getElementById("video-container").style.display="none"; // hide the video container
    document.getElementById("big-image-container").style.display="block";
    document.getElementById("btn-grab").style.display="none";
    document.getElementById("btn-showVideo").style.display="inline"; // enable “Show Video” button
};