OpenCV Drawing Camera

このエントリーをはてなブックマークに追加

How it works

opencv.js is js library for opencv.
I use for Canny Edge detection and transfer processed image to obniz OELD display.

Program

<!-- HTML Example -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://docs.opencv.org/3.4/opencv.js"></script>
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@2.0.2/obniz.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
  
<div><div class="control"><button id="startAndStop">Start</button></div></div>
<p class="err" id="errorMessage"></p>
<div>
    <table cellpadding="0" cellspacing="0" width="0" border="0">
    <tr>
        <td>
            <video id="videoInput" width=320 height=240></video>
        </td>
        <td>
            <canvas id="canvasOutput" width=128 height=64 style="-webkit-font-smoothing:none"></canvas>
        </td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <div class="caption">videoInput</div>
        </td>
        <td>
            <div class="caption">canvasOutput</div>
        </td>
        <td></td>
        <td></td>
    </tr>
    </table>
</div>
  
<script src="https://webrtc.github.io/adapter/adapter-5.0.4.js" type="text/javascript"></script>
<script src="https://docs.opencv.org/3.4/utils.js" type="text/javascript"></script>
<script type="text/javascript">

obniz = new Obniz("OBNIZ_ID_HERE");

obniz.onconnect = async () => {
  obniz.display.print("ready")
}
  
let utils = new Utils('errorMessage');

let streaming = false;
let videoInput = document.getElementById('videoInput');
let startAndStop = document.getElementById('startAndStop');
let canvasOutput = document.getElementById('canvasOutput');
let canvasContext = canvasOutput.getContext('2d');

startAndStop.addEventListener('click', () => {
    if (!streaming) {
        utils.clearError();
        utils.startCamera('qvga', onVideoStarted, 'videoInput');
    } else {
        utils.stopCamera();
        onVideoStopped();
    }
});

function onVideoStarted() {
    streaming = true;
    startAndStop.innerText = 'Stop';
    videoInput.width = videoInput.videoWidth;
    videoInput.height = videoInput.videoHeight;
    start();
}

function onVideoStopped() {
    streaming = false;
    canvasContext.clearRect(0, 0, canvasOutput.width, canvasOutput.height);
    startAndStop.innerText = 'Start';
}

function start() {
  let video = document.getElementById('videoInput');
  let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
  let dst = new cv.Mat();
  let cap = new cv.VideoCapture(video);

  const FPS = 20;
  function processVideo() {
    if (!streaming) {
      src.delete();
      dst.delete();
      return;
    }
    let begin = Date.now();

    cap.read(src);
    cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
    cv.Canny(dst, dst, 50, 100, 3, false);
    let dsize = new cv.Size(128, 64);
    cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA);
    cv.threshold(dst, dst, 50, 255, cv.THRESH_BINARY);
    cv.imshow('canvasOutput', dst);

    let delay = 1000/FPS - (Date.now() - begin);
    setTimeout(processVideo, delay);

    let ctx = $("#canvasOutput")[0].getContext('2d');
    obniz.display.draw(ctx)
  };

  setTimeout(processVideo, 0);
}
</script>
</body>
</html>

Run Now

The html will be opened to run a program.

You will Get in Few Days

Circuit for Starter “obniz Board” is available on Amazon and other online stores.
You can get it at below

Our products and resellers

Forum

Visit our developer’s forum to discuss and discover technologies.

Forum

Contact

Feel free to contact out support and technical team.

Contact us