QR decode Emberjs Component

qr-capture.hbs

<canvas id="qr-canvas"></canvas>

<div class="camera">
    <video class="camera-canvas" id="v" autoplay></video>
    <div class="camera-overlay-top">
        <h4>{{caption}}</h4>
    </div>
    <div class="camera-overlay-bottom">
        {{#if recording}}
            <div class="topcoat-button-bar">
                <div class="topcoat-button-bar__item">
                    <button class="topcoat-button-bar__button" {{action 'captureQr'}}>
                        <i class="fa fa-circle"></i>
                    </button>
                </div>
                <div class="topcoat-button-bar__item">
                    <button class="topcoat-button-bar__button" {{action 'stopRecord'}}>
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
        {{else}}
            <div class="topcoat-button-bar">
                <div class="topcoat-button-bar__item">
                    <button class="topcoat-button-bar__button" {{action 'record'}}>
                        <i class="fa fa-play"></i>
                    </button>
                </div>
            </div>
        {{/if}}
    </div>
</div>

qr-capture.js

export default Ember.Component.extend({
    recording: false,
    width: null,
    height: null,
    video: null,
    canvas: null,
    ctx: null,
    gum: Em.K,
    hasMediaStreamTrackSources: false,

    didInsertElement: function () {
        var that = this,
            canvas = this.$('#qr-canvas')[0],
            video = this.$('#v')[0],
            ctx = canvas.getContext('2d'),
            $window = $(window),
            width = $window.width(),
            height = $window.height() - $('.nav-bar').height();

        canvas.width = width;
        canvas.height = height;
        video.width = width;
        video.height = height;

        // clear canvas
        ctx.clearRect(0, 0, width, height);

        qrcode.callback = function(data){
            if (data) {
                console.log('qrcode', data);
                that.sendAction('qr', data);
            }
        };

        this.setProperties({
            video: video,
            canvas: canvas,
            ctx: ctx,
            width: width,
            height: height,

            gum: Modernizr.prefixed('getUserMedia', navigator),
            hasMediaStreamTrackSources: MediaStreamTrack && MediaStreamTrack.getSources
        });
    },

    /**
     * Computed property to get the video source that faces the environment
     */
    changedHasMediaStreamTrackSources: function () {
        var mediaSource,
            that = this,
            hasSources = this.get('hasMediaStreamTrackSources');

        if (hasSources) {
            MediaStreamTrack.getSources(function (sources) {
                sources.forEach(function (source) {
                    if (source.kind === 'video' && source.facing === 'environment') {
                        mediaSource = source.id;
                    }
                });
                console.log('using', mediaSource);
                that.set('mediaSource', mediaSource);
            });
        }
    }.observes('hasMediaStreamTrackSources'),

    recordingChanged: function(){
        console.log('recording changed', this.get('recording'));
    }.observes('recording'),

    enableVideoCapture: function () {
        var that = this,
            props = this.getProperties('width', 'height', 'video', 'canvas', 'ctx', 'gum', 'hasMediaStreamTrackSources'),
            video = props.video,
            gumCfg = {
                video: true,
                audio: false
            };

        if (props.hasMediaStreamTrackSources) {
            // set camera if source
            gumCfg.video = {
                optional: [{
                    sourceId: this.get('mediaSource')
                }]
            };
        }

        props.gum(gumCfg, function (stream) {
            that.set('stream', stream);
            // success
            console.log(stream);
            if ((typeof MediaStream !== "undefined" && MediaStream !== null) && stream instanceof MediaStream) {
                console.log('MediaStreamWay');
                video.src = stream;
                video.mozSrcObject = stream;
                video.play();
                that.set('recording', true);
            } else {
                console.log('url way');
                var vendorURL = window.URL || window.webkitURL;
                video.src = vendorURL ? vendorURL.createObjectURL(stream) : stream;
                that.set('recording', true);
            }

            video.onerror = function () {
                stream.stop();
                that.set('recording', false);
                debugger;
            };
        }, function (err) {
            console.error(err);
        })
    },

    disableVideoCapture: function () {
        var stream = this.get('stream'),
            video = this.get('video');

        if (stream) {
            video.pause();
            //video.src = null;
            //video.mozSrcObject = null;
            stream.stop();
            this.set('recording', false);
        }
    },

    actions: {
        captureQr: function () {
            console.log('qrcode.decode');
            var video = this.get('video'),
                canvas = this.get('canvas'),
                ctx = this.get('ctx');

            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

            video.pause();
            this.set('recording', false);
            this.get('stream').stop();

            try{
                qrcode.decode();
            } catch(e) {
                console.error('qrcode.decode', e);
                alert(JSON.stringify(e));
            }
        },
        record: function(){
            this.enableVideoCapture();
        },
        stopRecord: function(){
            this.disableVideoCapture();
        }
    }
});

Thx