Make my own client

Can anybody guide me in the right direction if I want to try to make a simple client to casparcg, how and what to do?

A valid and full answer to your question has two words “Very probably”.

A hopefully more helpful reply is to pose several questions whose answers may help readers offer you some thoughts.

  1. Do you already have computer coding skills?
  2. If so what languages do you already know? The SVT client uses C++ code in a QT environment that provides the cross platform “look and feel” but both Qt and C++ can be very steep learning curves for new programmers.
  3. Will your client run on a single operating system or will it need to run on two or three platforms? If your host will only be Windows visual C# may be a programming solution.
  4. Do you have skills in HTML UI design. If so a Node.js and a web page or Electron.js may be a more appropriate solution.
  5. Do you want to develop your own communicatopns libray to the CasparCG or use a freely available one such as the casparcg-connection kindly made availble by the people at Superfly.tv

If you are a novice programmer I suggest that the Javascript/Typescript/Node/Electron mechanism is probably the best starting point. You can see the high quality of user interface that can be made using Typescript and Electron by trying out the SuperConductor client created by Superfly.

1 Like

Yes, I am totaly novice programmer, just trying to learn, but need a project to try, otherwise I don’t think I learn anything.

My thought was to use Javascript/Typescript/Node/Electron but every time I struggle with creating a project, implement the casparcg-connection and just connect to the server.

I need some guideiance to get started the right way.

I have skills in HTML

I think your intended learning path is very sensible. I have always found that starting with something that is not too compex but equally having some challenges helps me build my skills levels with minimum pain.

So my projects tend to start quite small, only adding more of complexity when I have made the early project work. If I’m lucky some of the code from testbed project 1 can be used in testbed project 2 etc.

Javascript development history, working with asynchronous user input actions in a web browser, makes it a good fit for building user interfaces to Caspar where processes such as playing a clip have asynchronous elements.

So I would suggest that you start by working on a control client implementing a simple shot-box - perhaps just 3 pre-selected video clips each triggered by it’s own button on a web browser. Program in Javascript to start with - Typescript comes into its own when the code base gets larger and you need the consistency of edit time and transpile error detection that can avoid lots of run time objects.

I would use a static HTML page, loaded from a local file, sending commands from the bottons on the HTML page to a node application that will connect to Caspar. You can start with getting messages to the node application, and just logging the messages onto the node terminal/console screen.

Then you can add some elements of the casparcg-connection library to send the play commands to (say) just one CasparCG channel. Once that simple shot box is running you can build your knowledge of the casparcg-connection promises and how they return sucess or error indications.

Further layers can then be added to use the command reference ID available in some of the server versions. These allow your client to work out which play command caused a PLAY OK message when you send a slavo of several play commands.

Then move to using typescript for your project. When you have completed that you can add the Electron layer to make a stand alone application. When you have that running you can start to look at how to extend the simple panel into the fuller client you want.

You will probably also need to learn about OSC protocol and applications in CasparCG. Use server version 2.2 or later, ideally the latest V2.4.1. There is a significant difference in the format of the OSC status data used in server V2.1, whereas versions 2.2 and later are nearly identical.

You may also want to add OSC reception to your client such that a hardware button panel such Stream Deck plus Bitfocus Companion can trigger actions in your client.

You will also need a code development system - ideally one with built in file manager, text editor and command line terminal integrated. Each individual has a preference for their development environment. If you are unsure where to start have a look at Visual Studio Code as this has lots of plug in modules to extend the functionality and has good support for editing HTML pages, Javascript code and Typescript code.

I hope an established programmer can add to my initial thoughts, including a suggestion of which ECMAscript is the minimum that should be used, and which is the best longer term development layer.

1 Like

To better understand what is absolutely neccessary, I once made a mega basic “client”.
It is basically just a node.js server and an html page to type an amcp command and send it to the caspar server. Really, really basic…
Have a look if you want:

2 Likes

My opinion

Skip Electron,
I have nothing against using Electron. But in this scenario it adds complexity and make maintenance of you app far more difficult and it actually brings you nothing more then a embedded browser.

I now prefer using a node/vue/socket.io/mongo stack.
You can run the backend on the casparcg server and let users connect to it via the browser.

I did start using electron too but i find myself now wasting time in or maintenance or rebuilding those app’s to browser based.

just my opinion hope it helps
ls
Maurice