dwt
Version:
Dynamic Web TWAIN is a TWAIN/ICA/SANE-based scanning SDK software specifically designed for web applications running on Windows/macOS/Linux. With just a few lines of code, you can develop robust applications to scan documents from TWAIN/ICA/SANE-compatibl
202 lines (192 loc) • 7.45 kB
HTML
<html>
<head>
<title>Acquire Images</title>
<script src="../dist/dynamsoft.webtwain.min.js"></script>
</head>
<body style="padding: 30px;">
<div id="notMobile">
<h1>Acquire Images</h1>
<div id="divNoteDeploy" style="margin: 10px 0 10px;" >Make sure you deploy the sample to an webserver that
<ul>
<li style="margin: 5px 0 5px 20px; font-size: 12px;">Runs HTTPS</li>
<li style="margin-left: 20px;font-size: 12px;">Serves the *.wasm file with Content-Type: application/wasm.</li>
</ul>
</div>
<label style="font-size: x-large;" id="H5CameraLabel"><input type="checkbox" id="H5Camera" />Use H5
Camera</label>
<select style="font-size: x-large;" id="source"></select><br />
<input type="button" id="btn-switch" style="font-size: x-large;" value="Hide Video" onclick="SwitchViews();" />
<input type="button" id="btn-grab" style="font-size: x-large;" value="Acquire" onclick="CaptureImage();" />
<br />
<br />
<div id="dwtcontrolContainer"></div>
</div>
<script type="text/javascript">
Dynamsoft.DWT.ResourcesPath = "../dist";
Dynamsoft.DWT.UseCameraAddonWasm = true;
Dynamsoft.DWT.ProductKey = 't0078lQAAAA6/IlIbNC7kmlEwnoekMXbQCjKCIbXQPNX5YcTlkQ1q4R4g+O1GT800Pmu8OKFOEv81ye/RJPXBdG9de9pkHxXgXq2nohPqqh9G';
Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);
Dynamsoft.DWT.Containers = [{ ContainerId: 'dwtcontrolContainer', Width: 600, Height: 800 }];
var bWASMCamera = true, bWASM = false;
window.onload = function () {
if (Dynamsoft.Lib.env.bMobile || Dynamsoft.DWT.UseLocalService === false) {
Dynamsoft.DWT.UseLocalService = false;
document.getElementById("H5CameraLabel").style.display = "none";
bWASM = true;
}
document.getElementById("H5Camera").onchange = function () {
sourceChanged(true);
bWASMCamera = document.getElementById("H5Camera").checked;
updateSources();
};
document.getElementById('source').onchange = function () {
sourceChanged();
}
if (Dynamsoft && Dynamsoft.Lib.env.bWin && Dynamsoft.DWT.UseLocalService && !document.getElementById("H5Camera").checked) {
bWASMCamera = false;
}
Dynamsoft.DWT.Load();
};
var DWObject;
var webCamStartingIndex;
var isVideoOn = true;
var devices = [];
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer');
updateSources();
}
function sourceChanged(closeCamera) {
if (closeCamera || document.getElementById('source').selectedIndex < webCamStartingIndex) {
if (bWASMCamera)
DWObject.Addon.Camera.stop();
else
DWObject.Addon.Webcam.StopVideo();
isVideoOn = false;
document.getElementById("btn-grab").style.backgroundColor = "";
document.getElementById('btn-grab').value = 'Acquire From a Scanner';
document.getElementById("btn-switch").style.display = 'none';
} else {
if (bWASMCamera)
DWObject.Addon.Camera.selectSource(devices[document
.getElementById("source").selectedIndex].deviceId);
else
DWObject.Addon.Webcam.SelectSource(devices[document
.getElementById("source").selectedIndex].label);
SetIfWebcamPlayVideo(true);
document.getElementById('btn-grab').value = 'Acquire From a Camera';
document.getElementById("btn-switch").style.display = '';
}
document.getElementById("btn-grab").disabled = "";
}
function showSources() {
var sourceElement = document.getElementById("source");
var i, L = sourceElement.options.length - 1;
for (i = L; i >= 0; i--) {
sourceElement.remove(i);
}
for (var i = 0; i < devices.length; i++)
sourceElement.options.add(new Option(devices[i].label), i);
sourceChanged();
}
function updateSources() {
devices = [];
if (DWObject) {
if (bWASM) {
webCamStartingIndex = 0;
DWObject.Addon.Camera.getSourceList().then(function (list) {
devices = list;
showSources();
});
} else {
var i = 0, scanners = DWObject.GetSourceNames();
for (i = 0; i < scanners.length; i++) {
devices.push({
deviceId: i,
label: scanners[i]
});
}
webCamStartingIndex = i;
if (bWASMCamera) {
DWObject.Addon.Camera.getSourceList().then(function (list) {
devices = devices.concat(list);
showSources();
});
} else {
var cameras = DWObject.Addon.Webcam.GetSourceList();
for (i = 0; i < cameras.length; i++) {
devices.push({
deviceId: webCamStartingIndex + i,
label: cameras[i]
});
}
showSources();
}
}
}
}
function SetIfWebcamPlayVideo(bShow) {
if (bShow) {
if (!bWASMCamera)
DWObject.Addon.Webcam.StopVideo();
setTimeout(function () {
if (bWASMCamera)
DWObject.Addon.Camera.play();
else
DWObject.Addon.Webcam.PlayVideo(DWObject, 80, function () { });
isVideoOn = true;
document.getElementById("btn-grab").style.backgroundColor = "";
document.getElementById("btn-grab").disabled = "";
document.getElementById("btn-switch").value = "Hide Video";
}, 30);
} else {
if (bWASMCamera)
DWObject.Addon.Camera.stop();
else
DWObject.Addon.Webcam.StopVideo();
isVideoOn = false;
document.getElementById("btn-grab").style.backgroundColor = "#aaa";
document.getElementById("btn-grab").disabled = "disabled";
document.getElementById("btn-switch").value = "Show Video";
}
}
function SwitchViews() {
if (isVideoOn == false) {
// continue the video
SetIfWebcamPlayVideo(true);
} else {
// stop the video
SetIfWebcamPlayVideo(false);
}
}
function CaptureImage() {
if (DWObject) {
if (document.getElementById('source').selectedIndex < webCamStartingIndex) {
DWObject.IfShowUI = true;
DWObject.IfDisableSourceAfterAcquire = true;
DWObject.SelectSourceByIndex(document.getElementById('source').selectedIndex);
DWObject.CloseSource();
DWObject.OpenSource();
DWObject.AcquireImage();
} else {
var funCaptureImage = function () {
setTimeout(function () {
SetIfWebcamPlayVideo(false);
}, 50);
};
if (bWASMCamera){
var p = document.location.protocol;
if (p == 'https:' || p == 'http:')
DWObject.Addon.Camera.capture().then(function (blob) { DWObject.Viewer.render(); funCaptureImage(); });
else {
alert("HTTPS is required for accessing cameras.");
}
}
else
DWObject.Addon.Webcam.CaptureImage(funCaptureImage, funCaptureImage);
}
}
}
</script>
</body>
</html>