rc-web@42: rc-web@42: rc-web@43: rc-web@42: rc-web@42: rc-web@46: rc-web@42: nodescore rc-web@42: rc-web@43: rc-web@42: rc-web@42: rc-web@42: rc-web@42: rc-web@42: rc-web@42: rc-web@42: rc-web@42: rc-web@44: rc-web@42: rc-web@42: rc-web@42: rc-web@42: rc-web@42: rc-web@42: rc-web@42: rc-web@42: rc-web@42: rc-web@42: rc-web@42: rc-web@43:
rc-web@43: rc-web@43: rc-web@43:
rc-web@43: rc-web@43: rc-web@43:
rc-web@43:
rc-web@43: rc-web@43:

REALTIME WEB TECHNOLOGIES IN THE NETWORKED PERFORMANCE ENVIRONMENT

rc-web@44:

rc-web@43: - http://rob.kiben.net rob@kiben.net - rc-web@43:

rc-web@44: rc-web@44:

Rob Canning
Department of Music
Goldsmiths, University of London

rc-web@43:
rc-web@43: rc-web@43:
rc-web@43:

NODESCORE

rc-web@43:

rc-web@43: NodeScore is a web based framework to facilitate networked ensemble performance. rc-web@43:

rc-web@44:

rc-web@44:
    rc-web@44: rc-web@44:
  • NOT a synthesis system
    • rc-web@46:
  • NOT a composition tool
    • rc-web@46:
  • NO control level output (OSC etc.)
    • rc-web@46: rc-web@46:
    rc-web@46:
  • DOES push cues/notation to human performers
    • rc-web@46:
  • Precomposed or on-the-fly
    • rc-web@44: rc-web@44:
    rc-web@46: rc-web@44:
rc-web@44: rc-web@43:
rc-web@42: rc-web@42: rc-web@44: rc-web@43:
rc-web@44:

LOCAL


rc-web@44: rc-web@46:
  • Telepresence vs. Presence
    • rc-web@46: rc-web@46: rc-web@46:
    rc-web@46: rc-web@46:
      rc-web@44: "Hypertextual"/ NonLinear Scores/Strategies rc-web@46:
      rc-web@46:
    • Composed/Mediated Improvisation
      • rc-web@46:
    • London Improvisors Orchestra (LIO) "Conductions"
      • rc-web@46:
    • Zorn's Cobra - Flash Card Rule based Systems
      • rc-web@46:
      rc-web@46:
    rc-web@42: rc-web@44:
    rc-web@44: rc-web@44: rc-web@44:
    rc-web@44:

    Dramaturgies

    rc-web@46: Interaction - Distributed Controls/Authorship rc-web@44:
    projected, directed and distributed
    rc-web@43: BreakDOM game screenshot rc-web@43: BreakDOM game screenshot rc-web@43: rc-web@43:
    rc-web@42: rc-web@44:
    rc-web@46:

    Performance Problems


    rc-web@44:
      rc-web@42: rc-web@44:
    • Clutter - clicktrack, stopwatch, metronome
      • rc-web@44:
    • Oversized/complex "hypertextual" paper scores
      • rc-web@44:
      rc-web@44:
    • Different Demands to the Laptop Orchestra
      • rc-web@44:
    • Rich Media v. Composition tool + plugin
      • rc-web@44:
    rc-web@44:
    rc-web@44: rc-web@46: rc-web@43:
    rc-web@44:

    NODESCORE

    rc-web@44:
    rc-web@44:
      rc-web@44:
    • Scores assembled in HTML5
      • rc-web@44:
    • Musicians displays controled remotely
      • rc-web@44:
      rc-web@44:
    • Not all-in-one solution - Modular Approach
      • rc-web@44:
    • May run alongside other streams: media, OSC automation etc.
      • rc-web@44:
    rc-web@44:
    rc-web@44: rc-web@44: rc-web@44:
    rc-web@44:

    Standards Compliant

    rc-web@42: rc-web@43: BreakDOM game screenshot rc-web@43:
      rc-web@43:
    • HTML5
      • rc-web@43:
    • CSS3
      • rc-web@43:
    • (JAVASCRIPT)
      • rc-web@43:
    • WEBSOCKETS
      • rc-web@43:
    rc-web@43:

    rc-web@43:

    rc-web@43: Open Source - No Plugins
    (Flash, Flex, Shockwave, Java) rc-web@43:

    rc-web@43:
    rc-web@43: rc-web@43:
    rc-web@44: traditional model: rc-web@44: http req res rc-web@44:
    rc-web@44:

    Server Push Technology

    rc-web@43:
      rc-web@44: rc-web@44:
    • AJAX/Comet Programming/Long Polling
      • rc-web@44:
    • FLASH / JAVA - FLEX - BLADEDS
      • rc-web@44: rc-web@44:
      rc-web@44:
    • BOSH
      • rc-web@44:
    • WEBSOCKETS
      • rc-web@43:
    rc-web@43: rc-web@43: rc-web@43:
    rc-web@42: rc-web@42: rc-web@44:
    rc-web@44:

    Websockets

    rc-web@44: rc-web@44:

    rc-web@44: rc-web@44: rc-web@44: BreakDOM game screenshot rc-web@44: rc-web@44: rc-web@44:
      rc-web@44:
    • More efficient than AJAX/Comet Programming
      • rc-web@44:
    • Persistant bidirectional TCP socket
      • rc-web@44:
    • REQUEST/RESPONSE handshakes elimintated *
      • rc-web@44:
    rc-web@44: rc-web@44: rc-web@44:
    rc-web@44: rc-web@43:
    rc-web@43:

    HTTP://SOCKET.IO

    rc-web@42: rc-web@43:

    Socket.IO simplifies the WebSocket API and unifies the APIs of its fallback transports.

    rc-web@43: rc-web@43: BreakDOM game screenshot rc-web@43: rc-web@42: rc-web@43: rc-web@43:
    rc-web@42: rc-web@44:
    rc-web@44:

    Directed

    rc-web@44: BreakDOM game screenshot rc-web@44:
    rc-web@44: rc-web@44:
    rc-web@44:

    Distributed

    rc-web@44: BreakDOM game screenshot rc-web@44:
    rc-web@42: rc-web@42: rc-web@43:
    rc-web@43:

    Serverside Javascript

    rc-web@43:

    NodeJS Server

    rc-web@43: 
    var sio = require('socket.io')
rc-web@43: , http = require('http'), fs = require('fs'), static = require('node-static');
rc-web@42: 
rc-web@43: var clientFiles = new static.Server('./www');
rc-web@43: var httpServer = http.createServer(
rc-web@43:     function(request, response) {
rc-web@43: 	request.addListener('end', function () {
rc-web@43: 	    clientFiles.serve(request, response);
rc-web@43: 	    process.setMaxListeners(0);
rc-web@43: 	});    
rc-web@43:     }); httpServer.listen(8889);
rc-web@42: 
rc-web@43: var io = sio.listen(httpServer);
rc-web@43: io.set('log level', 1); // reduce logging                                                                
rc-web@43: io.sockets.on('connection', function (socket) {
    rc-web@43: rc-web@43:
    rc-web@43: rc-web@43:
    rc-web@43:

    Client Plumbing

    rc-web@43: rc-web@43: // load the sockets lib rc-web@43: 
    <script src="/socket.io/socket.io.js"> </script>
rc-web@43:
    rc-web@43: // connect to socket rc-web@43: 
    
rc-web@43: var socket = io.connect();
rc-web@43:
    rc-web@43: rc-web@43: //send something down the pipe rc-web@43: 
    
rc-web@43: function startChr() { socket.emit("startChr") }
    rc-web@43:
    rc-web@43: rc-web@43:
    rc-web@43:

    CLIENT->SERVER->CLIENT

    rc-web@43: Chronometer on server pushes -> client rc-web@43: 
    // instruction from "director" client executed on server
rc-web@43: socket.on('startChr', function () { startChr();}); 
rc-web@43: function startChr() { if (chronstate !== 1) { 
rc-web@43:    chronstate = 1; chronometer();} }
rc-web@43: 	    ---snip--- 
rc-web@43: 	    setTimeout(function(){chronometer()}, 100);
rc-web@43: 	    socket.broadcast.emit('chronFromServer', chron)
rc-web@43: 	    socket.emit('chronFromServer', chron) 
rc-web@43: 	    ---snip---
rc-web@43: // update chron value on the clients in line with server
rc-web@43: socket.on("chronFromServer", function(chron) {
rc-web@43:     $("div#client_chronometer").text(chron);
rc-web@43: });
    rc-web@43: rc-web@43:
    rc-web@43: rc-web@43:
    rc-web@43:

    NODESCORE: INFO PANEL

    rc-web@43: rc-web@44: screenshot rc-web@43: rc-web@43: rc-web@43:

    rc-web@43:

    rc-web@43:
    rc-web@43: rc-web@43:
    rc-web@43:

    NODESCORE: CHAT PANEL

    rc-web@46: rc-web@44: screenshot rc-web@46: rc-web@43: rc-web@43:

    rc-web@43:

    rc-web@43:
    rc-web@43: rc-web@43:
    rc-web@44:

    NODESCORE: Score

    rc-web@46: rc-web@44: screenshot rc-web@43: rc-web@43:

    rc-web@44: GNU/Lilypond - Phantom.js rc-web@43:

    rc-web@43:
    rc-web@43: rc-web@44:
    rc-web@44:

    Server Sequencer

    rc-web@44:
    rc-web@44: rc-web@44:
    rc-web@44:

    DEMO

    rc-web@44:
    rc-web@43: rc-web@43:
    rc-web@43:

    Future Work

    rc-web@43:

    the TODO list...

    rc-web@43:
      rc-web@44:
    1. Further Modularisation
      2. rc-web@48:
    2. Server on embedded linux (Gumstix) + openwrt
      3. rc-web@43:
    3. Animated SVG, WebGL, <audio>,<video>
      4. rc-web@44:
    4. Annotation via stylus?
      5. rc-web@43:
    5. rc-web@44: work with an ensemble over extended period - eg. residency
      rc-web@43:
      6. rc-web@48:
    6. rc-web@48: touch screen "director" interface
      rc-web@48:
      7. rc-web@48:
    7. rc-web@48: clean up the code :)
      rc-web@48:
      8. rc-web@48: rc-web@43:
    rc-web@43:
    rc-web@43: rc-web@43: rc-web@43: rc-web@43: rc-web@43: rc-web@43: rc-web@43:
    rc-web@43:

    links

    rc-web@43: This Presentation: http://nodescore.kiben.net/p/

    rc-web@43: rc-web@43: http://nodescore.kiben.net

    rc-web@43: rc-web@43: ICMC2012 Paper

    rc-web@47: src: http://gitorious.org/nodescore

    rc-web@43: rc-web@47: rob@kiben.net

    rc-web@43: rc-web@43: View Rob Canning's profile on LinkedIn rc-web@43:

    rc-web@43: rc-web@43: rc-web@43:
    rc-web@43:
    rc-web@43: rc-web@43: rc-web@43: rc-web@43: rc-web@43: rc-web@43:
    rc-web@43: rc-web@43:
    rc-web@43: rc-web@43: rc-web@43: rc-web@43: rc-web@43: rc-web@43: rc-web@42: rc-web@42: