Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-81212

Tiny/RecordRTC: Add Screen-recorder button

XMLWordPrintable

    • MOODLE_404_STABLE
    • MOODLE_405_STABLE
    • MDL-81212-master
    • Hide

      Upgrading test

      1. Before the patch.
      2. Navigate to Site administration > Plugins > Text editors > TinyMCE editor > Tiny RecordRTC
      3. Set the recording type to Audio and video.
      4. Apply the patch.
      5. Do the upgrade.
      6. Navigate to Site administration > Plugins > Text editors > TinyMCE editor > Tiny RecordRTC
      7. Verify that Audio and Video are selected. Screen is un-checked.

      New Admin settings test

      1. Login as admin.
      2. Navigate to Site administration > Plugins > Text editors > TinyMCE editor > Tiny RecordRTC
      3. Verify that the "Recording type" setting is changed to a selection of checkboxes.

      New Video context menu test

      1. Navigate to Site administration > Plugins > Text editors > TinyMCE editor > Tiny RecordRTC
      2. Enable (checked) on Audio and Video.
      3. Disable (unchecked) the Screen.
      4. Save changes.
      5. Navigate to the Edit profile page.
      6. Verify that you will see 2 buttons: Record Audio and Record Video in the TinyMCE toolbar.
      7. Navigate to Site administration > Plugins > Text editors > TinyMCE editor > Tiny RecordRTC
      8. Enable (checked) on Audio and Screen.
      9. Disable (unchecked) the Video.
      10. Save changes.
      11. Navigate to the Edit profile page.
      12. Verify that you will see 2 buttons: Record Audio and Record screen in the TinyMCE toolbar.
      13. Navigate to Site administration > Plugins > Text editors > TinyMCE editor > Tiny RecordRTC
      14. Enable (checked) on Audio and Video and Screen.
      15. Save changes.
      16. Navigate to the Edit profile page.
      17. Verify that you will see 2 buttons: Record Audio and Video record menu in the TinyMCE toolbar.
      18. Click on the Video record menu.
      19. Verify that you will see a context menu.
      20. Verify that the context menu contains both the "Video record" button and the "Screen record" button.

      Screen sharing test (Note: This test needs to be tested on Chrome, Firefox and Safari)

      1. Navigate to the Edit profile page.
      2. Click on the Video record menu.
      3. Click on the "Record screen" in the context menu.
      4. Verify that a popup will appear, allowing you to select the screen you want to share.
      5. Select the screen/window you want to share.
      6. Verify that the screen you selected to share is streaming on the Record Screen dialogue.
      7. Click on the "Star recording" button
      8. When you're ready to stop recording, click the "Stop recording" button, or you can wait for the countdown to end.
      9. Click on the "Attach recording" button
      10. Click on the "Update profile" button
      11. Verify that you can play the recorded screen video.
      Show
      Upgrading test Before the patch. Navigate to Site administration > Plugins > Text editors > TinyMCE editor > Tiny RecordRTC Set the recording type to Audio and video. Apply the patch. Do the upgrade. Navigate to Site administration > Plugins > Text editors > TinyMCE editor > Tiny RecordRTC Verify that Audio and Video are selected. Screen is un-checked. New Admin settings test Login as admin. Navigate to Site administration > Plugins > Text editors > TinyMCE editor > Tiny RecordRTC Verify that the "Recording type" setting is changed to a selection of checkboxes. New Video context menu test Navigate to Site administration > Plugins > Text editors > TinyMCE editor > Tiny RecordRTC Enable (checked) on Audio and Video . Disable (unchecked) the Screen . Save changes. Navigate to the Edit profile page. Verify that you will see 2 buttons: Record Audio and Record Video in the TinyMCE toolbar. Navigate to Site administration > Plugins > Text editors > TinyMCE editor > Tiny RecordRTC Enable (checked) on Audio and Screen . Disable (unchecked) the Video . Save changes. Navigate to the Edit profile page. Verify that you will see 2 buttons: Record Audio and Record screen in the TinyMCE toolbar. Navigate to Site administration > Plugins > Text editors > TinyMCE editor > Tiny RecordRTC Enable (checked) on Audio and Video and Screen . Save changes. Navigate to the Edit profile page. Verify that you will see 2 buttons: Record Audio and Video record menu in the TinyMCE toolbar. Click on the Video record menu . Verify that you will see a context menu. Verify that the context menu contains both the "Video record" button and the "Screen record" button. Screen sharing test (Note: This test needs to be tested on Chrome, Firefox and Safari) Navigate to the Edit profile page. Click on the Video record menu. Click on the "Record screen" in the context menu. Verify that a popup will appear, allowing you to select the screen you want to share. Select the screen/window you want to share. Verify that the screen you selected to share is streaming on the Record Screen dialogue. Click on the "Star recording" button When you're ready to stop recording, click the "Stop recording" button, or you can wait for the countdown to end. Click on the "Attach recording" button Click on the "Update profile" button Verify that you can play the recorded screen video.

      As a user, I want to be able to record my screen via the TinyMCE editor so that I can share what's on my screen.

      AC1: Add a new button to TinyMCE named "Screen-recording." When users click on it, they should see a dialogue similar to "Record Video," with the button text saying "Start screen recording."

      AC2: Clicking on the "Start Screen-recording" button should prompt the user to select the screen they want to share. The browser should also prompt the user for permission to use the microphone.

      AC3: After users allow/block the microphone, select the screen, and click on the "Share" button, they should be able to record the screen. The "Start screen recording" button should change to "Stop screen recording," including a time limit similar to Audio/Video recording.

      AC4: Additional Settings in Tiny RecordRTC Settings Page: To support the new screen recording button in Tiny Editor, propose adding settings to the Tiny RecordRTC settings page (via Site administration > Plugins > Text editors > TinyMCE editor > Tiny RecordRTC). The settings would include:

      • Screen time limit - config duration: default: 2 minutes for consistency with existing Audio and Video time limits
      • Screen bitrate - config text: default: 2500000
      • Video output resolution - config selection with two options1280 x 720 (16:9) and 1920 x1080 (16:9): default: 1280 x 720 (16:9)

      AC5: Update Options for Existing Recording Type in Tiny RecordRTC: Instead of adding more options to the "Recording type" drop-down:

      E.g:

      •  Audio only
      •  Video only
      •  Screen-recording only (New)
      •  Audio and video
      •  Audio, video, and screen-recording (New)

      Perhaps we should simplify it through moving to a tickbox design? It's getting quite long/complicated, and you could argue "None" should also be an option.

      Three tickboxes capture that flexibility much more simply (see below) - far better than 6+ drop-down options.

        1. allow-audio-permission.png
          allow-audio-permission.png
          66 kB
        2. image-2024-03-27-14-55-17-593.png
          image-2024-03-27-14-55-17-593.png
          114 kB
        3. MDL-81212- context menu.png
          MDL-81212- context menu.png
          206 kB
        4. MDL-81212-screen share.png
          MDL-81212-screen share.png
          628 kB
        5. MDL-81212-upgrade.png
          MDL-81212-upgrade.png
          172 kB
        6. record_button_dropdown.png
          record_button_dropdown.png
          22 kB
        7. record_button_menu_update.png
          record_button_menu_update.png
          16 kB
        8. record_button_menu.png
          record_button_menu.png
          22 kB
        9. record_button_toolbar.png
          record_button_toolbar.png
          14 kB
        10. recording-type-checkbox.png
          recording-type-checkbox.png
          7 kB

            toanlam Toan Lam
            toanlam Toan Lam
            Meirza Meirza
            Huong Nguyen Huong Nguyen
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            6 Vote for this issue
            Watchers:
            17 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 3 hours, 26 minutes
                1d 3h 26m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.