frontend-park: a playground of browser tricks in Vue

A park of demos, not a framework

frontend-park is described as an interesting front-end knowledge park, a collection of the author's own front-end experiments gathered in one place. The readme says the project is a set of fun front-end knowledge cases the author has been tinkering with, and that anyone who likes it can fork the repository and play with it.

The framing matters for how you read the code. This is a collection of independent demonstrations rather than a library or a design system, so there is no API to learn and no abstraction to adopt. The value is in the implementations, and the most productive way to use it is to find the demo closest to the problem you have and read how it was done.

The subject areas are broad and they cluster around things the browser can do that people tend to assume need a native app. Tensorflow.js for pose recognition and face detection. WebRTC for audio and video calls, screen recording and virtual backgrounds. Three.js for 3D scenes. Image processing for mosaic composition, compression and a drawing board. And steganography for hiding information in text and in images.

The site is deployed at frontend-park.vercel.app with a home page, and the repository topics list the technologies in use: canvas, fabricjs, image-processing, pixel-art, steganography, tensorflowjs, threejs, vue, vuejs, webgl and webrtc. The primary language is Vue, and the licence field in the package manifest says MIT, though the project itself records an unknown licence.

The release history is short and dated. v0.0.3 added the Tensorflow.js module with pose recognition in November 2022, v0.0.2 added WebRTC photo capture and two pages that pass SDP without a signalling service in September 2022, and there is an earlier rongding tag from 2021.

Pose and face detection running entirely in the browser

The Tensorflow.js section is the one the readme treats as the headline, and the description is that it recognises human body pose in real time through the camera, applicable to things like a gym, a yoga classroom or a dance classroom.

The screenshots are a series of gifs and stills showing a figure in front of a webcam with pose landmarks drawn over it, which is the standard Tensorflow.js pose detection demo. What makes it a useful reference is the dependency list in the manifest, which is more specific than a single tfjs package.

There are separate model packages for each task: pose detection, posenet, hand pose detection, face landmarks detection and mobilenet, which is the image classification model that usually backs a person or object label. The @mediapipe/tasks-vision package is there as well, which is the newer MediaPipe vision task API running in the browser. And @tensorflow/tfjs-backend-wasm at 4.22.0 is what makes the whole thing viable, because the WebAssembly backend is several times faster than the pure JavaScript one and is what turns a real-time demo into something that does not drop frames on a laptop.

The reason to look at this rather than copy it is the shape of the stack. Running pose detection in a browser means shipping model weights to the client, which is a weight problem, and then running inference in WebAssembly, which is a performance problem. The model packages and the WebAssembly backend together in the manifest tell you the author dealt with both.

The readme notes that the machine learning section is still being worked on, and the checklist at the end of the WebRTC section includes an unfinished item for combining WebRTC with Tensorflow.js, which suggests the two halves had not yet been joined.

WebRTC, including a call with no signalling server at all

The WebRTC section has five finished demos and five that are not, and the finished ones are more interesting than their names suggest.

The first is photo capture based on WebRTC, which takes a photo and saves it locally. The second is screen recording, which takes the captured media stream, records it with the MediaRecorder API and then offers the recorded video for download. The third is a virtual background, which processes the background after capturing the camera.

The two that stand out are the signalling ones. There is a no-signalling version, a one-to-one audio and video call that manually implements peer to peer without depending on a signalling server. And there is a signalling version, which uses a signalling server to implement the same peer to peer call, supporting both internal and external network connections so the call works in different network environments.

The pair is the interesting part, because the difference between them is exactly the hard part of WebRTC. To establish a peer to peer connection the two browsers have to exchange session descriptions and candidates, and doing that without a server means hand-carrying that information, which is a real technique for one-to-one cases but does not scale to discovery or to arbitrary topologies.

The unfinished list gives the rest of the roadmap: standing up a STUN and TURN server, a beauty filter, a WebRTC plus Three.js project, a WebRTC plus Tensorflow.js project, and WebRTC plus Electron plus robotjs for remote control.

The STUN and TURN item is the one an engineer should notice first, because the signalling demo supports internal and external networks, and the difference between those two cases is exactly what a STUN and TURN server provides. The signalling demo uses a server for the session description exchange, and the STUN and TURN item is about the media path rather than the signalling path, so the two are separate problems that the readme lists separately.

Steganography, image mosaics and Three.js scenes

The remaining three sections are smaller and are where the Canvas work sits.

The steganography section has two finished demos. Text steganography compiles specified text into zero-width characters and hides it in a passage of text, for use in information encryption. Image steganography hides an image inside another image, for encryption, for hiding information, or for copyright protection through a watermark. There is an explicit to be continued at the end of the section, with audio steganography and video steganography unchecked.

The zero-width character approach is the classic one and it is a genuinely useful thing to have seen implemented, because the encoding is simple and the detection is the interesting half. Anyone who has looked at a page and seen strange invisible characters in a text field has met the output of something like this.

The image mosaic section, called a thousand picture composition, takes a number of selected images and stitches them together into a new image of a specified size, in other words a mosaic. The checklist shows the target image generation is done, and five customisation options are outstanding: custom distribution, custom proportional adjustment, custom direction and ratio, custom patch height and custom patch width, plus control over the continuous repetition of source images. There is a note that the unfinished features do not affect using the project now, they are only optimisation.

The Three.js section has code examples with a controller and a solar system, which are the standard learning projects for a 3D library and are the point of the section, which is to show Three.js usage rather than to build something reusable.

The machine learning section, based on Tensorflow.js, sits under its own heading with the readme noting that the example is still being worked on.

Running it, and the native dependency you cannot avoid

The build is pnpm and Vite, and the commands are the short ones you would expect.

pnpm i

pnpm dev

pnpm build

pnpm fal

That last one runs the format, style and lint chain together, and the package manifest shows what it is: format is prettier --write over src, stylelint is stylelint with the fix flag over src, and lint is eslint over the vue, js, ts, jsx and tsx sources with the fix flag. The fal name is a shorthand for all three, which is a small convenience that tells you how the author works.

The build script itself is vue-tsc --noEmit followed by vite build, so type checking is part of a production build, and there is a build:no-verify variant that skips it. The dev script is plain vite, and preview is vite preview.

The one real friction is the native dependency, and the readme has a section dedicated to it. Some of the dependency packages depend on binary files, so if you hit node-pre-gyp or gyp errors, the fix is to install windows-build-tools globally in production mode before node-gyp, and to install node-gyp globally as well. If that still fails, check whether Python is installed locally and install it if not.

That is a canvas and node-gyp problem, and it comes from the fabricjs dependency, which brings a native canvas binding. It is the sort of thing that makes a demo repository annoying to clone on a fresh machine, and the readme handles it up front rather than leaving it to an issue thread.

There is also a preinstall hook, npx npm-limit pnpm, which blocks an accidental npm install, and a husky prepare script, so the commit hooks are set up on install. The repository has a .husky directory, a commitlint config, an eslintrc.js with a generated auto-import variant, stylelint and prettier configs, and both .env.development and .env.production files, which suggests the demos need environment configuration to run.

Editorial conclusion

Adopt frontend-park as a reference if you are implementing pose detection, WebRTC without a signalling server, canvas image processing or text steganography in a browser and want to see a working example before you write your own. Do not adopt it as a dependency, because it is a demo site with no published package, a per-project license record and a mixture of finished and unfinished features. Before you copy anything from it, check which demos are marked done, because the readme tracks unfinished work explicitly, and note that the machine learning section is described as still being worked on.

Frequently asked questions

Official sources

1. Issues
2. Project website
3. README
4. Releases
5. wangrongding/frontend-park on GitHub