How to combine video and image containers

Let’s say you want to always show one viewer. By default, it can be a video viewer to play the video stream. After you grab an image, it can switch to show the image you grabbed. Then you can switch it back and show the video stream again.

In the CombinedImageandVideoViewer.html

<html>
<head>
<title>Combined Image and Video Viewer</title>
</head>
<body>
	<div class='content-container'>
		<div class='tc'>
			<div id='video-container' style='width: 800px; height:600px; border: solid 1px #ddd;'></div>
			<div id='image-container' style='width: 800px; height:600px; border: solid 1px #ddd;'></div>
			<button id='btn-grab'>Grab</button>
			<button id='btn-switch'>Switch to Image Viewer</button>
		</div>
	</div>
   <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

document.getElementById('btn-grab').onclick = function(){
    if (document.getElementById('btn-grab').getAttribute('disabled') == 'disabled') return;
    if (!dcsObject) return;

    // pause the video
    dcsObject.camera.pauseVideo();

    document.getElementById('video-container').style.display='none';
    document.getElementById('image-container').style.display='block';

    // grab an image
    dcsObject.camera.captureImage('image-container');

    document.getElementById('btn-grab').setAttribute('disabled','disabled');
    document.getElementById('btn-switch').innerHTML = 'Switch to Video Viewer';
};

document.getElementById('btn-switch').onclick = function(){
	if (document.getElementById('image-container').style.display == 'none'){
		// pause the video
	  dcsObject.camera.pauseVideo();
		document.getElementById('video-container').style.display='none';
		document.getElementById('image-container').style.display='block';
		document.getElementById('btn-grab').setAttribute('disabled','disabled');
		document.getElementById('btn-switch').innerHTML = 'Switch to Video Viewer';
	} else {
		// play the video
	  dcsObject.camera.playVideo();
		document.getElementById('image-container').style.display='none';
		document.getElementById('video-container').style.display='block';
		document.getElementById('btn-grab').removeAttribute('disabled')
		document.getElementById('btn-switch').innerHTML = 'Switch to Image Viewer';
	}
};

document.getElementById('image-container').style.display='none';

var dcsObject, imageViewer;

function onInitSuccess(videoViewerId, imageViewerId) {
    dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId);
    imageViewer = dcsObject.getImageViewer(imageViewerId);    

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

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:

combinedintooneviewer

When you click “Grab” button, the video container will be hidden and the image viewer will be shown to display the grabbed image. After grabbing an image, button “Grab” is disabled and button “Switch to Image Viewer” is changed to “Switch to Video Viewer”.

dcsObject.camera.pauseVideo();  //pause the video
document.getElementById('video-container').style.display='none'; // hide the video container
document.getElementById('image-container').style.display='block'; // show the image container
dcsObject.camera.captureImage('image-container'); // capture an image to the image viewer
document.getElementById('btn-grab').setAttribute('disabled','disabled'); // disable “Grab” button
document.getElementById('btn-switch').innerHTML = 'Switch to Video Viewer'; // change text “Switch to Image Viewer” to “Switch to Video Viewer”

When you click “Switch to Video Viewer”, the video container will be shown to play the video stream. At the same time, button “Grab” is enabled and the button “Switch to Video Viewer” is changed back to “Switch to Image Viewer”.

document.getElementById('btn-switch').onclick = function(){
	if(document.getElementById('image-container').style.display == 'none'){
	    //pause the video
	    dcsObject.camera.pauseVideo();
	    document.getElementById('video-container').style.display='none';
	    document.getElementById('image-container').style.display='block';
             document.getElementById('btn-grab').setAttribute('disabled','disabled');
	    document.getElementById('btn-switch').innerHTML = 'Switch to Video Viewer';
	} else {
	    //play the video
	    dcsObject.camera.playVideo();
	    document.getElementById('image-container').style.display='none';
	    document.getElementById('video-container').style.display='block';
	    document.getElementById('btn-grab').removeAttribute('disabled')
	    document.getElementById('btn-switch').innerHTML = 'Switch to Image Viewer';
	}
};