React Caspar Client

Note:- This post have been updated. Last update 27.12.23
Online Client https://vimlesh1975.github.io/ReactCasparClient/
Online 3d client https://vimlesh1975.github.io/three/
Online RCC Web Animator https://vimlesh1975.github.io/ReactCasparClient/WebAnimator
Game client with RCC templates https://bit.ly/3PCcHP6

Dear forum
I want to share an work in progress ‘React Caspar Client’. This is for learning web based technology. This works on every version of casparcg. But All features will work only on 2.3
How to test=>

  1. We need to have already installed nodejs in PC.
  2. Download and unzip with 7z. https://bit.ly/3jRrhDL
  3. Double click on Start_All.bat file.
9 Likes

WOW
Super work

2 Likes

It’s great. I have been waiting this for a long time. finally someone made one!!

1 Like

I’ve been enjoying playing around with this client!

Have you considered putting the code up on github so others might be able to contribute?

1 Like

Great work again Vimlesh. Working good… working good.
GOD bless.

1 Like

Thanks everybody for encouraging words.
I am new to github and now code has been published at GitHub - vimlesh1975/ReactCasparClient

2 Likes

A github link to the client to test.
https://vimlesh1975.github.io/ReactCasparClient/

3 Likes

Now much improved.
Features:-
• Template is based on SVG so quality is good.
• Web based front end and remote operation is available.
• Designer and play out in same interface, useful for live and instant operation.
• Designer has Zoom and pan facility to design roll and scroll.
• Multi pages can be saved and all pages can be saved in single file.
• Multi instance can be opened of this application.
• Design can be done on normal pc. For output Casparcg is required.
• Multi channel operation is available like preview channel and program channel.
• Frame animation, four point animation, full fledges animation.
• Export and import Svg, Json, png, html.
• Export html and use it from any other client.
• Demo file included in download which have all type of templates.
• Works on every resolution.
• Start_both.bat file is included in download, which will act as shortcut for starting application.
• Up and down timer, Game timer…
• Simple Sports client- Hockey, Tennis, Kabaddi score, cricket score.
• Video and other software exported animated video play out in background.
• Automation feature to trigger graphics from self made software.
• Multi bullet scroller.
• Property status feedback of elements.
• Works in Unicode and non Unicode both.
• External JS and CSS file can be linked to exported HTML file for more advanced logic.
• Text alignment and shrink to fit by default.
• Class name can be given to elements for latter manipulation by external css and js file.
• Simple 3D designer and player with animation.
• Drag and drop image or text to Designer, clipboard paste to designer.
• Multilayer Html output for use in VMIX and OBS.
• Open AI support for getting help for design.
• Multilingual speech to text for text editing.
• Multicolor gradient with alpha.
• RCC Web Animator
• Gsap Player
• Tsparticles

Download from ReactCasparcgClient - Google Drive

2 Likes

Caspar is great. New method to work with. Virtual html template.
Surprisingly If we copy and paste bellow content to casparcg console, we get UpTimer.

play 1-115 [HTML] xyz.html
call 1-115 " var aa = document.createElement('div'); aa.style.position='absolute'; aa.innerHTML='<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\" ?> <!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"1024\" height=\"576\" viewBox=\"0 0 1024 576\" xml:space=\"preserve\"> <desc>Created with Fabric.js 4.6.0</desc> <defs> </defs> <g transform=\"matrix(1 0 0 1 66.99 544.13)\" style=\"filter: url(#SVGID_48);\" id=\"uptimer1\" > <filter id=\"SVGID_48\" y=\"-126%\" height=\"352%\" x=\"-46%\" width=\"192%\" > <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"15\"></feGaussianBlur> <feOffset dx=\"0\" dy=\"0\" result=\"oBlur\" ></feOffset> <feFlood flood-color=\"rgb(0,0,0)\" flood-opacity=\"1\"/> <feComposite in2=\"oBlur\" operator=\"in\" /> <feMerge> <feMergeNode></feMergeNode> <feMergeNode in=\"SourceGraphic\"></feMergeNode> </feMerge> </filter> <rect fill=\"#50037c\" x=\"-56.99\" y=\"-14.13\" width=\"113.98\" height=\"28.25\"></rect> <text xml:space=\"preserve\" font-family=\"Arial\" font-size=\"25\" font-style=\"normal\" font-weight=\"bold\" style=\"stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; white-space: pre;\" ><tspan x=\"-56.99\" y=\"7.85\" >00:03:102</tspan></text> </g> </svg>'; document.body.appendChild(aa); document.body.style.margin='0'; document.body.style.padding='0'; aa.style.zoom=(102400/1024)+'%'; document.body.style.overflow='hidden'; var cc=document.getElementsByTagName('tspan')[0]; cc.textContent=''; var startTime = new Date(); setInterval(function() { var diff = (new Date()).getTime() - startTime.getTime(); var date_diff = new Date(diff - 30 * 60 * 1000); var ss1 = date_diff.toLocaleString('en-US', { minute: '2-digit', second: '2-digit' }) + ':' + String(date_diff.getMilliseconds()).padStart(3, '0'); cc.textContent =ss1; }, 40); "

4 Likes

This is awesome!!!

1 Like

Excellent Work Sir… :clap:t2: :clap:t2: :blush:

1 Like

excellent work vimlesh. we are waiting a caspar cg with designer from long time .it is accomplished because of you . Great Job vimlesh

2 Likes

Encouragement from people like you is the source of energy for this development.

4 Likes

very good react-caspar-client , i try this software is very easy and i like the layers how can control and how can use and we have many many many option for control and we can put video logo , and the time we can edit change background font everything and the scroll we can put text with logo and we have more option in software i need to thanks for the leader @vimlesh1975 about the great software :tulip: :tulip:

2 Likes

Automation of RCC has been done. Open this client and enable automation. Make some pages of graphics and then we can make our own client in our choice language and fire graphics with new data.

4 Likes

Style Creating and Applying in RCC

2 Likes

Thumbnail_Preview of canvaslist

2 Likes

Shapes in RCC

1 Like

Chart in RCC.

1 Like

Tennis and badminton in RCC

3 Likes