yushulx/index.htm

## index.htm
<!DOCTYPE html>
<html>

<head>
    <title>Hello World</title>
    <link rel="stylesheet" href="bower_components/dijit/themes/claro/claro.css">
    <script>
        dojoConfig = {
            parseOnLoad: true
        }
    </script>
    <script src="bower_components/dojo/dojo.js"></script>
    <script type="text/javascript" src="https://www.dynamsoft.com/library/dcs/dynamsoft.camera.min.js">
    </script>
</head>

<body class="claro">
    <h1>Dojo for DCS</h1>
    <select size="1" id="source" width="220px" onchange="onSourceChanged()"></select>
    <button id="onCapture" type="button"></button>

    <div id="video-container"></div>
    <div id="image-container"></div>

    <script type="text/javascript">
        require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function (Button, dom) {
            var myButton = new Button({
                label: "Capture",
                onClick: function () {
                    if (!dcsObject) return;
                    dcsObject.camera.captureImage('image-container');
                    if (dcsObject.getErrorCode() !== EnumDCS_ErrorCode.OK) {
                        alert('Capture error: ' + dcsObject.getErrorString());
                    }
                }
            }, "onCapture").startup();
        });

        // DCS Initialization
        var dcsObject, imageViewer;
        var width = 480,
            height = 320;

        function onInitSuccess(videoViewerId, imageViewerId) {

            dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId);
            dcsObject.videoviewer.setWidth(width);
            dcsObject.videoviewer.setHeight(height);
            imageViewer = dcsObject.getImageViewer(imageViewerId);
            imageViewer.ui.setWidth(width);
            imageViewer.ui.setHeight(height);
            var cameraList = dcsObject.camera.getCameraList();
            for (var i = 0; i < cameraList.length; i++) {
                document.getElementById("source").options.add(new Option(cameraList[i], i));
            }

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

        function onSourceChanged() {
            if (!dcsObject) return;
            var source = document.getElementById("source");
            var camera = source.options[source.selectedIndex].text;
            dcsObject.camera.takeCameraOwnership(camera);
            dcsObject.camera.playVideo();
        }

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

        window.onbeforeunload = function () {
            if (dcsObject) dcsObject.destroy();
        };
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Hello World</title>
	<link rel="stylesheet" href="bower_components/dijit/themes/claro/claro.css">
	<script>
	dojoConfig = {
	parseOnLoad: true
	}
	</script>
	<script src="bower_components/dojo/dojo.js"></script>
	<script type="text/javascript" src="https://www.dynamsoft.com/library/dcs/dynamsoft.camera.min.js">
	</script>
	</head>

	<body class="claro">
	<h1>Dojo for DCS</h1>
	<select size="1" id="source" width="220px" onchange="onSourceChanged()"></select>
	<button id="onCapture" type="button"></button>

	<div id="video-container"></div>
	<div id="image-container"></div>

	<script type="text/javascript">
	require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function (Button, dom) {
	var myButton = new Button({
	label: "Capture",
	onClick: function () {
	if (!dcsObject) return;
	dcsObject.camera.captureImage('image-container');
	if (dcsObject.getErrorCode() !== EnumDCS_ErrorCode.OK) {
	alert('Capture error: ' + dcsObject.getErrorString());
	}
	}
	}, "onCapture").startup();
	});

	// DCS Initialization
	var dcsObject, imageViewer;
	var width = 480,
	height = 320;

	function onInitSuccess(videoViewerId, imageViewerId) {

	dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId);
	dcsObject.videoviewer.setWidth(width);
	dcsObject.videoviewer.setHeight(height);
	imageViewer = dcsObject.getImageViewer(imageViewerId);
	imageViewer.ui.setWidth(width);
	imageViewer.ui.setHeight(height);
	var cameraList = dcsObject.camera.getCameraList();
	for (var i = 0; i < cameraList.length; i++) {
	document.getElementById("source").options.add(new Option(cameraList[i], i));
	}

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

	function onSourceChanged() {
	if (!dcsObject) return;
	var source = document.getElementById("source");
	var camera = source.options[source.selectedIndex].text;
	dcsObject.camera.takeCameraOwnership(camera);
	dcsObject.camera.playVideo();
	}

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

	window.onbeforeunload = function () {
	if (dcsObject) dcsObject.destroy();
	};
	</script>
	</body>

	</html>