Re: [mediacapture-handle] What does capturehandlechange event do when cross documentation navigation happen? (#74)

@eladalon1983 I checked the spec, it is helpful but not fully answer my question. Our use case is that we want to send the URL of the captured website via `handle` so we can do some URL restriction, if URL is not allowed we want to stop the content share. We also check the existence of the signed `captureHandle` to tell if it's an allowed origin or an external origin.

My problem is that when refreshing the same page, it's a cross-document navigation and the captureHandle is set to `null` by browser (my guess) ,even if I manually `setCaptureHandleConfig` in the <head> of the .html file. Could you help if you know any way to avoid this `null` value on page refresh?

Implementation:
```js
// Captured side, this is in a .js file that is imported via <script> in <header> of the .html file
(function () {
  if (!('setCaptureHandleConfig' in navigator.mediaDevices)) {
    console.log('setCaptureHandleConfig not supported');
    return;
  }

  if (!('navigation' in window)) {
    console.log('navigation not supported');
    return;
  }

  const setCaptureHandleConfig = (url: URL) => {
    const { origin, pathname } = url;
    // @ts-ignore
    navigator.mediaDevices.setCaptureHandleConfig({
      handle: JSON.stringify({ identifier: 'signature-xxxx', url: origin + pathname }),
      exposeOrigin: true,
      permittedOrigins: [origin],
    });
  };

  const url = new URL(window.location.href);
  setCaptureHandleConfig(url);

  const handleNavigate = (event: { destination: { url: string } }) => {
    const url = new URL(event.destination.url);
    setCaptureHandleConfig(url);
  };

  // @ts-ignore
  window.navigation.addEventListener('navigate', handleNavigate);

  window.addEventListener('unload', () => {
    // @ts-ignore
    window.navigation.removeEventListener('navigate', handleNavigate);
  });
})();
```

```js
// Capturing side
stream = await navigator.mediaDevices.getDisplayMedia(constraints);
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
// Initial URL upon start screen capture
const { url } = JSON.parse(captureHandle.handle);

if (isUrlAllowed(url)) {
  videoTrack.addEventListener('capturehandlechange', (event) => {
    const captureHandle = event.target.getCaptureHandle();
    // Latest URL on navigation change
    const { url } = JSON.parse(captureHandle.handle);
    if (!isUrlAllowed(url)) {
      // Stop the screen capture
      // My problem is that when refreshing a allowed URL/origin, the captureHandle will first be `null`
    }
  });
  // Start the screen capture
} else {
  // Do not start the screen capture
}
```


-- 
GitHub Notification of comment by xuesichao
Please view or discuss this issue at https://github.com/w3c/mediacapture-handle/issues/74#issuecomment-2158969431 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 10 June 2024 17:56:35 UTC