208 lines
5.4 KiB
Markdown
208 lines
5.4 KiB
Markdown
# DICOM Viewer Component
|
|
|
|
## Overview
|
|
The DICOM Viewer component is a React Native component that uses WebView to display DICOM medical imaging files. It integrates with Cornerstone.js and Cornerstone WADO Image Loader for robust DICOM file handling.
|
|
|
|
## Features
|
|
- ✅ WebView-based DICOM rendering
|
|
- ✅ Cornerstone.js integration for medical imaging
|
|
- ✅ Support for remote DICOM URLs
|
|
- ✅ Loading states and error handling
|
|
- ✅ Real-time communication with React Native
|
|
- ✅ Responsive design for mobile devices
|
|
|
|
## Components
|
|
|
|
### 1. DicomViewer
|
|
The main DICOM viewer component.
|
|
|
|
**Props:**
|
|
```typescript
|
|
interface DicomViewerProps {
|
|
dicomUrl: string; // URL to the DICOM file
|
|
onError?: (error: string) => void; // Error callback
|
|
onLoad?: () => void; // Load success callback
|
|
}
|
|
```
|
|
|
|
**Usage:**
|
|
```typescript
|
|
import { DicomViewer } from '../shared/components';
|
|
|
|
<DicomViewer
|
|
dicomUrl="https://example.com/sample.dcm"
|
|
onError={(error) => console.error('DICOM Error:', error)}
|
|
onLoad={() => console.log('DICOM loaded successfully')}
|
|
/>
|
|
```
|
|
|
|
### 2. DicomViewerTest
|
|
A test component for testing different DICOM URLs and debugging issues.
|
|
|
|
**Usage:**
|
|
```typescript
|
|
import { DicomViewerTest } from '../shared/components';
|
|
|
|
<DicomViewerTest />
|
|
```
|
|
|
|
## How It Works
|
|
|
|
### 1. WebView Setup
|
|
- Loads a local HTML file (`dicom-viewer.html`)
|
|
- Enables JavaScript and DOM storage
|
|
- Allows file access and universal access from file URLs
|
|
|
|
### 2. Library Loading
|
|
- Dynamically loads Cornerstone.js from CDN
|
|
- Loads Cornerstone WADO Image Loader
|
|
- Initializes the viewer when libraries are ready
|
|
|
|
### 3. DICOM Processing
|
|
- Receives DICOM URL from React Native via postMessage
|
|
- Uses Cornerstone to load and display the DICOM image
|
|
- Handles errors and success states
|
|
|
|
### 4. Communication
|
|
- Sends status messages back to React Native
|
|
- Reports loading, success, and error states
|
|
- Enables debugging and user feedback
|
|
|
|
## Troubleshooting
|
|
|
|
### Black Screen Issues
|
|
|
|
#### 1. Check Console Logs
|
|
Open the React Native debugger and check for:
|
|
- WebView loading errors
|
|
- JavaScript execution errors
|
|
- Network request failures
|
|
|
|
#### 2. Verify DICOM URL
|
|
- Ensure the URL is accessible from the device
|
|
- Check if the URL returns a valid DICOM file
|
|
- Verify CORS settings if loading from a different domain
|
|
|
|
#### 3. Library Loading Issues
|
|
- Check internet connectivity (libraries load from CDN)
|
|
- Verify the HTML file path is correct
|
|
- Check WebView permissions and settings
|
|
|
|
#### 4. Platform-Specific Issues
|
|
|
|
**Android:**
|
|
- Ensure `allowFileAccess` is enabled
|
|
- Check if the HTML file is in the correct assets folder
|
|
- Verify WebView permissions in AndroidManifest.xml
|
|
|
|
**iOS:**
|
|
- Check WebView configuration in Info.plist
|
|
- Ensure JavaScript is enabled
|
|
- Verify file access permissions
|
|
|
|
### Common Error Messages
|
|
|
|
#### "Failed to load DICOM viewer libraries"
|
|
- Check internet connectivity
|
|
- Verify CDN URLs are accessible
|
|
- Check WebView JavaScript settings
|
|
|
|
#### "Failed to load DICOM image"
|
|
- Verify DICOM URL is accessible
|
|
- Check if the file is a valid DICOM format
|
|
- Ensure the server supports CORS
|
|
|
|
#### "Invalid message received from app"
|
|
- Check the message format being sent
|
|
- Verify the postMessage implementation
|
|
- Check WebView message handling
|
|
|
|
## Testing
|
|
|
|
### 1. Use Sample URLs
|
|
The test component includes sample DICOM URLs that are known to work:
|
|
- Sample DICOM 1-3 from OHIF examples
|
|
|
|
### 2. Test Custom URLs
|
|
- Enter your own DICOM URLs
|
|
- Test with different file formats
|
|
- Verify error handling
|
|
|
|
### 3. Debug Mode
|
|
- Check console logs in React Native debugger
|
|
- Monitor WebView messages
|
|
- Use the test component for isolated testing
|
|
|
|
## Performance Tips
|
|
|
|
### 1. Image Optimization
|
|
- Use compressed DICOM files when possible
|
|
- Consider implementing progressive loading
|
|
- Cache frequently accessed images
|
|
|
|
### 2. Memory Management
|
|
- Dispose of WebView when not in use
|
|
- Monitor memory usage with large DICOM files
|
|
- Implement proper cleanup in useEffect
|
|
|
|
### 3. Network Optimization
|
|
- Use CDN for DICOM files when possible
|
|
- Implement retry logic for failed requests
|
|
- Consider offline caching for critical images
|
|
|
|
## Security Considerations
|
|
|
|
### 1. URL Validation
|
|
- Validate DICOM URLs before loading
|
|
- Implement URL whitelisting if needed
|
|
- Sanitize user input for custom URLs
|
|
|
|
### 2. WebView Security
|
|
- Limit WebView permissions to minimum required
|
|
- Implement proper origin whitelisting
|
|
- Monitor for malicious content
|
|
|
|
### 3. Data Privacy
|
|
- Ensure DICOM files don't contain PHI
|
|
- Implement proper data handling protocols
|
|
- Follow HIPAA compliance guidelines
|
|
|
|
## Future Enhancements
|
|
|
|
### 1. Offline Support
|
|
- Bundle Cornerstone libraries locally
|
|
- Implement offline DICOM caching
|
|
- Support for local DICOM files
|
|
|
|
### 2. Advanced Features
|
|
- Multi-planar reconstruction (MPR)
|
|
- Measurement tools
|
|
- Annotation capabilities
|
|
- 3D rendering support
|
|
|
|
### 3. Performance Improvements
|
|
- WebAssembly integration
|
|
- GPU acceleration
|
|
- Progressive image loading
|
|
- Background processing
|
|
|
|
## Support
|
|
|
|
For issues and questions:
|
|
1. Check this README for common solutions
|
|
2. Review console logs and error messages
|
|
3. Test with sample URLs first
|
|
4. Verify WebView configuration
|
|
5. Check platform-specific requirements
|
|
|
|
## Dependencies
|
|
|
|
- `react-native-webview`: WebView component
|
|
- `cornerstone-core`: Medical imaging library
|
|
- `cornerstone-wado-image-loader`: DICOM file loader
|
|
|
|
## License
|
|
|
|
Design & Developed by Tech4Biz Solutions
|
|
Copyright (c) Spurrin Innovations. All rights reserved.
|