https://github.com/bbc/visualise-videocontext
Library to visualise a VideoContext graph
https://github.com/bbc/visualise-videocontext
rd-project rd-section-apmm rd-stability-yellow videocontext
Last synced: about 2 months ago
JSON representation
Library to visualise a VideoContext graph
- Host: GitHub
- URL: https://github.com/bbc/visualise-videocontext
- Owner: bbc
- License: bsd-3-clause
- Created: 2017-04-18T11:43:38.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-11-27T15:14:08.000Z (6 months ago)
- Last Synced: 2025-03-18T15:53:31.279Z (3 months ago)
- Topics: rd-project, rd-section-apmm, rd-stability-yellow, videocontext
- Language: JavaScript
- Size: 6.96 MB
- Stars: 4
- Watchers: 24
- Forks: 1
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Introduction
This project provides a visualisation of the graph, showing vertices and edges, from a programmatic configuration of [VideoContext](https://github.com/bbc/videocontext).
`visualise-videocontext` is currently receiving maintenance updates but not under active development.
# Example
```js
import VideoContext from 'videocontext'
import VideoContextVisualisation from 'visualise-videocontext'
// 1. Set up VideoContext graph
const vc = new VideoContext(document.getElementById('canvas'))
const v1 = vc.video('http://somewebsite.com/some-video.mp4')
v1.start(0)
const eff = vc.effect(VideoContext.DEFINITIONS.MONOCHROME)
v1.connect(eff)
eff.connect(vc.destination)
vc.play()
// 2. Visualise VideoContext graph
const div = document.getElementById('vis')
// eg
with width and height set in css.
const vis = new VideoContextVisualisation(div)
vis.setData(VideoContext.snapshot(vc))
vis.render()
// Update regularly - could also use VideoContext's built-in callbacks to trigger this.
setInterval(() => {
vis.setData(VideoContext.snapshot(vc))
// No need to call render() a second time
}, 100)
```
# Development
Do not use yarn! When you run `yarn` it seems to install dependencies incorrectly. I'm not sure what's causing this, but just use npm, at least for installing dependencies.
However it *is* totally fine to use yarn in projects that include `visualise-videocontext` as a dependency.