Skip to content

Commit

Permalink
update to mobile-web-capture 2.0.0
Browse files Browse the repository at this point in the history
Ellie-dynamsoft committed Sep 3, 2024
1 parent b3005c2 commit 69c58e1
Showing 84 changed files with 4,192 additions and 0 deletions.
73 changes: 73 additions & 0 deletions samples/capture-single-page-and-then-crop/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
html,body {
width: 100%;
height: 100%;
margin:0;
padding:0;
overscroll-behavior-y: none;
overflow: hidden;
}

#container {
width: 100%;
height: 100%;
}

#imageContainer {
width: 100%;
height: 100%;
display: flex;
box-sizing: border-box;
align-items: center;
flex-direction: column;
padding: 20px 0px;
justify-content: flex-start
}

#imageContainer img {
width: 90%;
height: 60%;
object-fit: contain;
border:none;
}

#restore {
display: flex;
width: 80px;
height: 40px;
align-items: center;
background: #fe8e14;
justify-content: center;
color: white;
cursor: pointer;
user-select: none;
}

.mwc-loading-bar {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.mwc-loading-bar span {
margin-top: 10px;
color: #535251;
}

.loader {
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
border: 8px solid #d9d9d9;
border-right-color: #535251;
animation: l2 1s infinite linear;
}

@keyframes l2 {to{transform: rotate(1turn)}}
160 changes: 160 additions & 0 deletions samples/capture-single-page-and-then-crop/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Mobile Web Capture - Capture Single Page and Then Crop</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.css">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="container"></div>
<div id="imageContainer">
<div id="restore">Restore</div>
<span>Normalized Image:</span>
<img id="normalized">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/license.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-normalizer@2.2.10/dist/ddn.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/cvr.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.js"></script>
<script>
if(location.protocol === "file:") {
const message = `Please open the page via https:// or host it on "http://localhost/".`;
console.warn(message);
alert(message);
};
</script>
<script type="module">
import {
isMobile,
initDocDetectModule,
startLoading,
updateLoadingText,
stopLoading
} from "./utils.js";
import { mobilePerspectiveUiConfig, pcPerspectiveUiConfig } from "./uiConfig.js";
// Writing style of 'Top-level await' to be compatible with older versions of browsers
(async () => {
startLoading("Waiting for authorization...");
// Preload DDV Resource
Dynamsoft.DDV.Core.loadWasm();

/** LICENSE ALERT - README
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
*/

// Initialize DDN license
await Dynamsoft.License.LicenseManager.initLicense(
"DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAwLXIxNzAzODM5ODkwIiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vbWx0cy5keW5hbXNvZnQuY29tLyIsIm9yZ2FuaXphdGlvbklEIjoiMjAwMDAwIiwic3RhbmRieVNlcnZlclVSTCI6Imh0dHBzOi8vc2x0cy5keW5hbXNvZnQuY29tLyIsImNoZWNrQ29kZSI6MTgyNTQ5Njk4NH0=",
true
);

/**
* You can visit https://www.dynamsoft.com/customer/license/trialLicense/?product=mwc to get your own trial license good for 30 days.
* Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
* For more information, see https://www.dynamsoft.com/mobile-web-capture/docs/gettingstarted/license.html or contact support@dynamsoft.com.
* LICENSE ALERT - THE END
*/

updateLoadingText("Loading DDV library...");
// Preload DDN Resource
Dynamsoft.Core.CoreModule.loadWasm(["DDN"]);

// Initialize DDV
await Dynamsoft.DDV.Core.init();

updateLoadingText("Loading DDN library...");
// Configure document boundaries function
await initDocDetectModule(Dynamsoft.DDV, Dynamsoft.CVR);
stopLoading();

//Create a capture viewer
const captureViewer = new Dynamsoft.DDV.CaptureViewer({
container: "container",
viewerConfig: {
acceptedPolygonConfidence: 60,
enableAutoDetect: true,
}
});

// Play video stream in 1080P
captureViewer.play({
resolution: [1920,1080],
}).catch(err => {
alert(err.message)
});

// Register captured event
captureViewer.on("captured", () => {
switchViewer(false, true);
});

// Create a perspective viewer
const perspectiveViewer = new Dynamsoft.DDV.PerspectiveViewer({
container: "container",
groupUid: captureViewer.groupUid,
uiConfig: isMobile()? mobilePerspectiveUiConfig : pcPerspectiveUiConfig,
viewerConfig:{
scrollToLatest: true,
}
});
perspectiveViewer.hide();

// Register the event for "PerspectiveAll" button to display the result image
perspectiveViewer.on("done", async () => {
switchViewer(false, false);
document.getElementById("container").style.display = "none";

const pageUid = perspectiveViewer.getCurrentPageUid();
const pageData = await captureViewer.currentDocument.getPageData(pageUid);
// Normalized image
document.getElementById("normalized").src = URL.createObjectURL(pageData.display.data);
});

// Register the event for "Back" button
perspectiveViewer.on("backToCaptureViewer", () => {
switchViewer(true, false);
perspectiveViewer.currentDocument.deleteAllPages();
});

// Register the event for "DeleteCurrent" & "DeletedAll" buttons
perspectiveViewer.on("noImageBack", () => {
// Determine if there are no images in the viewer
const count = perspectiveViewer.currentDocument.pages.length;

if(count === 0) {
switchViewer(true,false);
}
});

// Define a function to control the viewers' visibility.
function switchViewer(capture, perspective){
if(capture) {
captureViewer.show();
captureViewer.play().catch(err => {alert(err)});
} else {
captureViewer.hide();
captureViewer.stop();
}

if(perspective) {
perspectiveViewer.show();
} else {
perspectiveViewer.hide();
}
};

// Restore Button function
document.getElementById("restore").onclick = () => {
perspectiveViewer.currentDocument.deleteAllPages();

document.getElementById("container").style.display = "";
switchViewer(true, false);
};
})();
</script>
</html>
117 changes: 117 additions & 0 deletions samples/capture-single-page-and-then-crop/uiConfig.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
//Mobile PerspectiveViewer
export const mobilePerspectiveUiConfig = {
type: Dynamsoft.DDV.Elements.Layout,
flexDirection: "column",
children: [
{
type: Dynamsoft.DDV.Elements.Layout,
className: "ddv-perspective-viewer-header-mobile",
children: [
{
// Add a "Back" button in perspective viewer's header and bind the event.
// The event will be registered later.
type: Dynamsoft.DDV.Elements.Button,
className: "ddv-button-back",
events:{
click: "backToCaptureViewer"
}
},
Dynamsoft.DDV.Elements.Pagination,
{
// Bind event for "PerspectiveAll" button
// The event will be registered later.
type: Dynamsoft.DDV.Elements.PerspectiveAll,
events:{
click: "done"
}
},
],
},
Dynamsoft.DDV.Elements.MainView,
{
type: Dynamsoft.DDV.Elements.Layout,
className: "ddv-perspective-viewer-footer-mobile",
children: [
Dynamsoft.DDV.Elements.FullQuad,
Dynamsoft.DDV.Elements.RotateLeft,
Dynamsoft.DDV.Elements.RotateRight,
{
// Bind event for "DeleteCurrent" button
// The event will be registered later.
type: Dynamsoft.DDV.Elements.DeleteCurrent,
events: {
click: "noImageBack"
},
},
{
// Bind event for "DeleteAll" button
// The event will be registered later.
type:Dynamsoft.DDV.Elements.DeleteAll,
events: {
click: "noImageBack"
},
}
],
},
],
};

//Pc PerspectiveViewer
export const pcPerspectiveUiConfig = {
type: Dynamsoft.DDV.Elements.Layout,
flexDirection: "column",
children: [
{
type: Dynamsoft.DDV.Elements.Layout,
className: "ddv-perspective-viewer-header-desktop",
children: [
{
// Add a "Back" button in perspective viewer's header and bind the event.
// The event will be registered later.
type: Dynamsoft.DDV.Elements.Button,
className: "ddv-button-back",
style: {
position: "absolute",
left: "0px",
},
events:{
click: "backToCaptureViewer"
}
},
Dynamsoft.DDV.Elements.FullQuad,
Dynamsoft.DDV.Elements.RotateLeft,
Dynamsoft.DDV.Elements.RotateRight,
{
// Bind event for "DeleteCurrent" button
// The event will be registered later.
type: Dynamsoft.DDV.Elements.DeleteCurrent,
events: {
click: "noImageBack"
},
},
{
// Bind event for "DeleteAll" button
// The event will be registered later.
type:Dynamsoft.DDV.Elements.DeleteAll,
events: {
click: "noImageBack"
},
},
{
type: Dynamsoft.DDV.Elements.Pagination,
className: "ddv-perspective-viewer-pagination-desktop",
},
{
// Bind event for "PerspectiveAll" button
// The event will be registered later.
type: Dynamsoft.DDV.Elements.PerspectiveAll,
className: "ddv-perspective-viewer-perspective-desktop",
events:{
click: "done"
}
},
],
},
Dynamsoft.DDV.Elements.MainView,
],
};
Loading

0 comments on commit 69c58e1

Please sign in to comment.