RecordVideoAnswer.js

define([
    'core/Model',
    './BaseWizardStep',
    'text!./_tmpl/RecordVideoAnswer.tmpl.html',

    'record-rtc',

    'jquery',
    'underscore',
    'backbone'
], function(BaseModel,BaseView, tmplData, RecordRTC, $, _, Backbone) {
    return BaseView.extend({
        name: 'interviewResponseRecordVideoAnswer',
        template: tmplData,
        model: null,

        totalTime: 0,

        events: {
            'click .e-record': 'onRecord',
            'click .e-stop': 'onStop'
        },

        initialize: function(options) {
            BaseView.prototype.initialize.call(this, options);

            this.isFirefox = !!navigator.mozGetUserMedia;
        },

        tick: function() {
            this.totalTime--;
            this.$('.e-countdown').text(this.totalTime);

            this.totalTime
                ? setTimeout(this.tick, 1000)
                : this.saveVideo()
            ;
        },

        render: function() {
            BaseView.prototype.render.call(this, this.model.toJSON());

            this.record = this.$('.e-record');
            this.stop = this.$('.e-stop');
            this.preview = this.$('.e-preview');

            this.totalTime = this.model.get('answer_time');
            this.tick = _.bind(this.tick, this);

            this.totalTime += 1;
            this.tick();
        },

        setQuestion: function(model) {
            this.model = model;
        },

        saveVideo: function() {

            //this.done();
        },

        onStop: function() {
            this.record.get(0).disabled = false;
            this.stop.get(0).disabled = true;

            this.preview.get(0).src = '';

            if (this.isFirefox) {
                this.recordAudio.stopRecording(_.bind(function(url) {
                    this.preview.get(0).src = url;
                   // this.sendBlob(this.recordAudio.getBlob());
                    this.recordAudio.getDataURL(_.bind(function(audioDataUrl){this.sendBlob(audioDataUrl)},this));
                }, this));

                return;
            }

            var vBlob, aBlob;

            this.recordAudio.stopRecording(_.bind(function() {
                aBlob = this.recordAudio.getBlob();

                vBlob && this.sendBlob(vBlob, aBlob);
            }, this));

            this.recordVideo.stopRecording(_.bind(function() {
                vBlob = this.recordVideo.getBlob();

                aBlob && this.sendBlob(vBlob, aBlob);
            }, this));

        },

        onRecord: function() {
            this.record.get(0).disabled = true;
            this.stop.get(0).disabled = false;

            navigator.getUserMedia({
                audio: true,
                video: true
            }, _.bind(function(stream) {
                this.preview.get(0).src = window.URL.createObjectURL(stream);
                this.preview.get(0).play();

                this.recordAudio = RecordRTC(stream, {
                   // bufferSize: 16384,
                   // sampleRate: 45000,

                    onAudioProcessStarted: _.bind(function() {
                        if (!this.isFirefox) {
                            this.recordVideo.startRecording();
                        }
                    }, this)
                });

                if (this.isFirefox) {
                    this.recordAudio.startRecording();
                }

                if (!this.isFirefox) {
                    this.recordVideo = RecordRTC(stream, {
                        type: 'video'
                    });
                    this.recordAudio.startRecording();
                }
            }, this), function(error) {
                alert(JSON.stringify(error, null, '\t'));
            });
        },

        sendBlob: function (videoFile, audioFile) {
            var Email = BaseModel.extend({
                urlRoot: '/api/answer_videos',

                initialize: function(options) {
                    BaseView.prototype.initialize.call(this, options);

                    //this.setFileAttribute('video-blob', 'video.webm');
                    //this.setFileAttribute('audio-blob', 'audio.wav');
                }
            });

            var email = new Email();

            //email.set('id',         '29');
            email.set('video-blob', videoFile);
            audioFile && email.set('audio-blob', audioFile);
            email.save();
        }

    });
});