railbird/react-native-vision-camera
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: Make images responsive

Browse Source
This commit is contained in:
Marc Rousavy
2023-09-27 12:21:34 +02:00
parent bb7549bc01
commit eec9a3eb6e
5 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/guides/DEVICES.mdx
View File

@@ -159,7 +159,7 @@ const device = getCameraDevice(devices, 'back', {
This will try to find a [`CameraDevice`](/docs/api/interfaces/CameraDevice) that consists of all three physical Camera Devices, or the next best match (e.g. "Dual-Camera", or just a single wide-angle-camera) if not found. With the "Triple-Camera", we can now zoom out to a wider field of view:
<div align="center">
<img src="/img/multi-camera.gif" width="55%" />
<img class="doc-image" src="/img/multi-camera.gif" />
</div>
If you want to do the filtering/sorting fully yourself, you can also just get all devices, then implement your own filter:

6
docs/docs/guides/HDR.mdx
View File

@@ -13,8 +13,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
HDR ("High Dynamic Range") is a capture mode that captures colors in a much wider range, allowing for much better details and brighter colors.
<div align="center">
<img src="/img/sdr_comparison.png" width="51%" />
<img src="/img/hdr_comparison.png" width="51%" />
<img class="doc-image" src="/img/sdr_comparison.png" />
<img class="doc-image" src="/img/hdr_comparison.png" />
</div>
### Photo HDR
@@ -22,7 +22,7 @@ HDR ("High Dynamic Range") is a capture mode that captures colors in a much wide
Photo HDR is accomplished by running three captures instead of one, an underexposed photo, a normal photo, and an overexposed photo. Then, these images are fused together to create darker darks and brighter brights.
<div align="center">
<img src="/img/hdr_photo_demo.webp" width="65%" />
<img class="doc-image" src="/img/hdr_photo_demo.webp" />
</div>
### Video HDR

2
docs/docs/guides/STABILIZATION.mdx
View File

@@ -13,7 +13,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
Video Stabilization is an algorithm that stabilizes the recorded video to smoothen any jitters, shaking, or abrupt movements from the user's camera movement.
<div align="center">
<img src="/img/action_mode_demo.gif" width="65%" />
<img class="doc-image" src="/img/action_mode_demo.gif" />
</div>
There are multiple different approaches to Video Stabilization, either software- or hardware-based. Video Stabilization always crops the image to a smaller view area so it has room to shift the image around, so expect a "zoomed-in" effect. Also, since Video Stabilization is a complex algorithm, enabling it will increase the time the Camera takes to initialize.

2
docs/docs/guides/ZOOMING.mdx
View File

@@ -30,7 +30,7 @@ A Camera device has different minimum, maximum and neutral zoom values. Those va
* The `neutralZoom` value is often `1`, but can be larger than `1` for devices with "fish-eye" (ultra-wide-angle) cameras. In those cases, the user expects to be at whatever zoom value `neutralZoom` is (e.g. `2`) per default, and if he tries to zoom out even more, he goes to `minZoom` (`1`), which switches over to the "fish-eye" (ultra-wide-angle) camera as seen in this GIF:
<div align="center">
<img src="/img/multi-camera.gif" width="55%" />
<img class="doc-image" src="/img/multi-camera.gif" />
</div>
The Camera's `zoom` property expects values to be in the same "factor" scale as the `minZoom`, `neutralZoom` and `maxZoom` values - so if you pass `zoom={device.minZoom}` it is at the minimum available zoom, where as if you pass `zoom={device.maxZoom}` the maximum zoom value possible is zoomed in. It is recommended that you start at `device.neutralZoom` and let the user manually zoom out to the fish-eye camera on demand (if available).