Espectateur

What is this?

Espectateur is a collaborative video annotation application designed for performing arts' analysis.

Find a video of a live show, create a project on espectator, annotate the video, share it with collaborators, collect your and their annotations. Make an analysis based on those.

With espectateur, you can have three types of annotations: emoticons, free comments and semantic annotations based on performing arts ontology.

Demo

Head to https://espectateur.huma-num.fr/, create an account and click where you think you should!

We'd appreciate your feedback about the application UX and design, as well as bug reports - don't hesitate to report an issue!

Who's behind it?

Espectateur was born from a research project led by CHANTRAINE BRAILLON Cécile, Professor in hispano american theatre at La Rochelle Université. Her work focus on Performance studies and digital humanities.

Espectateur is maintained by Maya LARBI, and we are actively looking for contributors and maintainers. Don't hesitate to drop us a line on gitter!

Setup

Prerequisites

Environment

Espectateur was designed to run on a Linux server.

To deploy and install Espectateur, knowing your way around the command-line is required. Using an OSX or Linux workstation is highly recommended.

Tools

• install the latest and greatest version of git (obviously)
• install the latest version of nodejs
• install the latest version of Yarn and use it instead of NPM. The project is organized as a monorepo so it needs yarn to leverage Yarn workspace

Database

You'll need a working PostgreSQL server, version 9.6 or later.

For development purpose, you can use this docker image.

Then:

1. create a user for celluloid
2. create a database owned by this user. You can follow this tutorial to get setup quickly.

Emails

A working SMTP server is required to send account confirmation emails.

For development purpose, you could use your email account SMTP credentials, for instance gmail, or a dedicated service, such as mailtrap

Installation from source

First steps

Fire up a terminal and run the following commands:

git clone https://github.com/celluloid-camp/espectateur
cd espectateur/
yarn

Configuration

In a terminal, at the root of the repository, run

cp sample.env .env

Open the newly created .env file with your favorite text editor and set the values that'll work for you.

Database provisioning

Make sure your PostgreSQL server is up. In a terminal, go to the bin directory and run the create_schema script:

cd bin
./create_schema.sh

If this fails, you most certainly got your PostgreSQL server configuration or your .env file wrong.

Semantic Backend

To run the semantic bakcend for semantic annotation, check: https://github.com/celluloid-camp/semantic-annotation and setup the project.

Running the app in development mode

At the root of your repository, run

yarn watch

This will trigger an interactive build, open up the app in a browser window while continuously watching the source files for modifications.

that's it! if everything worked without errors, you should be all set. If not, please carefully review the instructions above.

Building and starting the app in production mode

At the root of your repository, run

yarn build
yarn start

You should be able to access your app at http://localhost:3002

Building and starting the app as a docker container

Open a terminal at the root of your repository, then run

docker run -f Dockerfile.webapp

(make sure Docker is properly installed beforehand!)

Contributing

We are actively looking for motivated contributors!.

Do not hesitate to open a pull request, contact us on gitter or report a bug!

Roadmap

• Administration GUI: content curation and moderation, user administration
• Add more video backends (Vimeo)
• Real-time annotation and comment updating using Websockets or SSE
• Private video hosting (video upload, ingest, dash transcoding)

Technical Stack

Before contributing to the development of Espectateur, you should get familiar with some of the following technologies:

• everywhere: TypeScript
• frontend: React, Redux and Material UI
• backend: node.js, Express and knex
• storage: PostgreSQL

File structure

The project is organized as a monorepo with 4 distinct packages residing in the packages directory.

All paths are relative to the root of the repository.

• packages/server: server-only files
• packages/client: client-only files
• packages/validators: validation scripts, shared by the client and server
• packages/types: TypeScript definitions shared by the client and server