railbird/react-native-vision-camera
9
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
Show Stats 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: 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"> <div align="center">
<img src="/img/multi-camera.gif" width="55%" /> <img class="doc-image" src="/img/multi-camera.gif" />
</div> </div>
If you want to do the filtering/sorting fully yourself, you can also just get all devices, then implement your own filter: 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. 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"> <div align="center">
<img src="/img/sdr_comparison.png" width="51%" /> <img class="doc-image" src="/img/sdr_comparison.png" />
<img src="/img/hdr_comparison.png" width="51%" /> <img class="doc-image" src="/img/hdr_comparison.png" />
</div> </div>
### Photo HDR ### 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. 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"> <div align="center">
<img src="/img/hdr_photo_demo.webp" width="65%" /> <img class="doc-image" src="/img/hdr_photo_demo.webp" />
</div> </div>
### Video HDR ### 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. 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"> <div align="center">
<img src="/img/action_mode_demo.gif" width="65%" /> <img class="doc-image" src="/img/action_mode_demo.gif" />
</div> </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. 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: * 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"> <div align="center">
<img src="/img/multi-camera.gif" width="55%" /> <img class="doc-image" src="/img/multi-camera.gif" />
</div> </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). 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).

26
docs/src/css/custom.css
View File

@ -19,15 +19,35 @@
--docusaurus-highlighted-code-line-bg: rgb(61, 63, 67); --docusaurus-highlighted-code-line-bg: rgb(61, 63, 67);
} }
img { /* Images inside the docs that are centered/inside text */
.doc-image {
border-radius: 15px; border-radius: 15px;
max-width: 55%;
max-height: 30vh;
}
@media (max-width: 600px) {
.doc-image {
max-width: 80%;
max-height: 50vh;
}
}
@media (min-width: 600px) and (max-width: 997px) {
.doc-image {
max-width: 55%;
max-height: 50vh;
}
}
@media (min-width: 997px) and (max-width: 1145px) {
.doc-image {
max-width: 80%;
max-height: 30vh;
}
} }
/* align image to the right */ /* align image to the right */
.image-container { .image-container {
float: right; float: right;
} }
/* mobile screen; align center */ /* mobile screen; align center */
@media (max-width: 600px) { @media (max-width: 600px) {
.image-container { .image-container {
@ -35,14 +55,12 @@ img {
text-align: center; text-align: center;
} }
} }
/* wider screen; align right again */ /* wider screen; align right again */
@media (min-width: 600px) and (max-width: 997px) { @media (min-width: 600px) and (max-width: 997px) {
.image-container { .image-container {
float: right; float: right;
} }
} }
/* even wider screen but with sidebars; align center cuz we dont have enough space for right */ /* even wider screen but with sidebars; align center cuz we dont have enough space for right */
@media (min-width: 997px) and (max-width: 1145px) { @media (min-width: 997px) and (max-width: 1145px) {
.image-container { .image-container {