I'm looking to implement a video editing feature like that of featured here https://clideo.com/video-editor.
I'm planning to use Vue 3 with a Laravel backend, but is there an ideal framework to use for a web application like this, or should I just try to reverse engineer/hack my way to a working implementation?
Sorry if this is the wrong place to ask, I just haven't been able to find an answer.
Thanks
Video editor consist of two important parts
1)A Timeline that represents sequence.
2)A Output window to show output of timeline.
-Clideo uses div and html elements positioning to generate timeline but a better alternative is to use Canvas and draw a timeline on it just like in veed.io
-For video output again you have to use canvas and webGL to draw each and every frame one by one.
you wont be able to edit video on backend and send edited multimedia for each change user makes you need to find a way to do in on client using webcodec.
For the choice of framework if you are having canvas and webGL do all the rendering of timeline and output then it dosent matters you will spend more time with drawing functions.
Almost every video editor has a timeline. But only in some of it (https://wave.video/tools/video-marketing/promo-video-maker) is divided into several ranges. An additional advantage will be the grid on the line. You can also easily manage layers and frames.
Related
Im trying to experiment with product design using javascript, in which the user can select a shirt, mug, box, book for example, and insert a text and/or an image and move it or rotate it or scale it, then they can apply the changes, and a 3D mockup will be generated.
Is this possible using a Javascript library such as Three.js and/or jQuery, or will i need to actually use another technology other than JS, for example WebGL directly ?
I have not dabbled with javascript before as im usually a backend PHP developer, but this idea has caught my attention and i couldnt find enough resources online about it.
Yes this should definitely be doable with three.js
Worst case you can just manipulate a plane with a texture around the product, however I suspect a better way would be manipulating a texture. This would be quite easy if you don't want to manipulate the image in real-time on the 3d mockup, but likely also simple enough to do in real-time.
I know this question is not a good one but I have stumbled upon on website called Tradingview.com which has awesome charts. I was interested so got into the html code of the website and I discovered that div which should have contained desired chart was empty. I get that the chart is generated by JavaScript but I am interested how it is possible to draw something like that without any html elements and If it is possible could you tell me what "library" do they use?
Here is the link to Apple Stock Chart
https://www.tradingview.com/chart/BRuYnW6t/
Basically Javascript literally Draw chart inside that div on local end.
like JS will make rectangular shapes. circles, lines and everything.
for details please visit this site.
https://www.w3schools.com/tags/ref_canvas.asp
drawing div will be empty but shapes and everything in it will be there because of JS.
Looks like tradingview has an API for their library available upon request. I would also encourage you check out chart.js, a popular solution for implementing charts in javascript.
Normally drawing in HTML is done with canvas (WebGL for 3D drawings) or SVG. Additionally, you may use plugins like Flash ActionScript and Java Applets. For charts, a superb library would be Google Charts.
If you inspect carefully enough (F12), you will realize TradingView actually uses canvas for the drawing.
I've tried to ask this question before, but I failed completely there. After useful input, I decided to leave that one, and to try again.
I'm looking to create a web-based application where users can draw images built from a set of pre-defined icons. There is a need to be able to save the final image (encoded jpg/png), and also save a "current setup" that can be re-loaded later for further editing (a "settings" file?).
My question : What would be the best approach for this matter? Flash+AS3? HTML5+JS? Something else?
For better understanding of what I want to create, here are 2 screenshots that illustrate in what direction I'm thinking:
The drawing application (made in Flash): http://imgur.com/U4GNKJF
The final created picture: http://imgur.com/aCtxwo1
Thanks in advance, and I really hope I've made my question more clear this time.
Since you need advice...
Draw your icons in some art software (even online) and save as transparent PNG's
Look-up HTML5 Drag & drop tutorials that involve "Canvas". You'll want to meaure the positions of objects dragged (mouse position on Canvas) and their order. The drag function could update a JSON String (this hold entries of items, type, position, etc)
Look-up How to save JSON as text file, also how to parse text file as JSON. This becomes the "settings file".
To save images best use PHP language code. PHP must be installed on the server (most have, or is installable or else get a better host). There are tutorials on how to save an image with content from "snapshot of Canvas"
flash is unsupported on IOS and android mobile browsers and google is giving a lower index to websites using it.
I would use javascript with HTML5 canvas with PIXI.JS ,CreateJS or PANDA.JS.
These libraries make it easier to create the canvas elements you need (draggable objects, buttons ) from sprites and adding event listeners to them.
And drawing graphics on the canvas (lines, shapes).
Since you have a lot of sprites you can pack them in a spritesheet with TexturePacker for faster loading ( and PIXI works great with spritesheets).
You can package this web page to android/ios with phonegap,ionic,crosswalk, cocoonjs etc ( i recommend ionic + crosswalk webview it gives great performance)
for saving i would also use a json file to save the setting . You can use PHP to load and save it.
Let's say that we have the following image:
I'm thinking of drawing this image with all the possible connections and then position some labels on their correspondent arrow... but this may not be the best approach, because the position of each label would be different depending on screen resolution. What do you think about this approach?
My question is: anyone knows any JavaScript library, jQuery plugin capable of drawing something like the image above? I mean, capable of doing multiple connections and that could be implemented with AngularJS ?
Here are some new details:
After I make some tests with JointJS, I think it is what I need, but...
the following link is an example of JointJS with a demo of connections/links between sources and targets that I would have on this project... The thing is: as you can see on this demo has alot of links and it's hard to interpret. Can anyone help me on how to make this look better? There's a better way of representing this? (on this example the link's are static but they would be done on a dynamically way).
You can check out below urls:
JSPlumb provides a means for a developer to visually connect elements on their web page
http://jsplumbtoolkit.com/demo/flowchart/jquery.html
http://jsplumbtoolkit.com/demo/home/jquery.html
Wirekit looks good for creating custom wired flows:
http://neyric.github.com/wireit/
JointJS is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs.
http://www.jointjs.com/
Here is a nice angular library
https://github.com/codecapers/AngularJS-FlowChart
and an example of it in action
https://dl.dropboxusercontent.com/u/16408368/WebUI_FlowChart/index.html
How would you do to create a chart like this, interactive (i.e. with links and tooltips), in an HTML page?
From what I know about SVG I think it's the right direction to take (no Flash anyway), but I'd like to know what would be the path you'd take first in order to have an interactive chart looking like this on a web page.
I'm not asking for the details but just where to begin to look. I know JavaScript quite well, but I have never dealt with any SVG libraries.
checkout d3.js examples, this example looks very close to your pic.
I offer to use Raphael library (http://raphaeljs.com/) and if you like to make more complex or using 3d objects you can use webgl with treejs library (http://threejs.org/) .. you can find example and demo for charts or other documents in websites..