Add a Flask web example

Author: yushulx

examples/web/.gitignore

@@ -0,0 +1 @@
+*.pyc

examples/web/README.md

@@ -0,0 +1,31 @@
+# Python Flask Web Document Scanner
+This project demonstrates how to build a web-based document scanner using the **Dynamsoft Document Normalizer SDK** and **Flask**. The application leverages a connected camera to capture documents, processes them on the server-side, and presents the results in the web browser.
+
+## Installation
+To install the required dependencies, run:
+
+```bash
+pip install -r requirements.txt
+```
+
+## Prerequisites
+- Obtain a [30-day free trial license](https://www.dynamsoft.com/customer/license/trialLicense/?product=ddn) for the Dynamsoft Document Normalizer SDK.
+
+## How to Run 
+1. **Set the License Key**: Update the license key in `document.py`:
+
+    ```python
+    docscanner.initLicense("LICENSE-KEY")
+    ```
+
+2. **Connect a Camera**: Ensure your camera is properly connected to your computer.
+3. **Start the Application**: Run the Flask server and open the application in your web browser:
+
+    ```bash
+    python server.py
+    ```
+4. **Access the Application**: Visit `http://127.0.0.1:5000` in your web browser to use the document scanner.
+
+    ![Python Flask web document scanner](https://www.dynamsoft.com/codepool/img/2024/08/python-flask-web-document-scanner.png)
+
+

examples/web/camera.py

@@ -0,0 +1,44 @@
+import cv2
+from document import Scanner
+
+
+class VideoCamera(object):
+    def __init__(self):
+        # Open a camera
+        self.cap = cv2.VideoCapture(0)
+
+        # Initialize video recording environment
+        self.is_record = False
+        self.out = None
+        self.transformed_frame = None
+
+        self.scanner = Scanner()
+        self.cached_frame = None
+
+    def __del__(self):
+        self.cap.release()
+
+    def get_video_frame(self):
+        ret, frame = self.cap.read()
+        if ret:
+            frame, _ = self.scanner.detect_edge(frame)
+            self.cached_frame = frame
+            ret, jpeg = cv2.imencode('.jpg', frame)
+            return jpeg.tobytes()
+        else:
+            return None
+
+    def capture_frame(self):
+        ret, frame = self.cap.read()
+        if ret:
+            _, frame = self.scanner.detect_edge(frame, True)
+            ret, jpeg = cv2.imencode('.jpg', frame)
+            self.transformed_frame = jpeg.tobytes()
+        else:
+            return None
+
+    def get_cached_frame(self):
+        return self.cached_frame
+
+    def get_image_frame(self):
+        return self.transformed_frame

examples/web/desktop.py

@@ -0,0 +1,31 @@
+import numpy as np
+import cv2
+from document import Scanner
+
+cap = cv2.VideoCapture(0)
+scanner = Scanner()
+
+while (cap.isOpened()):
+
+    ret, frame = cap.read()
+    video_frame = None
+    image_frame = None
+
+    if cv2.waitKey(10) & 0xFF == ord('q'):
+        break
+
+    if ret:
+        if cv2.waitKey(10) & 0xFF == ord('p'):
+            video_frame, image_frame = scanner.detect_edge(frame, True)
+        else:
+            video_frame, _ = scanner.detect_edge(frame)
+
+        if video_frame is not None:
+            cv2.imshow("Edge Detection", video_frame)
+
+        if image_frame is not None:
+            cv2.imshow("Rectified Document", image_frame)
+
+# Release everything if job is finished
+cap.release()
+cv2.destroyAllWindows()

examples/web/document.py

@@ -0,0 +1,40 @@
+import cv2
+import numpy as np
+import docscanner
+
+docscanner.initLicense(
+    "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==")
+
+
+class Scanner(object):
+    def __init__(self):
+        self.scanner = docscanner.createInstance()
+        self.scanner.setParameters(docscanner.Templates.color)
+
+    def __del__(self):
+        pass
+
+    def detect_edge(self, image, enabled_transform=False):
+        results = self.scanner.detectMat(image)
+        normalized_image = None
+        for result in results:
+            x1 = result.x1
+            y1 = result.y1
+            x2 = result.x2
+            y2 = result.y2
+            x3 = result.x3
+            y3 = result.y3
+            x4 = result.x4
+            y4 = result.y4
+
+            cv2.drawContours(
+                image, [np.intp([(x1, y1), (x2, y2), (x3, y3), (x4, y4)])], 0, (0, 255, 0), 2)
+
+            if enabled_transform:
+                normalized_image = self.scanner.normalizeBuffer(
+                    image, x1, y1, x2, y2, x3, y3, x4, y4)
+                normalized_image = docscanner.convertNormalizedImage2Mat(
+                    normalized_image)
+            break
+
+        return image, normalized_image

examples/web/requirements.txt

@@ -0,0 +1,3 @@
+flask
+document-scanner-sdk
+opencv-python

examples/web/server.py

@@ -0,0 +1,66 @@
+from flask import Flask, render_template, Response, jsonify, request
+from camera import VideoCamera
+
+app = Flask(__name__)
+
+video_camera = None
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/capture_status', methods=['POST'])
+def capture_status():
+    global video_camera 
+
+    if video_camera == None:
+        video_camera = VideoCamera()
+
+    json = request.get_json()
+
+    status = json['status']
+
+    if status == "true":
+        video_camera.capture_frame()
+        return jsonify(result="done")
+
+def video_frame():
+    global video_camera 
+
+    if video_camera == None:
+        video_camera = VideoCamera()
+        
+    while True:
+        frame = video_camera.get_video_frame()
+
+        if frame is not None:
+            yield (b'--frame\r\n'
+                    b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')
+        else:
+            yield (b'--frame\r\n'
+                    b'Content-Type: image/jpeg\r\n\r\n' + video_camera.get_cached_frame() + b'\r\n\r\n')
+
+def image_frame():
+    global video_camera 
+
+    if video_camera == None:
+        video_camera = VideoCamera()
+        
+    frame = video_camera.get_image_frame()
+
+    if frame is not None:
+        yield (b'--frame\r\n'
+                b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')
+
+@app.route('/video_viewer')
+def video_viewer():
+    return Response(video_frame(),
+                    mimetype='multipart/x-mixed-replace; boundary=frame')
+
+@app.route('/image_viewer')
+def image_viewer():
+    return Response(image_frame(),
+                        mimetype='multipart/x-mixed-replace; boundary=frame')
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', threaded=True)

examples/web/static/controller.js

@@ -0,0 +1,17 @@
+var buttonCapture = document.getElementById("capture");
+
+buttonCapture.onclick = function() {
+    // XMLHttpRequest
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState == 4 && xhr.status == 200) {
+            // alert(xhr.responseText);
+            var image = document.getElementById("image");
+            image.src = "/image_viewer?" + new Date().getTime();
+        }
+    }
+    xhr.open("POST", "/capture_status");
+    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+    xhr.send(JSON.stringify({ status: "true" }));
+};
+

examples/web/templates/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Document Scanner</title>
+</head>
+<body>
+  <h1>Document Edge Detection and Perspective Transformation</h1>
+  <div id="controller">
+    <button id="capture">Capture</button>
+    <script type="text/javascript" src="{{ url_for('static', filename='controller.js') }}"></script>      
+  </div>
+  <img id="video" src="{{ url_for('video_viewer') }}" width="640" height="480">
+  <img id="image" style="max-width:640px; max-height:480px">
+</body>
+</html>