Fix Chrome 92 WebMediaPlayer issue (#562)

* Fix Chrome 92 WebMediaPlayer issue

* Fix linter issue

Author: timmydoza

package-lock.json

@@ -39,7 +39,7 @@
     "strip-color": "^0.1.0",
     "ts-node": "^9.1.1",
     "twilio": "^3.57.0",
-    "twilio-video": "^2.14.0",
+    "twilio-video": "^2.15.3",
     "typescript": "^3.8.3"
   },
   "devDependencies": {

package.json

@@ -31,6 +31,13 @@ describe('the AudioTrack component', () => {
     expect(document.querySelector('audio')).toBe(null);
   });
 
+  it('should set the audio elements srcObject to null when the component unmounts', () => {
+    const { unmount } = render(<AudioTrack track={mockTrack} />);
+    const audioElement = document.querySelector('audio')!;
+    unmount();
+    expect(audioElement.srcObject).toBe(null);
+  });
+
   describe('with an activeSinkId', () => {
     it('should set the sinkId when the component mounts', () => {
       mockUseAppState.mockImplementationOnce(() => ({ activeSinkId: 'mock-sink-id' }));

src/components/AudioTrack/AudioTrack.test.tsx

@@ -14,7 +14,14 @@ export default function AudioTrack({ track }: AudioTrackProps) {
     audioEl.current = track.attach();
     audioEl.current.setAttribute('data-cy-audio-track-name', track.name);
     document.body.appendChild(audioEl.current);
-    return () => track.detach().forEach(el => el.remove());
+    return () =>
+      track.detach().forEach(el => {
+        el.remove();
+
+        // This addresses a Chrome issue where the number of WebMediaPlayers is limited.
+        // See: https://github.com/twilio/twilio-video.js/issues/1528
+        el.srcObject = null;
+      });
   }, [track]);
 
   useEffect(() => {

src/components/AudioTrack/AudioTrack.tsx

@@ -52,6 +52,13 @@ describe('the VideoTrack component', () => {
     expect(mockTrack.detach).toHaveBeenCalledWith(expect.any(window.HTMLVideoElement));
   });
 
+  it('should set the video elements srcObject to null when the component unmounts', () => {
+    const { unmount, container } = render(<VideoTrack track={mockTrack} />);
+    const videoEl = container.querySelector('video')!;
+    unmount();
+    expect(videoEl.srcObject).toBe(null);
+  });
+
   it('should flip the video horizontally if the track is local', () => {
     const { container } = render(<VideoTrack track={mockTrack} isLocal />);
     expect(container.querySelector('video')!.style.transform).toEqual('rotateY(180deg)');

src/components/VideoTrack/VideoTrack.test.tsx

@@ -31,6 +31,11 @@ export default function VideoTrack({ track, isLocal, priority }: VideoTrackProps
     track.attach(el);
     return () => {
       track.detach(el);
+
+      // This addresses a Chrome issue where the number of WebMediaPlayers is limited.
+      // See: https://github.com/twilio/twilio-video.js/issues/1528
+      el.srcObject = null;
+
       if (track.setPriority && priority) {
         // Passing `null` to setPriority will set the track's priority to that which it was published with.
         track.setPriority(null);