JSFiddle - React, Tailwind, and code Playground

by Seokjun Hong

HTML

<script src="https://cdn.rawgit.com/kig/JSARToolKit/master/JSARToolKit.min.js"></script>
<script src="https://cdn.rawgit.com/kig/JSARToolKit/master/demos/magi.js"></script>
<video id="video" width="640" height="480"></video>
<canvas id="test" width="640" height="480"></canvas>
<canvas id="debugCanvas" width="640" height="480"></canvas>
<textarea id="tetete"></textarea>
<button id="eee">
  submit
</button>

CSS

video {
  display: none;
}

JavaScript

function toNode(html) {
  var doc = document.createElement('html');
  doc.innerHTML = html;
  return doc;
}

var node = toNode('<robject id="tttt" calib="eeeee"></robject>');

console.log(node);

DEBUG=true;
var video, canvas, context;
var pastResults = {};
var currId;

(function onLoad() {
  video = document.getElementById('video');
  canvas = document.getElementById("test");
  context = canvas.getContext("2d");

  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  if (navigator.getUserMedia) {
    init();
  }
})();

function init() {
   
  var raster = new NyARRgbRaster_Canvas2D(canvas);
  var param = new FLARParam(canvas.width, canvas.height);
  var pmat = mat4.identity();
  param.copyCameraMatrix(pmat, 100, 10000);

  var detector = new FLARMultiIdMarkerDetector(param, 2);
  detector.setContinueMode(true);

  navigator.getUserMedia({
      video: true
    },
    function(stream) {
      if (window.webkitURL) {
        video.src = window.webkitURL.createObjectURL(stream);
      } else if (video.mozSrcObject !== undefined) {
        video.mozSrcObject = stream;
      } else {
        video.src = stream;
      }
    },
    function(error) {}
  );

  function animate() {
    requestAnimFrame(animate);
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    trackingMarker();
  }

  function trackingMarker() {
    canvas.changed = true;
    var detected = detector.detectMarkerLite(raster, 120);
    //iterate detected marker
    var resultMat = new NyARTransMatResult();
    for (var idx = 0; idx < detected; idx++) {
      var id = detector.getIdMarkerData(idx);
      if (id.packetLength > 4) {
        currId = -1;
      } else {
        currId = 0;
        for (var i = 0; i < id.packetLength; i++) {
          currId = (currId << 8) | id.getPacketData(i);
        }
      }
      if (!pastResults[currId]) {
        pastResults[currId] = {};
      }

      detector.getTransformMatrix(idx,...