ERROR: SharedArrayBuffer is NOT supported in your browser.

[dusunax]

ISSUE _ 230604~

📌 not able to render volumetric images with Cornerstone3D

---

SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92

• https://developer.chrome.com/blog/enabling-shared-array-buffer/

[dusunax]

from cornerstonejs docs

https://www.cornerstonejs.org/docs/getting-started/scope/#browser-support

Cornerstone3D uses the HTML5 canvas element and WebGL 2.0 GPU rendering to render images which is supported by all modern browsers. Advanced features such as volume streaming which uses SharedArrayBuffer to create a shared memory is not supported in all >browsers. The following browsers are supported:

Chrome > 68
Firefox > 79
Edge > 79

If you are using an older browser, or don't have any graphics cards, your device might not be able to render volumetric images with Cornerstone3D. However, you can still render stack images using the CPU fallback that we have implemented in Cornerstone3D for such scenarios.

IMPORTANT SharedArrayBuffer requires cross-origin-isolation in the browsers. This means that you cannot use it in a browser that is not cross-origin isolated. Read More

updated chrome

에러 확인하기

[kor] what is cross-origin-isolation?🤔

cross-origin-isolation (동일 출처 정책) & Cross-origin isolation (교차 출처 격리)을 비교

Cross-origin isolation과 Same-Origin Policy는 웹 보안을 강화하기 위한 메커니즘으로, 다른 출처(Origin) 간의 상호작용을 제한하는 데 사용됩니다. 그러나 둘은 목적과 동작 방식에서 차이가 있습니다.

Same-Origin Policy (동일 출처 정책):

• Same-Origin Policy는 웹 브라우저의 보안 메커니즘 중 하나로, 웹 페이지가 동일한 출처에서 로드된 리소스와만 상호작용할 수 있도록 제한합니다.
• 출처는 프로토콜, 호스트, 포트 번호로 구성됩니다. 두 개의 리소스가 동일한 출처를 가지고 있으면 Same-Origin Policy에 따라 상호작용할 수 있습니다.
• Same-Origin Policy는 브라우저 레벨에서 적용되며, 스크립트, 쿠키, AJAX 요청 등의 웹 페이지 요소에 적용됩니다.
• Same-Origin Policy를 위반하려는 경우, 브라우저는 보안상의 이유로 접근을 차단합니다.

Cross-origin isolation (교차 출처 격리):

• Cross-origin isolation은 Same-Origin Policy를 보완하기 위한 메커니즘으로, 웹 페이지가 다른 출처에서 로드된 리소스와의 상호작용을 제한합니다.
• Cross-origin isolation은 웹 페이지가 자신의 출처에서 로드된 리소스와만 상호작용할 수 있게 하고, 다른 출처의 리소스에 대한 접근을 제한합니다.
• Cross-origin isolation은 Same-Origin Policy보다 더 강력한 보호를 제공합니다. 이를 통해 악의적인 스크립트나 공격자가 주입한 코드로부터의 보호를 강화할 수 있습니다.
• Cross-origin isolation을 활성화하려면 서버 측과 웹 페이지 측에서 설정 작업이 필요합니다. 서버에서는 Cross-Origin-Opener-Policy 헤더를 설정하고, 웹 페이지에서는 태그를 사용하여 설정합니다.
• Cross-origin isolation을 사용하는 웹 페이지는 일부 기능에 대한 액세스 권한을 얻을 수 있습니다.

SharedArrayBuffer

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer#security_requirements

const buffer = new SharedArrayBuffer(16);
console.log(buffer);

=> 에러

SharedArrayBuffer is only available to pages that are cross-origin isolated. So you need to host your own server with Cross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin headers.

레퍼런스

https://github.com/ffmpegwasm/ffmpeg.wasm/issues/263
https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer#security_requirements
https://www.cornerstonejs.org/docs/getting-started/scope/#browser-support

//server
https://github.com/ffmpegwasm/ffmpeg.wasm/issues/263#issuecomment-1148387248
https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

[dusunax]

프로젝트 개발 환경에서의 cross-origin-isolation

프로젝트 개발 환경에서 cross-origin-isolation을 구현하려면 다음 단계를 따를 수 있습니다.

서버 구성

cross-origin-isolation을 활성화하기 위해 백엔드 서버에서 Cross-Origin-Opener-Policy 헤더를 설정해야 합니다. 이 헤더는 웹 페이지가 cross-origin-isolation을 활성화하도록 지시합니다. 백엔드 서버의 구체적인 설정 방법은 사용하는 웹 서버에 따라 다를 수 있습니다.

웹 페이지 설정

cross-origin-isolation을 사용하려는 웹 페이지의 태그 내에 다음 메타 태그를 추가합니다:

<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">

위의 예시는 "same-origin"을 사용하여 웹 페이지를 자신의 출처에서 로드된 리소스와만 상호작용할 수 있도록 지시합니다. 이는 cross-origin-isolation을 활성화시키는 역할을 합니다. 만약 다른 정책을 사용하려면 "same-origin" 대신 다른 값을 사용할 수 있습니다.

SharedArrayBuffer 사용

cross-origin-isolation을 활성화한 후에는 SharedArrayBuffer를 사용할 수 있게 됩니다. SharedArrayBuffer는 여러 스레드 간에 데이터를 공유하기 위한 기능이므로, 이제부터 해당 기능을 사용하여 웹 페이지에서 원하는 작업을 수행할 수 있습니다. 위의 단계를 따라 프로젝트 개발 환경에서 cross-origin-isolation을 구현할 수 있습니다. 이를 통해 SharedArrayBuffer를 사용하여 스레드 간의 데이터 공유를 안전하게 처리할 수 있습니다.

[dusunax]

230621 업데이트

해당 작업은 Python 스크립트를 사용하는 방식으로 대체되었습니다.

• https://github.com/dusunax/dicom-and-three-js-viewer/issues/10

Python 스크립트를 사용하기

• 파일 위치
  • convertor\dicom_to_ply.py
• 소스 코드는 Trimesh 라이브러리를 사용한 코드입니다.
  • https://github.com/mikedh/trimesh
• 현재 python 명령어를 직접 입력해 파일을 변환하고 있습니다.
  • 사용자가 브라우저 환경에서 현재 python 스크립트를 사용한 기능을 작동할 수 있도록 작업 필요