Quote from luishp on January 22, 2023, 7:36 pm

@fkapnist although FabricJS plugin is mainly for image manipulation, you can use JavaScript to include video files (click here for a sample). I have not seen any chroma key sample using the original FabricJS JavaScript library.
Anyway, note that you can easily import ZimJS into VisualNEO Web and use all of its capabilities.
That's one of the libraries I would like to include in a plugin but it would be a huge effort.

Quote from fkapnist on January 22, 2023, 8:16 pm

Quote from luishp on January 22, 2023, 7:36 pm

@fkapnist although FabricJS plugin is mainly for image manipulation, you can use JavaScript to include video files (click here for a sample). I have not seen any chroma key sample using the original FabricJS JavaScript library.
Anyway, note that you can easily import ZimJS into VisualNEO Web and use all of its capabilities.
That's one of the libraries I would like to include in a plugin but it would be a huge effort.

I want to overlay text on an image (or video) but the Fabric controls only allow for headlines and not for entire paragraph overlays. How do I create line breaks ( \n or BR) in Fabric?

Quote from fkapnist on January 22, 2023, 8:34 pm

 

@luishp

"I have not seen any chroma key sample using the original FabricJS JavaScript library."

---

Some samples on the fabricjs home page Fabric.js Javascript Canvas Library (fabricjs.com) do appear to use chroma key. If you drag the image of the bug (or the robot) onto the picture of a black and white paragraph just above it, the bug will float on top with a transparent background, which is exactly what I am looking for. But what is to code for this?

 

Quote from fkapnist on January 22, 2023, 8:55 pm

I found this on Stackoverflow :

"I'm not sure if I'm understanding you correctly, but you can just load in a .png with transparency in it and it'll show the canvas background in the transparent parts."

https://stackoverflow.com/questions/37752806/fabricjs-background-with-transparent-parts

So a video clip with an alpha channel will also show the canvas background in its transparent parts?

I'll try and see if I can get it to work....

 

 

 

Quote from fkapnist on January 22, 2023, 9:04 pm

I can assign transparency to a color when I save a gif or png file, but I don't know how to re-assign transparency to a different color within the fabric program. Maybe it is not possible?

Quote from luishp on January 22, 2023, 9:37 pm

@fkapnist usually raster images use three values to describe each pixel: Red, Green and Blue. Each one with a value that ranges from 0 to 255. When you save a PNG with transparency it includes an additional value for the "Alpha channel" for each pixel. It stores pixel opacity and also ranges from 0 to 255. GIF images doesn't have a real Alpha Channel. In fact they can only show up to 255 different colors and one transparent color. That's the reason the transparency seems so pixelated in the borders. As far as I know you can reassign the transparency color once the GIF image has been saved.

Quote from fkapnist on January 22, 2023, 9:52 pm

RE: "you can use JavaScript to include video files (click here for a sample). "

 

The sample is a video of a house cat. But where in the code is the  actual file name of the video specified? I can't find it... How do I include my video?

Quote from luishp on January 22, 2023, 10:06 pm

@fkapnist take a look at this line:

var video1El = document.getElementById('video1');

They are getting the video file from a HTML <video> element with id "video1". This element is included whenever you use CreateVideoPlayer command.
It just add a "Video" word to the Container name. For example if you use this command:

CreateVideoPlayer "Container1" "D:\videos\myvideo.mp4" true false false false

Your <video> id will be "Container1Video".
You can place your Contaniner out of sight or make it invisible if you want.

 

 

Quote from fkapnist on January 23, 2023, 10:03 am

Quote from luishp on January 22, 2023, 10:06 pm

@fkapnist take a look at this line:

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

var video1El = document.getElementById('video1');

var video1El = document.getElementById('video1');

var video1El = document.getElementById('video1');

They are getting the video file from a HTML <video> element with id "video1". This element is included whenever you use CreateVideoPlayer command.
It just add a "Video" word to the Container name. For example if you use this command:

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

CreateVideoPlayer "Container1" "D:\videos\myvideo.mp4" true false false false

CreateVideoPlayer "Container1" "D:\videos\myvideo.mp4" true false false false

CreateVideoPlayer "Container1" "D:\videos\myvideo.mp4" true false false false

Your <video> id will be "Container1Video".
You can place your Contaniner out of sight or make it invisible if you want.

 

 

Thanks!

Quote from fkapnist on January 23, 2023, 11:08 am

Where is the source code for this example?

https://visualneo.com/tutorials/videoplayer/#!/NewPage

I added a Load Video button and specified the file I want it to load,

CreateVideoPlayer "Container1" "D:\videos\myvideo.mp4" true false false false

But when I click it still asks me to load an image file and then nothing happens....

What am I doing wrong?

 I can't find any VisualNEO source code examples for loading and playing a video from the user's local drive. There are only examples for YouTube and Vimeo...

 

Quote from fkapnist on January 23, 2023, 11:51 am

My mistake.

I used a FileInput element instead of a normal button.

However, if I embed the new video container into Container1 nothing works. And I really don't understand how the fabric javascript adds an extra word to the Container name? I am quite confused there...

Quote from fkapnist on January 23, 2023, 1:16 pm

To make a long story short, here is what I want to do with fabric canvas (see images):

I want users to be able to create digital cards with overlays. And with video if possible

(I don't think fabric canvas can save videos, so I will look for another solution using HTML layers)...

 

.

Quote from fkapnist on January 23, 2023, 7:49 pm

Quote from luishp on January 22, 2023, 7:36 pm

@fkapnist although FabricJS plugin is mainly for image manipulation, you can use JavaScript to include video files (click here for a sample). I have not seen any chroma key sample using the original FabricJS JavaScript library.
Anyway, note that you can easily import ZimJS into VisualNEO Web and use all of its capabilities.
That's one of the libraries I would like to include in a plugin but it would be a huge effort.

Maybe instead of a library plugin you could include the <canvas> tag in your program toolbar, next to Container, Form, iFrame, etc.

Users of VisualNEO Web might then be able to create their own canvas framework, like Zim or Createjs.

.

Quote from luishp on January 23, 2023, 11:07 pm

Maybe instead of a library plugin you could include the <canvas> tag in your program toolbar, next to Container, Form, iFrame, etc.
Users of VisualNEO Web might then be able to create their own canvas framework, like Zim or Createjs.

You can add it manually or using neoScript or JavaScript code very easily:

1. Add a Container object
2. Right click the Container
3. Click "Edit HTML property"
4. Include your <canvas> HTML element and desired attributes.

You can do the same with neoScript using SetObjectHTML command.
FabricJS plugin uses that technique but by using JavaScript.
If you are interested I can share with you the plugin source code.

Regards.