Add canvas + audio recording feature with Start/Stop buttons

[Sauve9119]

fix #1673

This PR adds a new feature to record the Music Blocks canvas animation along with audio as a video (.webm). This helps users, especially students, to export their mouse artwork and music performance as a downloadable video file.

What was added?

• Added two new buttons:
  • 🎥 "Start Recording"
  • ⏹️ "Stop Recording"
• Used canvas.captureStream() and audioContext.destination.stream to create a combined media stream.
• Used MediaRecorder to capture and save the output as a downloadable .webm video file.

Files Modified

• js/activity.js

Motivation

This solves [Issue #1673 ] which requested the ability to record the canvas drawing and music together into a video format (e.g., MP4/WebM) for easy sharing or documentation.

Demo

You can test the feature by:

1. Opening Music Blocks in browser (http://127.0.0.1:3000/)
2. Creating some music + mouse animations
3. Clicking "Start Recording", then "Stop Recording"
4. A .webm file will automatically download

---

Let me know if any improvements are needed. I'm happy to make further changes.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

This pull request has been open for more than 60 days without any activity. It will be closed in 3 days unless the stale label is removed or commented on.

[Sauve9119]

Maintainers, Please review the Pull Request. And remove it from the stale label

[github-actions]

This pull request has been open for more than 60 days without any activity. It will be closed in 3 days unless the stale label is removed or commented on.

[pikurasa]

We already have a record button, we do not need this one.

@walterbender this is what this PR looks like, when run (see upper-right).

I'm closing this.