makepanic · April 25, 2014 12:16 · svenhornberg · Apr 25, 2014
diff --git a/qr-capture.hbs b/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>
diff --git a/qr-capture.js b/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();
        }
    }
 });
	<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>
	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();
	}
	}
	});