Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/

//

// Moodle is free software: you can redistribute it and/or modify

// it under the terms of the GNU General Public License as published by

// the Free Software Foundation, either version 3 of the License, or

// (at your option) any later version.

//

// Moodle is distributed in the hope that it will be useful,

// but WITHOUT ANY WARRANTY; without even the implied warranty of

// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

// GNU General Public License for more details.

//

// You should have received a copy of the GNU General Public License

// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**

 * Tiny Record RTC - Screen recorder configuration.

 *

 * @module      tiny_recordrtc/screen_recorder

 * @copyright   2024 The Open University

 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

import BaseClass from './base_recorder';

import Modal from 'tiny_recordrtc/modal';

import {component} from 'tiny_recordrtc/common';

import {getString} from 'core/str';

export default class Screen extends BaseClass {

    configurePlayer() {

        return this.modalRoot.querySelector('video');

    }

    getSupportedTypes() {

        return [

            // Support webm as a preference.

            // This container supports both vp9, and vp8.

            // It does not support AVC1/h264 at all.

            // It is supported by Chromium, and Firefox browsers, but not Safari.

            'video/webm;codecs=vp9,opus',

            'video/webm;codecs=vp8,opus',

            // Fall back to mp4 if webm is not available.

            // The mp4 container supports v9, and h264 but neither of these are supported for recording on other

            // browsers.

            // In addition to this, we can record in v9, but VideoJS does not support a mp4 container with v9 codec

            // for playback. We leave it as a final option as a just-in-case.

            'video/mp4;codecs=h264,opus',

            'video/mp4;codecs=h264,wav',

            'video/mp4;codecs=v9,opus',

        ];

    }

    getRecordingOptions() {

        return {

            videoBitsPerSecond: parseInt(this.config.screenbitrate),

            videoWidth: parseInt(this.config.videoscreenwidth),

            videoHeight: parseInt(this.config.videoscreenheight),

        };

    }

    getMediaConstraints() {

        return {

            audio: true,

            systemAudio: 'exclude',

            video: {

                displaySurface: 'monitor',

                frameRate: {ideal: 24},

                width: {

                    max: parseInt(this.config.videoscreenwidth),

                },

                height: {

                    max: parseInt(this.config.videoscreenheight),

                },

            },

        };

    }

    playOnCapture() {

        // Play the recording back on capture.

        return true;

    }

    getRecordingType() {

        return 'screen';

    }

    getTimeLimit() {

        return this.config.screentimelimit;

    }

    getEmbedTemplateName() {

        return 'tiny_recordrtc/embed_screen';

    }

    getFileName(prefix) {

        return `${prefix}-video.${this.getFileExtension()}`;

    }

    getFileExtension() {

        if (window.MediaRecorder.isTypeSupported('audio/webm')) {

            return 'webm';

        } else if (window.MediaRecorder.isTypeSupported('audio/mp4')) {

            return 'mp4';

        }

        window.console.warn(`Unknown file type for MediaRecorder API`);

        return '';

    }

    async captureUserMedia() {

        // Screen recording requires both audio and the screen, and we need to get them both together.

        const audioPromise = navigator.mediaDevices.getUserMedia({audio: true});

        const screenPromise = navigator.mediaDevices.getDisplayMedia(this.getMediaConstraints());

        // If the audioPromise is "rejected" (indicating that the user does not want to share their voice),

        // we will proceed to record their screen without audio.

        // Therefore, we will use Promise.allSettled instead of Promise.all.

        await Promise.allSettled([audioPromise, screenPromise]).then(this.combineAudioAndScreenRecording.bind(this));

    }

    /**

     * For starting screen recording, once we have both audio and video, combine them.

     *

     * @param {Object[]} results from the above Promise.allSettled call.

     */

    combineAudioAndScreenRecording(results) {

        const [audioData, screenData] = results;

        if (screenData.status !== 'fulfilled') {

            // If the user does not grant screen permission show warning popup.

            this.handleCaptureFailure(screenData.reason);

            return;

        }

        const screenStream = screenData.value;

        // Prepare to handle if the user clicks the browser's "Stop Sharing Screen" button.

        screenStream.getVideoTracks()[0].addEventListener('ended', this.handleStopScreenSharing.bind(this));

        // Handle microphone.

        if (audioData.status !== 'fulfilled') {

            // We could not get audio. In this case, we just continue without audio.

            this.handleCaptureSuccess(screenStream);

            return;

        }

        const audioStream = audioData.value;

        // Merge the video track from the media stream with the audio track from the microphone stream

        // and stop any unnecessary tracks to ensure that the recorded video has microphone sound.

        const composedStream = new MediaStream();

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

            if (track.kind === 'video') {

                composedStream.addTrack(track);

            } else {

                track.stop();

            }

        });

        audioStream.getAudioTracks().forEach(function(micTrack) {

            composedStream.addTrack(micTrack);

        });

        this.handleCaptureSuccess(composedStream);

    }

    /**

     * Callback that is called by the user clicking Stop screen sharing on the browser.

     */

    handleStopScreenSharing() {

        if (this.isRecording() || this.isPaused()) {

            this.requestRecordingStop();

            this.cleanupStream();

        } else {

            this.setRecordButtonState(false);

            this.displayAlert(

                getString('screensharingstopped_title', component),

                getString('screensharingstopped', component)

            );

        }

    }

    handleRecordingStartStopRequested() {

        if (this.isRecording() || this.isPaused()) {

            this.requestRecordingStop();

            this.cleanupStream();

        } else {

            this.startRecording();

        }

    }

    static getModalClass() {

        return class extends Modal {

            static TYPE = `${component}/screen_recorder`;

            static TEMPLATE = `${component}/screen_recorder`;

        };

    }

}