Announcing TiddlyTools $action-camera widget

[EricShulman]

It turns out the coding work was much simpler than I first thought! I guess its because my existing code was so well written !

It only took a few small changes to existing pieces of code to add a “zoom” range slider, initialize it and handle “change” events, and always display the canvas as the “preview” element so the zoom effect can be seen before taking a snapshot.

Note that while the zoom level as well as the previously-existing “effects” select list options (i.e., grayscale, blur, etc.) are shown in the canvas preview element, they are only applied when saving still image snapshots, but not when saving video streams. This is due to a limitation of the browser’s media device “recorder” object, which directly captures the content from the media stream object, rather than the rendered canvas object.

You can get the latest update here: TiddlyTools/Widgets/action-camera.js

Give it a try and let me know what you think…

enjoy,
-e

[Zheng_Bangyou]

Thanks @EricShulman. Perfectly it is working for me.

[EricShulman]

IMPORTANT NOTICE:

TiddlyTools/Widgets/action-camera.js has been renamed to TiddlyTools/Camera/action-camera.js, and three new camera-related add-ons have been published:

• TiddlyTools/Camera/EditorToolbar/Camera and TiddlyTools/Camera/EditorToolbar/Voice
  provide two new edit-mode toolbar buttons – “take a photo” and “record sound” – to capture snapshots (webp), video (webm), and audio (mp3) streams using your system’s camera and microphone devices and automatically transclude references to the resulting media tiddlers into the current tiddler’s content
• TiddlyTools/Camera/Stylesheet
  lets you customize the .tt-action-camera CSS class to adjust the appearance of the TiddlyTools Camera interface. The primary purpose of this stylesheet is to set the background color of the camera interface to match the page-background color as defined by your current $:/palette (selected via the $:/ControlPanel > Appearance > Palette controls).

To get all TiddlyTools Camera add-on components, please visit TiddlyTools/Camera/Info.

Then either:

• drag-and-drop the “There are 5 program tiddlers” link directly into your TiddlyWiki to import all 5 tiddlers.
  or
• click on the “There are 5 program tiddlers” link to download a .JSON file that you can later drag-and-drop to import into your TiddlyWiki.

enjoy,
-e

[Zheng_Bangyou]

@EricShulman Thanks again for this great tool. It perfectly works on my laptop, but takes a squeezed image on my phone. See an example below which should be a square paper.

My phone is OPPO Find X5. The back camara should be 4:3 in the photo mode, 16:9 in the video mode.

I have tested the size parameter with no value, 4:3 large, 16:9 large, custom which have the same behaviour.

Any ideas to fix it?

[Mohammad]

@EricShulman

TiddlyTools/Camera/EditorToolbar/Camera and TiddlyTools/Camera/EditorToolbar/Voice
provide two new edit-mode toolbar buttons – “take a photo” and “record sound” – to capture snapshots (webp), video (webm), and audio (mp3) streams using your system’s camera and microphone devices and automatically transclude references to the resulting media tiddlers into the current tiddler’s content

This is really amazing! Specially for taking notes on the go!

[EricShulman]

When you take the picture, what is your phone’s orientation, horizontal (landscape), or vertical (portrait)?

Also, what happens if you set size="1x1 large"?

-e

[Zheng_Bangyou]

Thanks @EricShulman.

I have tested three cameras,

• A: laptop integrated camera, Dell Precision 5490
• B: external logitech camera connected to laptop through USB-C monitor
• C: mobile back camera

and four size options

• 4:3
• 16:9
• 1:1
• custom

Size	laptop integrated camera	external logitech camera	mobile back camera
4:3	squeezed (2)	OK	Fatter in portrait (1), squeezed in landscape (2)
16:9	OK	Fatter in portrait (1)	Fatter in portrait (1), squeezed in landscape (2)
1:1	squeezed (2)	OK	OK
custom	OK	Normal image shape with small window and image size	Fatter in landscape (1), squeezed in portrait (2)

• Number in the brackets is the example below.

It seems

• A: integrate camera is 16:9 ratio
• B: Logitec camera is 4:3 ratio (Not sure why it supports 1:1 ratio)
• C: Mobile camera is 1:1 ratio
• Custom Size is working for Windows 11, but not on mobile.

System information

• My laptop is Dell Precision 5490 with windows 11 13H2 using Chrome 130.0.6723.70
• My mobile is OPPO Find X5 with Android 14 using Chrome 130.0.6723.73

Just let me know if you need more information.

Example 1:

Example 2: