Https://github.com/daily-co/daily-react/issues/new?template=bug_report.md

by ADMIN 74 views

Daily.co Video Track Unmount Issue in macOS Safari

Introduction

The useVideoTrack hook from the Daily.co library is used to manage video tracks in React applications. However, a bug has been identified in macOS Safari where the camera light remains on after unmounting a React component that uses the useVideoTrack hook. This issue is not present in Chrome on Windows or ChromeOS. In this article, we will delve into the expected behavior, describe the bug, and provide steps to reproduce the issue.

Expected Behavior

When unmounting a React component that uses the useVideoTrack hook from the Daily.co library to manage a video track, the camera and microphone resources should be fully released, and the camera light should turn off. This is the expected behavior, and it is essential to ensure that the resources are properly cleaned up to prevent any potential issues.

Describe the Bug

In macOS Safari, after unmounting a React component that uses the useVideoTrack hook (after calling daily.leave() and daily.destroy()), the camera light remains on, indicating that the camera resource is not fully released. The useVideoTrack hook reports the track state as isOff: false and state: "playable", even though the underlying MediaStreamTrack has enabled: false, muted: false, and readyState: "ended". This issue does not occur in Chrome on Windows or ChromeOS, where the camera light turns off as expected.

Steps to Reproduce

To reproduce this issue, follow these steps:

  1. Set up a React application using the Daily.co library (@daily-co/daily-js) to join a video call.
  2. Use the useVideoTrack hook to manage the local participant’s video track in a React component.
  3. Join a Daily.co call using daily.join({ url: 'YOUR_ROOM_URL' }) and display the local video stream in a <video> element.
  4. Unmount the component (e.g., by navigating away), triggering cleanup in useEffect, which includes:
    • Stopping tracks (track.stop()).
    • Clearing video.srcObject.
    • Calling daily.leave() followed by daily.destroy().
  5. Check the track state using useVideoTrack on unmount, which shows isOff: false and state: "playable", despite the track having readyState: "ended".
  6. Observe that in macOS Safari, the camera light remains on, and the camera resource is not released.

Screenshots

The following screenshots demonstrate the issue:

  • Track State on Unmount: Screenshot showing the useVideoTrack hook output with isOff: false, state: "playable", and the MediaStreamTrack details: enabled: false, muted: false, readyState: "ended".
  • Safari Web Inspector (WebRTC Internals): Screenshot showing no active MediaStreamTrack objects, but the camera light remains on, indicating a potential mismatch in state management.

System Information

The issue has been observed on the following system:

  • Device: MacBook Pro
  • OS, version: macOS Sonoma 13.7.2
  • Browser, version: Safari 18.2

Additional Context

The useVideoTrack hook is used in a React component to track the unmount state. Cleanup on unmount includes stopping tracks, clearing video.srcObject, and calling daily.leave() followed by daily.destroy(). The useVideoTrack hook reports isOff: false and state: "playable", which seems incorrect since the underlying track is ended. This mismatch might prevent Safari from fully releasing the camera resource, as Safari’s WebRTC implementation is stricter than Chrome’s.

Related Discussions

The issue has been discussed in the following related discussions:

  • Stack Overflow: Web camera light stays on after stream is stopped: This discussion on Stack Overflow highlights a similar issue where the camera light remains on after stopping the stream.
  • webrtchacks on srcObject cleanup: This article on webrtchacks provides information on srcObject cleanup, which is relevant to the issue at hand.
  • Daily.js GitHub issues: The Daily.js GitHub issues, including Issue #155, provide additional context and similar issues that have been reported.

Conclusion

The useVideoTrack hook from the Daily.co library is used to manage video tracks in React applications. However, a bug has been identified in macOS Safari where the camera light remains on after unmounting a React component that uses the useVideoTrack hook. This issue is not present in Chrome on Windows or ChromeOS. To reproduce the issue, follow the steps outlined above. The issue has been discussed in related discussions, and additional context has been provided to help resolve the issue.
Daily.co Video Track Unmount Issue in macOS Safari: Q&A

Introduction

In our previous article, we discussed the issue of the camera light remaining on after unmounting a React component that uses the useVideoTrack hook from the Daily.co library in macOS Safari. In this article, we will provide a Q&A section to help answer common questions and provide additional context to help resolve the issue.

Q: What is the expected behavior when unmounting a React component that uses the useVideoTrack hook?

A: The expected behavior is that the camera and microphone resources should be fully released, and the camera light should turn off.

Q: What is the current behavior in macOS Safari?

A: In macOS Safari, after unmounting a React component that uses the useVideoTrack hook (after calling daily.leave() and daily.destroy()), the camera light remains on, indicating that the camera resource is not fully released.

Q: Why is this issue not present in Chrome on Windows or ChromeOS?

A: The issue is not present in Chrome on Windows or ChromeOS because their WebRTC implementations are different from Safari's. Chrome's implementation is more lenient, and it does not require the camera resource to be fully released before turning off the camera light.

Q: What are the steps to reproduce the issue?

A: To reproduce the issue, follow these steps:

  1. Set up a React application using the Daily.co library (@daily-co/daily-js) to join a video call.
  2. Use the useVideoTrack hook to manage the local participant’s video track in a React component.
  3. Join a Daily.co call using daily.join({ url: 'YOUR_ROOM_URL' }) and display the local video stream in a <video> element.
  4. Unmount the component (e.g., by navigating away), triggering cleanup in useEffect, which includes:
    • Stopping tracks (track.stop()).
    • Clearing video.srcObject.
    • Calling daily.leave() followed by daily.destroy().
  5. Check the track state using useVideoTrack on unmount, which shows isOff: false and state: "playable", despite the track having readyState: "ended".
  6. Observe that in macOS Safari, the camera light remains on, and the camera resource is not released.

Q: What are the system requirements to reproduce the issue?

A: The issue has been observed on the following system:

  • Device: MacBook Pro
  • OS, version: macOS Sonoma 13.7.2
  • Browser, version: Safari 18.2

Q: What are the possible causes of the issue?

A: The possible causes of the issue include:

  • Mismatch in state management: The useVideoTrack hook reports isOff: false and state: "playable", which seems incorrect since the underlying track is ended. This mismatch might prevent Safari from fully releasing the camera resource.
  • Stricter WebRTC implementation: Safari's WebRTC implementation is stricter than Chrome's, which might cause the issue.

Q: How can I troubleshoot the issue?

A: To troubleshoot the issue, follow these steps:

  1. Check the track state using useVideoTrack on unmount.
  2. Verify that the camera resource is fully released by checking the MediaStreamTrack details.
  3. Check the Safari Web Inspector (WebRTC Internals) for any active MediaStreamTrack objects.
  4. Clear browser cache and ensure the latest Daily.js version.

Q: What are the related discussions that can help resolve the issue?

A: The issue has been discussed in the following related discussions:

  • Stack Overflow: Web camera light stays on after stream is stopped: This discussion on Stack Overflow highlights a similar issue where the camera light remains on after stopping the stream.
  • webrtchacks on srcObject cleanup: This article on webrtchacks provides information on srcObject cleanup, which is relevant to the issue at hand.
  • Daily.js GitHub issues: The Daily.js GitHub issues, including Issue #155, provide additional context and similar issues that have been reported.

Conclusion

The useVideoTrack hook from the Daily.co library is used to manage video tracks in React applications. However, a bug has been identified in macOS Safari where the camera light remains on after unmounting a React component that uses the useVideoTrack hook. This issue is not present in Chrome on Windows or ChromeOS. To reproduce the issue, follow the steps outlined above. The issue has been discussed in related discussions, and additional context has been provided to help resolve the issue.