blindsidenetworks / moodle-tinymce_recordrtc

// Extract plugin settings to params hash.

(function() {

    var params = {};

    var r = /([^&=]+)=?([^&]*)/g;

    var d = function(s) {

        return decodeURIComponent(s.replace(/\+/g, ' '));

    };

    var search = window.location.search;

    var match = r.exec(search.substring(1));

    while (match) {

        params[d(match[1])] = d(match[2]);

        if (d(match[2]) === 'true' || d(match[2]) === 'false') {

            params[d(match[1])] = d(match[2]) === 'true' ? true : false;

        }

        match = r.exec(search.substring(1));

    }

    window.params = params;

})();

// Initialize some variables.

var player = null;

var startStopBtn = null;

var uploadBtn = null;

var countdownSeconds = null;

var countdownTicker = null;

var mediaRecorder = null;

var chunks = null;

/**

 * This function is initialized from PHP

 *

 *            Y YUI instance

 */

M.tinymce_recordrtc.view_init = function() {

    // Assignment of global variables.

    player = document.querySelector('video#player');

    startStopBtn = document.querySelector('button#start-stop');

    uploadBtn = document.querySelector('button#upload');

    // Display "consider switching browsers" message if not using:

    // - Firefox 29+;

    // - Chrome 49+;

    // - Opera 36+.

          (bowser.chrome && bowser.version >= 49) ||

          (bowser.opera && bowser.version >= 36))) {

        var alert = document.querySelector('div[id=alert-info]');

        alert.textContent = M.util.get_string('browseralert', 'tinymce_recordrtc');

        alert.classList.remove('hide');

    }

    // Run when user clicks on "record" button.

    startStopBtn.onclick = function() {

        var btn = this;

        btn.disabled = true;

        // If button is displaying "Start Recording" or "Record Again".

        if ((btn.textContent === M.util.get_string('startrecording', 'tinymce_recordrtc')) ||

            (btn.textContent === M.util.get_string('recordagain', 'tinymce_recordrtc')) ||

            (btn.textContent === M.util.get_string('recordingfailed', 'tinymce_recordrtc'))) {

            // Hide alert-danger if it is shown.

            var alert = document.querySelector('div[id=alert-danger]');

            alert.classList.add('hide');

            // Make sure the upload button is not shown.

            uploadBtn.parentElement.classList.add('hide');

            // Change look of recording button.

            startStopBtn.classList.remove('btn-outline-danger');

            startStopBtn.classList.add('btn-danger');

            // Empty the array containing the previously recorded chunks.

            chunks = [];

            // Initialize common configurations.

            var commonConfig = {

                // When the stream is captured from the microphone/webcam.

                onMediaCaptured: function(stream) {

                    // Make video stream available at a higher level by making it a property of btn.

                    btn.stream = stream;

                    if (btn.mediaCapturedCallback) {

                        btn.mediaCapturedCallback();

                    }

                },

                // Revert button to "Record Again" when recording is stopped.

                onMediaStopped: function(btnLabel) {

                    btn.textContent = btnLabel;

                },

                // Handle recording errors.

                onMediaCapturingFailed: function(error) {

                    var btnLabel = null;

                    // If Firefox and Permission Denied error.

                            'Foo': {

                                // Link: https://addons.mozilla.org/firefox/downloads/latest/655146/addon-655146...

                                // ...-latest.xpi?src=dp-btn-primary.

                                URL: 'https://addons.mozilla.org/en-US/firefox/addon/enable-screen-capturing/',

                                toString: function() {

                                    return this.URL;

                                }

                            }

                        });

                        btnLabel = M.util.get_string('startrecording', 'tinymce_recordrtc');

                    } else if ((error.name === 'DevicesNotFoundError') ||

                               (error.name === 'NotFoundError')) { // If Device Not Found error.

                        var alert = document.querySelector('div[id=alert-danger]');

                        alert.classList.remove('hide');

                        alert.textContent = M.util.get_string('inputdevicealert', 'tinymce_recordrtc');

                        btnLabel = M.util.get_string('recordingfailed', 'tinymce_recordrtc');

                    }

                    // Proceed to treat as a stopped recording.

                    commonConfig.onMediaStopped(btnLabel);

                }

            };

            // Show video tag without controls to view webcam stream.

            player.classList.remove('hide');

            player.controls = false;

            // Capture audio+video stream from webcam/microphone.

            M.tinymce_recordrtc.captureAudioVideo(commonConfig);

            // When audio+video stream is successfully captured, start recording.

            btn.mediaCapturedCallback = function() {

                M.tinymce_recordrtc.startRecording(btn.stream);

            };

        } else { // If button is displaying "Stop Recording".

            // First of all clears the countdownTicker.

            clearInterval(countdownTicker);

            // Disable "Record Again" button for 1s to allow background processing (closing streams).

            setTimeout(function() {

                btn.disabled = false;

            }, 1000);

            // Stop recording.

            M.tinymce_recordrtc.stopRecording(btn.stream);

            // Change button to offer to record again.

            btn.textContent = M.util.get_string('recordagain', 'tinymce_recordrtc');

            startStopBtn.classList.remove('btn-danger');

            startStopBtn.classList.add('btn-outline-danger');

        }

    };

};

/////////////////////////

// Functions for capturing, recording, and uploading stream.

/////////////////////////

// Capture webcam/microphone stream.

M.tinymce_recordrtc.captureUserMedia = function(mediaConstraints, successCallback, errorCallback) {

};

// Setup to get audio+video stream from microphone/webcam.

M.tinymce_recordrtc.captureAudioVideo = function(config) {

    M.tinymce_recordrtc.captureUserMedia(

        // Media constraints.

        {

            audio: true,

            video: {

              width: {ideal: 640},

              height: {ideal: 480}

            }

        },

        // Success callback.

        function(audioVideoStream) {

            // Set video player to play microphone+webcam stream.

            player.srcObject = audioVideoStream;

            player.play();

            config.onMediaCaptured(audioVideoStream);

        },

        // Error callback.

        function(error) {

            config.onMediaCapturingFailed(error);

        }

    );

};

// Add chunks of video to array when made available.

M.tinymce_recordrtc.handleDataAvailable = function(event) {

    chunks.push(event.data);

};

// Output information to console when recording stopped.

M.tinymce_recordrtc.handleStop = function(event) {

};

M.tinymce_recordrtc.startRecording = function(stream) {

    // Initialize recording of stream.

    mediaRecorder.ondataavailable = M.tinymce_recordrtc.handleDataAvailable;

    mediaRecorder.onstop = M.tinymce_recordrtc.handleStop;

    mediaRecorder.start(10); // Capture in 10ms chunks. Must be set to work with Firefox.

    console.log('MediaRecorder started:', mediaRecorder);

    // Set recording timer to the time specified in the settings.

    countdownSeconds = params['timelimit'];

    countdownSeconds++;

    startStopBtn.innerHTML = M.util.get_string('stoprecording', 'tinymce_recordrtc') +

                             ' (<span id="minutes"></span>:<span id="seconds"></span>)';

    M.tinymce_recordrtc.setTime();

    startStopBtn.disabled = false;

    countdownTicker = setInterval(M.tinymce_recordrtc.setTime, 1000);

};

M.tinymce_recordrtc.stopRecording = function(stream) {

    mediaRecorder.stop();

    stream.getTracks().forEach(function(track) {

        track.stop();

    });

    // Set source of video player, then show it with controls enabled.

        type: 'video/webm;codecs=vp8'

    });

    player.src = URL.createObjectURL(blob);

    player.muted = false;

    player.controls = true;

    player.play();

    player.onended = function() {

        player.pause();

    };

    // Show upload button.

    uploadBtn.parentElement.classList.remove('hide');

    uploadBtn.textContent = M.util.get_string('attachrecording', 'tinymce_recordrtc');

    uploadBtn.disabled = false;

    // Handle when upload button is clicked.

    uploadBtn.onclick = function() {

        // Trigger error if no recording has been made.

        if (!player.src || chunks === []) {

            return alert(M.util.get_string('norecordingfound', 'tinymce_recordrtc'));

        }

        var btn = uploadBtn;

        btn.disabled = true;

        // Upload recording to server.

        M.tinymce_recordrtc.uploadToServer(function(progress, fileURL) {

            if (progress === 'ended') {

                btn.disabled = false;

                M.tinymce_recordrtc.insert_annotation(fileURL);

            } else if (progress === 'upload-failed') {

                btn.disabled = false;

                btn.textContent = M.util.get_string('uploadfailed', 'tinymce_recordrtc');

            } else {

                btn.textContent = progress;

            }

    };

};

// Upload recorded video to server.

M.tinymce_recordrtc.uploadToServer = function(callback) {

    // Get src URL of video tag.

    xhr.open('GET', player.src, true);

    xhr.responseType = 'blob';

        if (xhr.status === 200) {

            // Variable blob is now the blob that the video tag's src pointed to.

            var blob = this.response;

            // Generate filename with random ID and file extension.

            var fileName = (Math.random() * 1000).toString().replace('.', '');

            fileName += '-video.webm';

            // Create FormData to send to PHP upload/save script.

            var formData = new FormData();

            formData.append('video-filename', fileName);

            formData.append('video-blob', blob);

            // Pass FormData to PHP script using XHR.

            M.tinymce_recordrtc.makeXMLHttpRequest('save.php', formData, function(progress, responseText) {

                if (progress === 'upload-ended') {

                    var initialURL = location.href.replace(location.href.split('/').pop(), '') + 'uploads.php/';

                    callback('ended', initialURL + responseText);

                } else {

                    callback(progress);

                }

            });

        }

    };

    xhr.send();

}

// Handle XHR sending/receiving/status.

M.tinymce_recordrtc.makeXMLHttpRequest = function(url, data, callback) {

    xhr.onreadystatechange = function() {

        // When request is finished and successful.

        if ((xhr.readyState === 4) && (xhr.status === 200)) {

            callback('upload-ended', xhr.responseText);

        } else if (xhr.status === 404) { // When request returns 404 Not Found.

            callback('upload-failed');

        }

    };

    xhr.upload.onprogress = function(event) {

        callback(Math.round(event.loaded / event.total * 100) + "% " +

                 M.util.get_string('uploadprogress', 'tinymce_recordrtc'));

    };

    xhr.upload.onerror = function(error) {

        callback('upload-failed');

        console.error('XMLHttpRequest failed: ', error);

    };

    xhr.upload.onabort = function(error) {

        callback(M.util.get_string('uploadaborted', 'tinymce_recordrtc'));

        console.error('XMLHttpRequest aborted: ', error);

    };

    // POST FormData to PHP script that handles uploading/saving.

    xhr.open('POST', url);

    xhr.send(data);

}

// Makes 1min and 2s display as 1:02 on timer instead of 1:2, for example.

M.tinymce_recordrtc.pad = function(val) {

    var valString = val + "";

    if (valString.length < 2) {

        return "0" + valString;

    } else {

        return valString;

    }

};

// Functionality to make recording timer count down.

// Also makes recording stop when time limit is hit.

M.tinymce_recordrtc.setTime = function() {

    countdownSeconds--;

    startStopBtn.querySelector('span#seconds').textContent = M.tinymce_recordrtc.pad(countdownSeconds % 60);

    startStopBtn.querySelector('span#minutes').textContent = M.tinymce_recordrtc.pad(parseInt(countdownSeconds / 60));

    if (countdownSeconds === 0) {

        startStopBtn.click();

    }

};

// Generates link to recorded annotation.

M.tinymce_recordrtc.create_annotation = function(recording_url) {

    // Create an icon linked to file in both editor text area and submission page:

    // var annotation = '<div id="recordrtc_annotation" class="text-center">...

    // ...<a target="_blank" href="' + recording_url + '"><img alt="RecordRTC Annotation"...

    // ...title="RecordRTC Annotation" src="' + recordrtc.icon32 + '" /></a></div>';.

    // Create link to file in editor text area and video player in submission page.

    var annotation = '<div id="recordrtc_annotation" class="text-center"><a target="_blank" href="' + recording_url + '">' +

                     M.util.get_string('annotation', 'tinymce_recordrtc') + '</a></div>';

    return annotation;

};

// Inserts link to annotation in editor text area.

M.tinymce_recordrtc.insert_annotation = function(recording_url) {

    var annotation = M.tinymce_recordrtc.create_annotation(recording_url);

    tinyMCEPopup.close();

};