C# Camera API for Getting Video Frame

If you have a USB camera, how can you build a simple C# camera application on Windows 10? There are three options:  WIA (Windows Imaging Acquisition), DirectShow and MediaCapture. After trying some sample code that downloaded from CodeProject and GitHub, I got the conclusion: 1. WIA is not good because it does not support my webcam.  2. DirectShow can work well, but there is no C# API provided by Microsoft. You need to create a wrapper for C++ API. 3. MediaCapture class that designed for UWP apps provides C# APIs which provide low-level control over the capture pipeline and enable advanced capture scenarios. In this article, I want to share how to create a simple C# webcam app in which I can handle every preview frame myself.

Read more

Barcode Scanner Optimization for Raspberry Pi

Although we have successfully ported Dynamsoft Barcode Reader SDK to Raspberry Pi, the performance is not as good as I expected. In my previous article, I demonstrated how to integrate the SDK into a barcode scanner application, in which the detection code works with webcam frame in the same thread. Apparently, it will block UI if the algorithm costs too much time. In this post, I will do three things: optimize the code with thread, beautify the code with clang-format, and make the webcam barcode scanner auto-launched after the system booted.

Read more

Webcam Barcode Scanner with HTML5 and Web Browser

As Internet connection speed getting faster, more and more people tend to embrace cloud service. Any desktop applications could be transformed to cloud applications with better maintainability, security, and stability. End-users can use web browsers to get connected with social friends, store tons of personal data, watch live video, edit documents, publish blog posts and even write code. As a programmer, if you are still developing desktop applications, it is time to think about how to turn your apps into web services. In this article, we will take a glimpse of how to make webcam barcode scanner with Dynamic Barcode Reader SDK work and web technologies.

Read more

Real-time Webcam Barcode Detection with OpenCV and C++

Dynamsoft Barcode Reader C++ SDK is available for Windows, Linux, and Mac (iOS and Android editions are coming soon). I have shared an article that illustrates how to build webcam barcode reader in Python. In this tutorial, I’ll use a different C++ API to implement barcode scanner applications for Windows and Raspberry Pi with a webcam.

Read more

Reading Barcode with Webcam in OpenCV and Python

Barcode is an efficient way to make information readable for machines. There are many scenarios of using Barcode reader software. For example, companies use Barcode encoding and decoding software to manage various documents that captured by office scanners. Airport security uses handheld scanners to check the boarding pass and record personal information to the database. Students use the built-in camera of the smartphone to check attendance via Barcode reader software. Since I have a Webcam connected to my desktop PC, I want to empower it to work as a Barcode reader. To implement the solution, I decide to choose OpenCV and Dynamsoft Barcode Reader SDK.

Read more

Webcam in HTML5

In the previous blog post, I have glanced at HTML5. Probably many people have already experienced some cool functions of HTML5. In this article, I would like to share how to invoke Webcam in HTML5.

While strolling through StackOverflow, I found there are many questions about how to display webcam in a web browser. Using HTML5, with a few tricks, can manage to show a Webcam in a web browser conveniently.

Please follow this tutorial step by step, and you can instantly build a webcam application in a web browser.

Create a <video> element and two <button> elements

<video id="video"></video>
<button id="start">start</button>
<button id="stop">stop</button>

Initialize

var streaming = false,
video = document.querySelector('#video'),
start = document.querySelector('#start'),
stop = document.querySelector('#stop'),
width = 320,
height = 0;

Get video

navigator.getMedia = (navigator.getUserMedia ||
                                   navigator.webkitGetUserMedia ||
                                   navigator.mozGetUserMedia ||
                                   navigator.msGetUserMedia);
navigator.getMedia(
              {
                  video: true,
                  audio: false
              },
              function (stream) {
                  if (navigator.mozGetUserMedia) {
                      video.mozSrcObject = stream;
                  } else {
                      var vendorURL = window.URL || window.webkitURL;
                      video.src = vendorURL.createObjectURL(stream);
                  }
                  video.play();
              },
              function (err) {
                  console.log("An error occured! " + err);
              }
            );

Resize video

video.addEventListener('canplay', function (ev) {
                if (!streaming) {
                    height = video.videoHeight / (video.videoWidth / width);
                    video.setAttribute('width', width);
                    video.setAttribute('height', height);
                    canvas.setAttribute('width', width);
                    canvas.setAttribute('height', height);
                    streaming = true;
                }
            }, false);

 Start or stop video

start.addEventListener('click', function (ev) {
                video.play();
                ev.preventDefault();
            }, false);
stop.addEventListener('click', function (ev) {
                video.pause();
                ev.preventDefault();
            }, false);

Pretty easy. For further reading, you can refer to Mozilla’s WebRTC docs.

HTML5 is definitely the trend of web technology. However, it is not so mature yet. Browsers are adopting features from HTML5 and evolving themselves over time. In the current stage, considering the compatibility and the security, using a 3rd-party webcam plugin, like ImageCapture Suite, would be a good option, especially if your image capture project has a tight schedule. Besides image acquisition, the plugin also allows you to do simple image processing, HTTP uploading and downloading. ImageCapture Suite supports all the mainstream web browsers like Chrome, IE, Firefox, and Opera on both Mac and Windows platform.

If you have any questions or comments, please leave a message in the comments section below or email me at kgao@dynamsoft.com.

New to HTML5

What is HTML5

HTML5 is a markup language based on HTML 4 and XHTML 1. It’s goal is to support the latest multimedia and be much more readable and understandable by humans and devices. Also, it is dedicated to reducing the dependency on RIA (Rich Internet Application) such as Flash, Silverlight, JavaFX and so forth, providing more handy APIs for strengthening Internet applications. A generic definition of HTML5 is “HTML5 + CSS3 + JS”.

Why HTML5

  • Standard
  • Cross-platform
  • Auto-adapt to the web page
  • Update in real-time
  • No plugin needed
  • Open and free
  • Friendly to search engines

What can HTML5 do

For experiencing what HTML5 can do, here are some amazing HTML5 web pages:

http://spielzeugz.de/html5/liquid-particles.html

http://ghost-hack.com/post/jsexperiments/tunneler/tunneler.html

http://playbiolab.com/

http://bellard.org/jslinux/index.html

Features of HTML5

Semantics

HTML5 defines some new HTML elements, which makes document description much more precise and readable.

semantics

Here are some useful HTML5 elements:

<article> <header> <aside> <hgroup> <figure> <figure> <figcaption> <section> <footer> <time>.

Deprecated elements: <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <s> <isindex> <noframes> <frameset> <strike> <tt> <u> and <xmp>

Connectivity

WebSocket

WebSocket provides for full-duplex communication, which makes more possible interaction between client and server, facilitating live content and the creation of real-time games.

websocket

 

Notifications

Website can push notifications to the desktop via the following code.

if (window.webkitNotifications.checkPermission() == 0) {
    var title = 'HTML5 notification',
        text = 'Can you see HTML5 notification?';
    window.webkitNotifications.createNotification('', title, text).show(); 
}

Multimedia

In HTML5, inserting a video or audio is as convenient as inserting an image.

HTML5 video

<audio src="sound.mp3" controls></audio>
<video src="movie.webm" autoplay controls></video>

3D Graphics Effects

Canvas

Dynamically draw something on the web page.

<canvas id="canvas" width="300" height="300"></canvas>
<script>
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.fillRect(20, 25, 150, 100);

  ctx.beginPath();
  ctx.arc(220, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  ctx.lineWidth = 15;
  ctx.lineCap = 'round';
  ctx.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  ctx.stroke();
</script>

WebGL

Without needing a plugin, WebGL provides some APIs to render 2D and 3D graphics in the web browser. This website helps you check whether your browser supports WebGL. Here are some amazing WebGL samples.

HTML5 vs Flash

HTML5:

  • No plugin for web browser.
  • Complex
  • Low popularity so far
  • Cross-platform
  • Lacks an engine
  • Free development tools.

Flash:

  • Smooth and stunning
  • Easy to learn
  • High popularity
  • High battery cost
  • Not open
  • Paid development tools

For more specifications, refer to Wikipedia: Comparison of HTML5 and Flash

Please feel free to contact kgao@dynamsoft.com.