BallJames videosync

This project contains the code for the videosync backend and frontend. The backend has a single purpose: supply frames of a given input video to a frontend. This frontend can either be the videosync frontend, or the calibration frontend.

Frontend

The videosync frontend is a Next.js/React module which is published to the NPM repository. It is build using yarn run build. The result is published to npm using npm publish. You must be logged into npm before you can publish (npm login). The frontend consists of a single SyncView component which gets a few props:

• apikey: This an JWT token that is used in the API calls to the backend. This makes sure that not everybody can use the backend API to extract frames from videos
• framerate: (optional) The FPS of the input videos. The default is 25
• baseUrl: (optional) The URL of the videosync backend. By default the backend is expected to be hosted on the same domain as the frontend
• videos: An array of objects containing 3 properties: a name for the video, an URL, and an initial offset value
• onUpdate: callback for when the video sync is complete and all video views are locked

The objective of the videosync frontend is to supply a view of all videos. In this view only 1 video is active. Within this view you can control the frame offset of the video compared to all other videos. You can go forward or backward x frames which will make this video (and all other unlocked videos) to change their current frame relative to the locked videos. So let's say we have 3 videos. Video 1 is on frame 100 and locked. And video 2 and 3 or unlocked. The when you forward 1 frame when video 2 is active, video 1 will stay at 100, video 2 and 3 will proceed to frame 101. This way you can sync all videos with each other by finding an overlapping moment. Once all videos are locked (i.e. they are all in sync), you can save the sync values.

Backend API

The API of the backend is very straightforward. It consists of 2 API calls:

• /api/session - This is called by the frontend in the useSession hook. Before you can request frames from the backend you must initiate an authenticated session (the apikey is sent in the x-bj-authorization header). This is a POST call and in the body you supply the url of the video for which you need the frames. The backend will respond with a session identifier in the response which you need to fetch the frames
• /api//?size=&frames=&framerate= - is the session identifier returned from the previous call. is the frame number you need. is the width of the resulting frame. is the number of frames to pre-extract to speed up sequential calls for frames. These frames are all cached on disk (with a max of 10GB). is needed because the backend uses ffmpeg which can not take a framenumber as input, but only a time-offset.

Building and publishing

Don't forget to update the package version in package.json before publishing.

> yarn
> yarn run build
> npm publish