mirror of
https://github.com/serratus/quaggaJS.git
synced 2026-08-13 05:31:37 +08:00
Added sandbox; Added example overview-page
This commit is contained in:
Christoph Oberhofer
@@ -1,5 +1,5 @@
|
||||
---
|
||||
layout: v1.0.0-beta.1/examples
|
||||
layout: examples.v1.0.0-beta.1
|
||||
title: Demo with live-stream
|
||||
showInMenu: false
|
||||
---
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
layout: v1.0.0-beta.1/examples
|
||||
layout: examples.v1.0.0-beta.1
|
||||
title: Demo with file-input
|
||||
showInMenu: false
|
||||
---
|
||||
|
||||
@@ -9,20 +9,64 @@ Examples
|
||||
|
||||
The following examples showcase some of the features offered by QuaggaJS.
|
||||
|
||||
## Using static image files
|
||||
## Sandbox for mobile (Android only) <i class="icon-video-camera"/>
|
||||
|
||||
[This example](static_images.html) shows the capabilities of QuaggaJS using images taken under various conditions.
|
||||
A minimal mobile-app like [example](sandbox/) with lot's of configuration
|
||||
options.
|
||||
|
||||
[   ](static_images.html)
|
||||
<a href="sandbox/" class="columns large-thirds small-half">
|
||||
<img src="{{ site.baseurl }}/assets/sandbox-01.png" />
|
||||
<img src="{{ site.baseurl }}/assets/sandbox-02.png" />
|
||||
<img src="{{ site.baseurl }}/assets/sandbox-03.png" />
|
||||
</a>
|
||||
|
||||
## Using the live-stream from your webcam
|
||||
## Scanning multiple types of codes simultaneously <i class="icon-video-camera"/>
|
||||
|
||||
<a href="multiple/">Video-based Example</a> showcasing the use of multiple
|
||||
readers
|
||||
|
||||
<a href="multiple/">
|
||||
<img src="{{ site.baseurl }}/assets/scan-multiple-01.png" />
|
||||
</a>
|
||||
|
||||
## Scanning to input-field <i class="icon-video-camera"/>
|
||||
|
||||
<a href="scan-to-input/">Video-based Example</a> showcasing an input-field for
|
||||
barcodes
|
||||
|
||||
<a href="scan-to-input/">
|
||||
<img src="{{ site.baseurl }}/assets/scan-to-input-01.png" />
|
||||
</a>
|
||||
|
||||
## File-based barcode-input <i class="icon-camera"/> <i class="icon-image"/>
|
||||
|
||||
<a href="file-input/">File-based Example</a> showcasing an input field for
|
||||
barcodes
|
||||
|
||||
<a href="file-input/">
|
||||
<img src="{{ site.baseurl }}/assets/scan-to-input-01.png" />
|
||||
</a>
|
||||
|
||||
## Using static image files <i class="icon-image"/>
|
||||
|
||||
[This example](static_images.html) shows the capabilities of QuaggaJS using
|
||||
images taken under various conditions.
|
||||
|
||||
<a href="static_images" class="columns large-quater small-half">
|
||||
<img src="{{ site.baseurl }}/assets/example_static_01.jpg" />
|
||||
<img src="{{ site.baseurl }}/assets/example_static_02.jpg" />
|
||||
<img src="{{ site.baseurl }}/assets/example_static_03.jpg" />
|
||||
<img src="{{ site.baseurl }}/assets/example_static_04.jpg" />
|
||||
</a>
|
||||
|
||||
## Using the live-stream from your webcam <i class="icon-video-camera"/>
|
||||
|
||||
This is the preferred mode of using QuaggaJS. [This example](live_w_locator.html) demonstrates the real-time decoding capabilities of QuaggaJS by using your
|
||||
webcam as a barcode-scanner.
|
||||
|
||||
[](live_w_locator.html)
|
||||
|
||||
## Using the File API
|
||||
## Using the File API <i class="icon-camera"/> <i class="icon-image"/>
|
||||
|
||||
Instead of directly accessing the user's webcam, [this example](file_input.html) shows you how to use QuaggaJS with the HTML5 File API to decode a pre-taken image.
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
layout: v1.0.0-beta.1/examples
|
||||
layout: examples.v1.0.0-beta.1
|
||||
title: Demo with live-stream
|
||||
showInMenu: false
|
||||
---
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
layout: v1.0.0-beta.1/examples
|
||||
layout: examples.v1.0.0-beta.1
|
||||
title: Demo with live-stream
|
||||
showInMenu: false
|
||||
---
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
|
||||
<title>Quagga Sandbox</title>
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="Christoph Oberhofer" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="static/style.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="margin: 0">
|
||||
<div id="react"></div>
|
||||
<script src="static/bundle.min.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,20 @@
|
||||
html {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.overlay__content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.overlay__content video, .overlay__content canvas {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.overlay__content canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
layout: v1.0.0-beta.1/examples
|
||||
layout: examples.v1.0.0-beta.1
|
||||
title: Demo with live-stream
|
||||
showInMenu: false
|
||||
---
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
layout: v1.0.0-beta.1/examples
|
||||
layout: examples.v1.0.0-beta.1
|
||||
title: Demo with sample images
|
||||
showInMenu: false
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user