Set unique key for each video

[MEnesDeniz]

https://github.com/TUMFARSynchrony/experimental-hub/issues/200

Overview

This PR updates the VideoCanvas component to assign unique keys to video elements based on their stream IDs, ensuring more reliable rendering and updates within React's virtual DOM.

Changes

The key assignment for video components within the VideoCanvas was modified to use the unique id property from each media stream, addressing issues with component re-rendering when streams change or update.

How to test?

Running a session where multiple participants join or leave, checking if video streams maintain consistent rendering without any muted participants video or error.

Checklist

• [ x ] Correct base branch was selected (usually development)
• [ x ] development was merged into this branch and potential conflicts resolved
• [ x ] Issues which were solved are linked. Be sure to make that manually because Closes/Fixes keywords only work when base branch is main.
• [x ] Terminology is consistent with the rest of the codebase
• [ x ] Reviewers are assigned
• [ ] Optional: Wiki pages were updated to reflect the changes (list changed pages above)

[gulbikeimge]

Looks great, I haven't faced a black screen issue while testing!