Hello everyone
I’m Diego from Argentina and after a while I decided to share one of the many projects/ideas that I’ve developed. I’m a professional software developer, and when I was learning NodeJS/SocketIO/etc, I came up with the idea to combine them to resolve this issue (getting info from the scoreboards). In my country almost every basketball event broadcast (tv/streaming) use a few cameras for showing the score and the timer on the scoreboard graphic also. I though that it should exist an affordable solution for CaspaCG too. I don’t know if this is going to be the right solution but I would like that you give it a try. Below there is a basic documentation and some videos. Thank you for giving us a great open source project like CasparCG!!
Scoreboard OCR
About
This is a prototype of web app (NO production ready) for getting info from electronic scoreboards using OCR detection (7 segment). It was created as a low cost option for working with CasparCG to have professional scoreboard graphics on sports event broadcasting.
Features
Detects/reads 7 segments scoreboards.
Send information directly to custom CasparCG html template (only html).
No more score or timer cam. You can use it even to read just the score and take out that task from the operator.
Master/slave node setup for reading info from different scoreboards (i.e. main scoreboard and shot timer).
Set the fields to read and then save them as a layout (for reusing them).
Control input/webcam settings (only on linux with uvcdynctrl).
Includes a javascript library for adding easily in any custom html template.
Log files listing and viewer for debugging use.
System requirements
CasparCG Server 2.0.7
CasparCG Client (optional)
Webcam or any input used as webcam (compatible with linux)
PC/Notebook or raspberry pi
Node.js v6.10.3 or superior
NPM v3.10.10 or superior
Windows command prompt console (windows) or similar application (Console). For linux you need a terminal.
A compatible browser (Chrome, Firefox, Chromium). All the development was tested using Chromium 58 x64.
Installation
For installing Node.js read the download section from the official site. This also installs npm (Node Package Manager).
Check the versions with the commands (console/terminal):
$ node -v
$ npm -v
Download the application file from here and extracted to a folder.
Go to the application folder and run this command (console/terminal):
$ npm install
And finally run this command (console/terminal):
$ node app.js
Now open a browser and go to this url:
http://localhost:3000
Now you’ll see the home page of Scoreboard OCR (only enabled from the same device because the input is the webcam). Allow access to the camera or use the demo mode, then start setting fields and sending info to the html template.
For testing use this html template as an example: Download html template
Fantastic. Nodejs has been so instrumental in making broadcasts professional. Our local station uses a PIP for high school sports. So cheap looking when camera gets bumped.
Kudos for your work and sharing.
@rcourtney I agree with you about nodejs. I think that html templates open a new world of opportunities, brings all the universe of web technologies (nodejs, svg, css animation, etc) to make dynamic graphics. Take for example the work that was made for the archery streaming. When html templates can handle 3d animations in Caspar that will be another new level. I made this tool trying to solve that issue (clock cams), the ideal solution would it be that the scoreboard have had an read only data interface (websocket, osc, socket, etc) that you can subscribe to (you as a broadcaster, streamer, bet page, etc) and receive the score in real time. I hope this can be useful on you local station to improve the quality.
@Maurice78 thanks for you comment and suggestion. I already use casparcg-connection for other clients (one general client and another just for twitter) but in this case I made a software architecture’s decision. We know that Caspar can handle acmp commands and in some cases many times at once for example update calls for a clock template, but I think when you expect to have update/calls in a range of milliseconds the performance of the server can be affected. Also every time you add a layer of processing you’re adding a delay in the response, that in this case we’re trying to reduce/avoid to get real time precision (clock). For this tool I applied the separation of concerns, I use Caspar for controlling the presentation and some initial settings and leave the html template deal with the data updated in real time (send by the web app). Maybe you can have different Caspar servers to handle the load (I really have no idea on broadcasting workflow) but I don’t know if it’s possible on low budget. Finally about the solution to be more universal you’re right, it’s restricted to html templates, but I created a library/client (I have to rename it to avoid confusion) in javascript so you can easily add it on your own template and not worry on how to deal with SocketIO library
@peteraellig Thanks for you comment. No need to learn NodeJs If you going to use just the html template, I made a javascript library/client to add it to any custom template who handle the connection to the web app. If you plan to use casparcg-connection for creating a client you will need NodeJs.
Sorry for my long comment but I wanted to express my opinions and why I took some decisions on creating this tool. I think that CasparCg give the possibility to have the same quality as a professional broadcast/streaming but with a low budget.
I have to check how to solve the situation when the main clock (mm:ss format) reach the last minute and transform to 55.34 (ss:centisecond format). Also needs more testing for getting production ready. I released it mainly to verify if the 7 segment is recognized/read correctly using different inputs than my own testing (webcam only).
@rcourtney thanks for trying this solution, this was my goal when I made the post (to prove if this approach is right/useful). I see that it would be a problem in capturing the scoreboard if there is some motion on the camera. You don’t have to use the same camera, that usually is for showing the scoreboard, for getting the info from the scoreboard.
I tried an alternative solution for this case, using a raspberry pi 2b and a webcam Logitech HD270 through VNC (because you need the web app running in the same device as the input). You can watch this video for more details. So you can put this on a tripod near/closer to the scoreboard and it will work if is connected to a network (wireless or wired). I know that looks/sounds like the cheapest way but I think that for capturing info is more important the stability/delay of the input than the quality/resolution of the input.
Finally I have to edit my post because it’s possible to work with custom Flash templates also (using a library), an user from here (Argentina) added to his flash templates successfully . I will ask for his permission to publish the demo video, and I have to make the flash version of my template to include it as an example .
it should be possible to use a cheap stabilized gimbal for the clock camera, to avoid motion?
i hope youget the permission for the flash template with the as file.
thanks anyway
peter
when the socket variable is passed with the node.js URL, it connects to the socket and starts listening to the JSON data. In the demo I override the client’s manual clock control using the SHIFT modifier key when clicking the Play button.
Here are the AS3 socket connection functions:
package {
import flash.display.MovieClip;
import flash.text.*;
import se.svt.caspar.template.CasparTemplate;
import caspar.network.ServerConnection;
import caspar.network.ServerConnectionEvent;
import com.pnwrain.flashsocket.*;
import com.pnwrain.flashsocket.events.*;
import com.pnwrain.flashsocket.transports.*;
import socket.io.parser.*;
import flash.utils.ByteArray;
public class BasketBoard extends CasparTemplate
{
const SERVER:String = "127.0.0.1";
private var connection:ServerConnection = new ServerConnection();
private var _socket:FlashSocket;
public function BasketBoard()
{
connection.addEventListener(ServerConnectionEvent.ON_CONNECT,startup);
connection.connect(SERVER);
}
private function StartSocket(server:String)
{
_socket = new FlashSocket(server);
_socket.addEventListener('ocr-raw', SocketEventHandler);
}
private function SocketEventHandler(e:FlashSocketEvent)
{
shot_cl.text = e.data[0].ShotClk.toString();
quart_cl.text = e.data[0].GameClk;
local_pt.text = e.data[0].HScore;
visit_pt.text = e.data[0].VScore;
quarter.text = e.data[0].Period;
}
// [TEMPLATE PLAYOUT FUNCTIONS HERE]
override public function SetData(xmlData:XML):void
{
var _cname:String = "";
for each (var element:XML in xmlData.children())
{
_cname = element.@id;
switch(_cname)
{
case "local_nm":
this.ln.local_nm.text = element.data.@value;
break;
case "visit_nm":
this.vn.visit_nm.text = element.data.@value;
break;
case "socket":
this.StartSocket(element.data.@value);
break;
}
}
}
}
}
First of all, thanks for sharing your solution, I’m really really looking forward to find an OCR solution that works with CasparCG.
I’m testing it and the first thing that I noticed is that the video input freezes randomly when I define the 7segment regions (sometimes when adding the second or the third digit). I’m using a Magewell SDI usb 3.0 capture device for testing (windows detects it like a webcam), and Firefox (chrome won’t work in my case).
Another thing that I noticed is that it is very hard to define digit regions on windows. I guess it is mainly because we lack the uvcdynctrl webcam controls that are present on linux.
Anyways, I really appreciate the work and I would love to see a functional version!!
I uploaded a new version where you can change the resolution for the ocr area, @emisiona this could make it easy for you to set the regions. Maybe the UI layout gets messy if you use it on a lower screen resolution. Also I want to tell that the “uvcdynctrl” controls depends on the manufacturer/model UVC support (i.e. my logitech webcam c270 doesn’t support any zoom/tilt on linux but in windows I use the logitech webcam software). I’ll try to add UVC controls for windows on next versions.
. I will ask for his permission to publish the demo video, and I have to make the flash version of my template to include it as an example .