Unable to access the demo web UI on the LAN

[rango886]

After deploying an application with Docker, I can access it on the host machine using 127.0.0.1:7262. However, when I try to access it from other devices on the local network using 192.168.x.x IP address, I get a "Uh oh, this browser isn’t supported." error.

[ronghanghu]

Hi @rango886, to access it from another machine, you'll also need to set the backend API address, which is specified as the API_URL env in this line https://github.com/facebookresearch/sam2/blob/c98aa6bea377d5c000cdc80197ce402dbf5304dc/demo/backend/server/app_conf.py#L14 and set to a local address http://localhost:7263 in docker-compose.yaml in https://github.com/facebookresearch/sam2/blob/c98aa6bea377d5c000cdc80197ce402dbf5304dc/docker-compose.yaml#L26

You can change it to http://192.168.x.x:7263 (i.e. the server machine's IP address running the backend), so that it can be accessed from other hosts. Hope this resolves your issue

[rango886]

Hi @rango886, to access it from another machine, you'll also need to set the backend API address, which is specified as the API_URL env in this line

https://github.com/facebookresearch/sam2/blob/c98aa6bea377d5c000cdc80197ce402dbf5304dc/demo/backend/server/app_conf.py#L14

and set to a local address http://localhost:7263 in docker-compose.yaml in https://github.com/facebookresearch/sam2/blob/c98aa6bea377d5c000cdc80197ce402dbf5304dc/docker-compose.yaml#L26

You can change it to http://192.168.x.x:7263 (i.e. the server machine's IP address running the backend), so that it can be accessed from other hosts. Hope this resolves your issue

It seems that it doesn't work. After modifying the environment variable. I found that it is displayed that the browser does not support video features. I am using the latest version of Chrome. I found on the Internet that the front end may use this browser API https://developer.mozilla.org/en-US/docs/Web/API/VideoEncoder . For this API, local access does not use https, while within the local area network, https is required for use.

[MIKE-GUO233]

Please modify Chrome settings to enable the VideoEncoder feature when accessing over HTTP.

1. Open chrome://flags/ in your chrome.
2. Add your IP address to the Insecure origins treated as secure setting and relaunch the browser.

[rango886]

Please modify Chrome settings to enable the VideoEncoder feature when accessing over HTTP.

1. Open chrome://flags/ in your chrome.
2. Add your IP address to the Insecure origins treated as secure setting and relaunch the browser.

Thank you. It can be used in the local area network now. However, it is also necessary to click this button and set the IP address of the local area network to be able to use it.

[crashr]

Hi @rango886, to access it from another machine, you'll also need to set the backend API address, which is specified as the API_URL env in this line

https://github.com/facebookresearch/sam2/blob/c98aa6bea377d5c000cdc80197ce402dbf5304dc/demo/backend/server/app_conf.py#L14

and set to a local address http://localhost:7263 in docker-compose.yaml in https://github.com/facebookresearch/sam2/blob/c98aa6bea377d5c000cdc80197ce402dbf5304dc/docker-compose.yaml#L26

You can change it to http://192.168.x.x:7263 (i.e. the server machine's IP address running the backend), so that it can be accessed from other hosts. Hope this resolves your issue

Didn't work for me. In the console I still see requests to http://localhost:7263 I worked around it with

socat TCP-LISTEN:7263,reuseaddr,fork TCP:192.168.178.56:7263

[raedle]

There are currently different places for changing the server endpoint:

Frontend

https://github.com/facebookresearch/sam2/blob/c98aa6bea377d5c000cdc80197ce402dbf5304dc/demo/frontend/src/demo/DemoConfig.tsx#L34-L35

The endpoint is also stored in local storage, which has precedence over the value in the DemoConfig.tsx. Just in case, make sure to delete the local storage key before opening the site (or use the browser's incognito mode) or change the endpoint via the settings modal shared above:

localStorage.removeItem('SAM2_SETTINGS_KEY')

Backend

https://github.com/facebookresearch/sam2/blob/c98aa6bea377d5c000cdc80197ce402dbf5304dc/docker-compose.yaml#L26

Note: there might be CORS restrictions if the page isn't loaded from localhost

[songhat]

I deployed it on a local server (not via docker), and the browser on the server can access it, but my local browser cannot access it.

[aiicore]

btw. The error This demo is not optimized for your device ... also appears when directory /data/gallery at the backend side is empty.

Backend log:

GraphQL request:2:3
1 | query DemoPageQuery {
2 |   defaultVideo {
  |   ^
3 |     path
Traceback (most recent call last):
  File "/opt/conda/lib/python3.10/site-packages/graphql/execution/execute.py", line 523, in execute_field
    result = resolve_fn(source, info, **args)
  File "/opt/conda/lib/python3.10/site-packages/strawberry/schema/schema_converter.py", line 739, in _resolver
    return _get_result_with_extensions(
  File "/opt/conda/lib/python3.10/site-packages/strawberry/schema/schema_converter.py", line 726, in extension_resolver
    return reduce(
  File "/opt/conda/lib/python3.10/site-packages/strawberry/schema/schema_converter.py", line 721, in wrapped_get_result
    return _get_result(
  File "/opt/conda/lib/python3.10/site-packages/strawberry/schema/schema_converter.py", line 678, in _get_result
    return field.get_result(
  File "/opt/conda/lib/python3.10/site-packages/strawberry/types/field.py", line 224, in get_result
    return self.base_resolver(*args, **kwargs)
  File "/opt/conda/lib/python3.10/site-packages/strawberry/types/fields/resolver.py", line 211, in __call__
    return self.wrapped_func(*args, **kwargs)
  File "/opt/sam2/server/data/schema.py", line 78, in default_video
    return next(iter(all_videos.values()))
StopIteration

[lzh82058]

Hi @songhat,I met the same problem,"This demo is not optimized for your device. Please try again on a different device with a larger screen." have you solved it?

[Dam445]

I deployed it on a local server (not via docker), and the browser on the server can access it, but my local browser cannot access it.

Hi @songhat,I met the same problem,"This demo is not optimized for your device. Please try again on a different device with a larger screen." have you solved it?

@songhat @lzh82058 . Same problem. Solution : Change code of 'SAM2DemoApp.tsx' file. Path: 'demo/frontend/src/demo/SAM2DemoApp.tsx'

import '@/assets/scss/App.scss';
import ErrorReport from '@/common/error/ErrorReport';
import RelayEnvironmentProvider from '@/graphql/RelayEnvironmentProvider';
import RootLayout from '@/layouts/RootLayout';
import SAM2DemoPage from '@/routes/DemoPageWrapper';
import PageNotFoundPage from '@/routes/PageNotFoundPage';
import useSettingsContext from '@/settings/useSettingsContext';
import {Route, Routes} from 'react-router-dom';

export default function DemoAppWrapper() {
  const {settings} = useSettingsContext();
  return (
    <RelayEnvironmentProvider
      endpoint={settings.videoAPIEndpoint}>
      <DemoApp />
    </RelayEnvironmentProvider>
  );
}

function DemoApp() {
  return (
    <>
      <Routes>
        <Route element={<RootLayout />}>
          <Route index={true} element={<SAM2DemoPage />} />
          <Route path="*" element={<PageNotFoundPage />} />
        </Route>
      </Routes>
      <ErrorReport />
    </>
  );
}

[songhat]

I deployed it on a local server (not via docker), and the browser on the server can access it, but my local browser cannot access it.

Hi @songhat,I met the same problem,"This demo is not optimized for your device. Please try again on a different device with a larger screen." have you solved it?

@songhat @lzh82058 . Same problem. Solution : Change code of 'SAM2DemoApp.tsx' file. Path: 'demo/frontend/src/demo/SAM2DemoApp.tsx'

import '@/assets/scss/App.scss';
import ErrorReport from '@/common/error/ErrorReport';
import RelayEnvironmentProvider from '@/graphql/RelayEnvironmentProvider';
import RootLayout from '@/layouts/RootLayout';
import SAM2DemoPage from '@/routes/DemoPageWrapper';
import PageNotFoundPage from '@/routes/PageNotFoundPage';
import useSettingsContext from '@/settings/useSettingsContext';
import {Route, Routes} from 'react-router-dom';

export default function DemoAppWrapper() {
  const {settings} = useSettingsContext();
  return (
    <RelayEnvironmentProvider
      endpoint={settings.videoAPIEndpoint}>
      <DemoApp />
    </RelayEnvironmentProvider>
  );
}

function DemoApp() {
  return (
    <>
      <Routes>
        <Route element={<RootLayout />}>
          <Route index={true} element={<SAM2DemoPage />} />
          <Route path="*" element={<PageNotFoundPage />} />
        </Route>
      </Routes>
      <ErrorReport />
    </>
  );
}

You use your computer and turn your browser to full screen

[Dam445]

@songhat I use a laptop with Chrome in normal mode in full screen (no with F11).

[songhat]

@songhat I use a laptop with Chrome in normal mode in full screen (no with F11).

you can check your console log in f12. see what wrong is going.

[Dam445]

@songhat I use a laptop with Chrome in normal mode in full screen (no with F11).

you can check your console log in f12. see what wrong is going.

I understood the reason. The initial code worked fine. The issue was due to the incorrect configuration of the backend on Windows at the start. When launching the frontend, I encountered this error: Well, this is embarrassing... This demo is not optimized for your device. Please try again on a different device with a larger screen.

After modifying the 'SAM2DemoApp.tsx' file to remove this error, I found the actual issue.

However, when connecting the backend correctly and then the frontend without any file modifications, there was no problem at all. In summary, it was due to having that screen width error first that I initially thought the source of my problem was the screen width of my laptop, while it was just a backend configuration issue and the screen width had nothing to do with it.