<commit_before>#VideoContext
The VideoContext is an experimental HTML5/WebGL media processing and sequencing library for creating interactive and responsive videos on the web.


It consist of two main components. A graph based, shader accelerated processing pipeline, and a media playback sequencing time-line. 


The design is heavily inspired by the WebAudioAPI so should feel familiar to use for people who've had previous experience in the WebAudio world. 


## Demo

``` JavaScript
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../dist/videocontext.js"></script>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script type="text/javascript">
        window.onload = function(){
            var canvas = document.getElementById("canvas");

            var videoCtx = new VideoContext(canvas);
            var videoNode1 = videoCtx.createVideoSourceNode("./video1.mp4");
            videoNode1.start(0);
            videoNode1.stop(4);

            var videoNode2 = videoCtx.createVideoSourceNode("./video2.mp4");
            videoNode2.start(2);
            videoNode2.stop(6);

            var crossFade = videoCtx.createTransitionNode(VideoContext.DEFINITIONS.CROSSFADE);
            crossFade.transition(2,4,1.0, "mix");

            videoNode2.connect(crossFade);
            videoNode1.connect(crossFade);
            crossFade.connect(videoCtx.destination);


            videoCtx.play();
        };
    </script>
</body>
</html>
```

![Graph and timeline view](../master/readme-diagram.png?raw=true)


## Documentation
API Documentation can be built using [ESDoc](https://esdoc.org/) by running the following commands:
```
npm install<commit_msg>added info on how to set-up the debugging views<commit_after>#VideoContext
The VideoContext is an experimental HTML5/WebGL media processing and sequencing library for creating interactive and responsive videos on the web.


It consist of two main components. A graph based, shader accelerated processing pipeline, and a media playback sequencing time-line. 


The design is heavily inspired by the WebAudioAPI so should feel familiar to use for people who've had previous experience in the WebAudio world. 


## Demo

``` JavaScript
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../dist/videocontext.js"></script>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script type="text/javascript">
        window.onload = function(){
            var canvas = document.getElementById("canvas");

            var videoCtx = new VideoContext(canvas);
            var videoNode1 = videoCtx.createVideoSourceNode("./video1.mp4");
            videoNode1.start(0);
            videoNode1.stop(4);

            var videoNode2 = videoCtx.createVideoSourceNode("./video2.mp4");
            videoNode2.start(2);
            videoNode2.stop(6);

            var crossFade = videoCtx.createTransitionNode(VideoContext.DEFINITIONS.CROSSFADE);
            crossFade.transition(2,4,1.0, "mix");

            videoNode2.connect(crossFade);
            videoNode1.connect(crossFade);
            crossFade.connect(videoCtx.destination);


            videoCtx.play();
        };
    </script>
</body>
</html>
```

![Graph and timeline view](../master/readme-diagram.png?raw=true)

## Debugging
There's two built in tools that help with debugging VideoContext graphs and timelines. The following JavaScript and HTML snippets show how to set these up.

First two canvases for rendering to must be created.
``` HTML
<p>
    <canvas id="visualisation-canvas" width="390", height="20"></canvas>
</p>
<p>
    <canvas id="graph-canvas" width="480", height="150"></canvas>
</p>
```

Then setup the drawing to the canvases using JavaScript.
``` JavaScript
/****************************
* GUI setup
*****************************/
/*
* Create an interactive visualization canvas.
*/

//Render a graph view
var graphCanvas = document.getElementById("graph-canvas");
VideoContext.visualiseVideoContextGraph(videoCtx, graphCanvas);


var visualisationCanvas = document.getElementById("visualisation-canvas");

//Setup up a render function so we can update the playhead position.
function render () {
    //VideoCompositor.renderPlaylist(playlist, visualisationCanvas, videoCompositor.currentTime); 
    VideoContext.visualiseVideoContextTimeline(videoCtx, visualisationCanvas, videoCtx.currentTime);
    requestAnimationFrame(render);
}
requestAnimationFrame(render);
//catch mouse events to we can scrub through the timeline.
visualisationCanvas.addEventListener("mousedown", function(evt){
    var x;
    if (evt.x!== undefined){
        x = evt.x - visualisationCanvas.offsetLeft;
    }else{
        //Fix for firefox
        x = evt.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;          
    }
    var secondsPerPixel = videoCtx.duration / visualisationCanvas.width;
    videoCtx.currentTime = secondsPerPixel*x;
}, false);

var playButton = document.getElementById("play-button");
var pauseButton = document.getElementById("pause-button");
playButton.onclick = function(){ videoCtx.play(); };
pauseButton.onclick = function(){ videoCtx.pause(); };
```


## Documentation
API Documentation can be built using [ESDoc](https://esdoc.org/) by running the following commands:
```
npm install
{'fraction_non_alphanumeric': 0.12298764507675028, 'fraction_numerical': 0.009921377761138151, 'mean_word_length': 3.5705731394354148, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1127110', 'n_tokens_mistral': 1502, 'n_tokens_neox': 1437, 'n_words': 413}