JSFiddle - React, Tailwind, and code Playground

by Yoshiharu Kamata

HTML

<script src="https://rawgit.com/LazarSoft/jsqrcode/master/src/grid.js"></script>
<script src="https://rawgit.com/LazarSoft/jsqrcode/master/src/version.js"></script>
<script src="https://rawgit.com/LazarSoft/jsqrcode/master/src/detector.js"></script>
<script src="https://rawgithub.com/LazarSoft/jsqrcode/master/src/formatinf.js"></script>
<script src="https://rawgithub.com/LazarSoft/jsqrcode/master/src/errorlevel.js"></script>
<script src="https://rawgithub.com/LazarSoft/jsqrcode/master/src/bitmat.js"></script>
<script src="https://rawgithub.com/LazarSoft/jsqrcode/master/src/datablock.js"></script>
<script src="https://rawgithub.com/LazarSoft/jsqrcode/master/src/bmparser.js"></script>
<script src="https://rawgithub.com/LazarSoft/jsqrcode/master/src/datamask.js"></script>
<script src="https://rawgithub.com/LazarSoft/jsqrcode/master/src/rsdecoder.js"></script>
<script src="https://rawgithub.com/LazarSoft/jsqrcode/master/src/gf256poly.js"></script>
<script src="https://rawgithub.com/LazarSoft/jsqrcode/master/src/gf256.js"></script>
<script src="https://rawgithub.com/LazarSoft/jsqrcode/master/src/decoder.js"></script>
<script src="https://rawgithub.com/LazarSoft/jsqrcode/master/src/alignpat.js"></script>
<script src="https://rawgithub.com/LazarSoft/jsqrcode/master/src/databr.js"></script>
<script src="https://rawgit.com/LazarSoft/jsqrcode/master/src/qrcode.js"></script>
<script src="https://rawgithub.com/LazarSoft/jsqrcode/master/src/findpat.js"></script>
<button>decode</button>
<div id="result">scan ...</div>
<video autoplay ></video>
<canvas id="qr-canvas"></canvas>

CSS

video {
    width: 320px;
    height: 200px;
}
canvas {
    width: 320px;
    height: 320px;
}

CoffeeScript

MediaStreamTrack.getSources (sources)->
  videoId = null
  sources.forEach (info)->
    if info.kind == "video"
      videoId = info.id
  
  navigator.webkitGetUserMedia video: optional: [{sourceId: videoId}] ,
    (stream)->
      console.log "ok"

      $("video").attr "src", URL.createObjectURL stream
    , (e)->
      console.log "err", e
        
$ ->
 ctx = $("#qr-canvas").get(0).getContext "2d"
 video = $("video").get(0)
 setInterval ->
   ctx.drawImage video, 0, 0, 320, 200
 ,1000
 qrcode.callback = (result)->
    console.log "res=", result
    $("#result").text result
 $("button").on "click", ->
    qrcode.decode()