bfg-common 1.0.0

package/public/spice-console/process/playbackprocess.js

@@ -0,0 +1,233 @@
+/*
+    Copyright (c) 2016 eyeOS
+
+    This file is part of Open365.
+
+    Open365 is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as
+    published by the Free Software Foundation, either version 3 of the
+    License, or (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program. If not, see <http://www.gnu.org/licenses/>.
+*/
+
+wdi.PlaybackProcess = $.spcExtend(wdi.EventObject.prototype, {
+	_lastApp: null,
+	started: false,
+	minBuffSize: 1024*32,
+	frequency: null,
+	channels: null,
+	audioContext: null,
+	startTime: null, // controls the playback time if no delay occurs
+	hasAudioSupport: true, //whether the browser supports HTML5 Web Audio API
+
+	typedBuffer: null,
+	position: null,
+
+
+	init: function(c) {
+		this.app = c.app;
+		this.audioContext = this.getAudioContext();
+		if (this.audioContext) {
+			this.hasAudioSupport = true;
+		} else {
+			this.hasAudioSupport = false;
+			wdi.Debug.warn('The client browser does not support Web Audio API');
+		}
+		this.startTime = 0;
+		this.typedBuffer = new ArrayBuffer(34688);
+		this.position = 0;
+	},
+
+	dispose: function() {
+		this.clearEvents();
+		this._lastApp = null;
+		this.started = false;
+		this.frequency = null;
+		this.channels = null;
+		this.audioContext = null;
+		this.startTime = null;
+		this.hasAudioSupport = true;
+		this.typedBuffer = null;
+		this.position = null;
+	},
+
+	getAudioContext: function() {
+		//standard browser object
+		try {
+			return new AudioContext();
+		} catch(e) {
+
+		}
+
+		//chrome and safari
+		try {
+		   return new webkitAudioContext();
+
+		} catch(e) {
+
+		}
+
+		return false;
+	},
+
+	process: function(spiceMessage) {
+
+		// if (this.hasAudioSupport && !Modernizr.touch) {
+		if (this.hasAudioSupport) {
+			switch (spiceMessage.messageType) {
+				case wdi.SpiceVars.SPICE_MSG_PLAYBACK_MODE:
+					break;
+				case wdi.SpiceVars.SPICE_MSG_PLAYBACK_START:
+					var packet = spiceMessage.args;
+					this.channels = packet.channels;
+					this.frequency = packet.frequency;
+					break;
+				case wdi.SpiceVars.SPICE_MSG_PLAYBACK_STOP:
+					this.startTime = 0;
+					var packet = spiceMessage.args;
+					this.flush();
+					break;
+				case wdi.SpiceVars.SPICE_MSG_PLAYBACK_DATA:
+					// While we receive data chunks, we store them in a buffer, so than when it is full we play the sound and empty it.
+					// With this we get a more fluid playback and better overall performance than if we just played the data the moment we got it
+					var packet = spiceMessage.args;
+					var dataTimestamp = spiceMessage.args.multimedia_time;
+
+
+					var tmpview = new Uint8Array(this.typedBuffer);
+					tmpview.set(packet.data, this.position);
+					this.position += packet.data.length;
+					this._lastApp = this.app;
+
+					if(this.position >= this.minBuffSize) {
+						// ok, the buffer is full. We send the data to be played and later we can empty it to make room for more audio
+						this.flush(dataTimestamp);
+					}
+					break;
+			}
+		} else {
+			//TODO:
+			// If the browser doesn't support Web Audio, we could still attach a wav header to the raw PCM we receive from spice and use the more widespread supported audio tag
+			// Meanwhile, we can skip all the audio packets and gain some performance at least
+		}
+	},
+
+	/**
+	 * Plays all the audio buffer and empties it
+	 *
+	 * @param app
+	 * @param dataTimestamp
+	 */
+	flush: function(dataTimestamp) {
+		if(this.position > 0) {
+			if (this.started) {
+				this.playSound(this.typedBuffer, dataTimestamp);
+			}
+			this.position = 0;
+			this.typedBuffer = new ArrayBuffer(34688);
+		}
+	},
+
+	/**
+	 * Plays the raw pcm data passed as param using HTML5's Web Audio API
+	 *
+	 * @param buffer
+	 */
+	playSound: function(buffer, dataTimestamp) {
+		if(this.channels == 2) {
+			return this.playSoundStereo(buffer, dataTimestamp);
+		}
+
+		var audio = new Int16Array(buffer);
+
+		var channelData = new Array(this.channels);
+		for(var i = 0;i<this.channels;i++) {
+			channelData[i] = new Float32Array(audio.length / 2);
+		}
+
+		var channelCounter = 0;
+		for (var i = 0; i < audio.length; ) {
+		  for(var c = 0; c < this.channels; c++) {
+			  //because the audio data spice gives us is 16 bits signed int (32768) and we wont to get a float out of it (between -1.0' and 1.0)
+			  channelData[c][channelCounter] = audio[i++] / 32768;
+		  }
+		  channelCounter++;
+		}
+
+		var source = this.audioContext['createBufferSource'](); // creates a sound source
+		var audioBuffer = this.audioContext['createBuffer'](this.channels, channelCounter, this.frequency);
+		for(var i=0;i < this.channels; i++) {
+			audioBuffer['getChannelData'](i)['set'](channelData[i]);
+		}
+
+		this._play(source, audioBuffer, dataTimestamp);
+	},
+
+	/**
+	 * Plays the raw pcm STEREO data passed as param using HTML5's Web Audio API
+	 *
+	 * @param buffer
+	 */
+	playSoundStereo: function(buffer, dataTimestamp) {
+		// Each data packet is 16 bits, the first being left channel data and the second being right channel data (LR-LR-LR-LR...)
+		var audio = new Int16Array(buffer);
+
+		// We split the audio buffer in two channels. Float32Array is the type required by Web Audio API
+		var left = new Float32Array(audio.length / 2);
+		var right = new Float32Array(audio.length / 2);
+
+		var channelCounter = 0;
+
+		var audioContext = this.audioContext;
+		var len = audio.length;
+
+		for (var i = 0; i < len; ) {
+		  //because the audio data spice gives us is 16 bits signed int (32768) and we wont to get a float out of it (between -1.0 and 1.0)
+		  left[channelCounter] = audio[i++] / 32768;
+		  right[channelCounter] = audio[i++] / 32768;
+		  channelCounter++;
+		}
+
+		var source = audioContext['createBufferSource'](); // creates a sound source
+		var audioBuffer = audioContext['createBuffer'](2, channelCounter, this.frequency);
+
+		audioBuffer['getChannelData'](0)['set'](left);
+		audioBuffer['getChannelData'](1)['set'](right);
+
+		this._play(source, audioBuffer, dataTimestamp);
+	},
+
+	_play: function(source, audioBuffer, dataTimestamp) {
+		var wait = 0;
+		if (dataTimestamp) {
+			var elapsedTime = Date.now() - this.app.lastMultimediaTime; // time passed since we received the last multimedia time from main channel
+			var currentMultimediaTime = elapsedTime + this.app.multimediaTime; // total delay we have at the moment
+			wait = dataTimestamp - currentMultimediaTime;
+			if (wait < 0) {
+				wait = 0;
+			}
+		}
+		source['buffer'] = audioBuffer;
+		source['connect'](this.audioContext['destination']);	   // connect the source to the context's destination (the speakers)
+
+		//if (!Modernizr.touch) {
+			source['start'](this.startTime + wait);						   // play the source now
+		//} else {
+		//	source.noteOn(0);
+		//}
+
+		this.startTime += audioBuffer.duration;
+	},
+
+	startAudio: function () {
+		this.started = true;
+		this.flush();
+	}
+});

package/public/spice-console/run.js

@@ -0,0 +1,181 @@
+const getURLParameter = (parameter) => {
+  const regex = new RegExp(`${parameter}=([^&]+)`)
+  const match = regex.exec(window.location.pathname)
+  return match && match[1]
+}
+
+let vmHost = window.location.hostname
+if (vmHost === 'localhost') {
+  vmHost = '10.10.101.107' // Для разработки
+}
+const vmId = getURLParameter('id')
+const vmPort = window.config.public.PORT
+
+window.app = new Application({
+  supportHighDPI: false,
+})
+
+function start() {
+  wdi.graphicDebug = new wdi.GraphicDebug({ debugMode: false })
+  let cancelReconnection = false
+  let cancelFreezeTimer, cancelReconnectionTimer
+
+  const handleWindowAction = function (action, params) {
+    if (action === 'windowClosed') {
+      $(params.canvas).remove()
+      $(params.eventLayer).remove()
+    } else if (action === 'windowMoved') {
+      $(params.canvas).css({
+        top: params.info.top + 'px',
+        left: params.info.left + 'px',
+      })
+      $(params.eventLayer).css({
+        top: params.info.top + 'px',
+        left: params.info.left + 'px',
+      })
+    } else if (action === 'init' || action === 'windowCreated') {
+      let item = null
+      let canvas = null
+      let eventlayer = null
+      const body = $('body')
+
+      for (let i in params) {
+        item = params[i]
+        const position = item.position * 2
+        canvas = $(item.canvas).css({
+          zIndex: 10000 - position - 1,
+          position: 'absolute',
+          top: item.info.top + 'px',
+          left: item.info.left + 'px',
+        })
+        eventlayer = $(item.eventLayer).css({
+          top: item.info.top + 'px',
+          left: item.info.left + 'px',
+          zIndex: 10000 - position,
+        })
+        body.append(canvas)
+        body.append(eventlayer)
+      }
+    } else if (action === 'ready') {
+      app.setReconnecting(false)
+      if (cancelReconnectionTimer?.clearTimeout) {
+        cancelReconnectionTimer()
+        cancelReconnectionTimer = false
+      }
+      const width = $(window).width()
+      const height = $(window).height()
+
+      app.sendCommand(
+        'setResolution',
+        app.toSpiceResolution({
+          width: width,
+          height: height,
+        })
+      )
+      if (wdi.IntegrationBenchmarkEnabled) {
+        $('#integrationBenchmark').css({ display: 'inline' })
+        $('#launchWordButton').prop('disabled', false)
+      }
+    } else if (action === 'resolution') {
+    } else if (action === 'windowMinimized') {
+      $(params.canvas).css({ display: 'none' })
+      $(params.eventLayer).css({ display: 'none' })
+    } else if (action === 'windowMaximized') {
+      $(params.canvas).css({
+        top: params.info.top + 'px',
+        left: params.info.left + 'px',
+      })
+      $(params.eventLayer).css({
+        top: params.info.top + 'px',
+        left: params.info.left + 'px',
+      })
+    } else if (action === 'windowRestored') {
+      $(params.canvas).css({ display: 'block' })
+      $(params.eventLayer).css({ display: 'block' })
+      $(params.canvas).css({
+        top: params.info.top + 'px',
+        left: params.info.left + 'px',
+      })
+      $(params.eventLayer).css({
+        top: params.info.top + 'px',
+        left: params.info.left + 'px',
+      })
+    } else if (action === 'windowFocused') {
+      //debugger; //eyeos should move the window to front!
+    } else if (action === 'timeLapseDetected') {
+      wdi.Debug.log('Detected time lapse of ', params, 'seconds')
+    } else if (action === 'error') {
+      if (!app.getReconnecting()) {
+        if (!cancelFreezeTimer) {
+          cancelFreezeTimer = setTimeout(function () {
+            console.log('cancelFreeze')
+            app.cancelFreeze()
+          }, 10000)
+        }
+        if (!cancelReconnectionTimer) {
+          cancelReconnectionTimer = setTimeout(function () {
+            console.log('cancel reconnection')
+            cancelReconnection = true
+          }, 60000)
+          // console.log(cancelReconnectionTimer, 3333)
+        }
+      }
+
+      setTimeout(function () {
+        if (!cancelReconnection) {
+          console.log('Trying reconnect ', Date.now())
+          app.reconnect({
+            freeze: true,
+          })
+        }
+      }, 1000)
+    }
+  }
+
+  $(window)['resize'](function () {
+    app.sendCommand(
+      'setResolution',
+      app.toSpiceResolution({
+        width: $(window).width(),
+        height: $(window).height(),
+      })
+    )
+  })
+
+  const runParams = {
+    callback: handleWindowAction,
+    context: this,
+    host: vmHost,
+    port: vmPort,
+    protocol: 'wss',
+    // 'vmToken': getURLParameter('vmtoken') || '',
+    token: 'password',
+    vmHost: vmHost,
+    vmPort: vmPort,
+    vmid: vmId,
+    useBus: false,
+    busHost: 'localhost',
+    busPort: 61613,
+    busSubscriptions: ['/topic/00000000-0000-0000-0000-000000000000'],
+    busUser: '00000000-0000-0000-0000-000000000000',
+    busPass: 'potato',
+    layout: 'es',
+    useWorkers: true,
+    seamlessDesktopIntegration: false,
+    connectionControl: false,
+    heartbeatToken: 'heartbeat',
+    heartbeatTimeout: 4000, //miliseconds
+    externalClipboardHandling: false,
+    disableClipboard: false,
+    layer: document.getElementById('vmw'),
+    // vmInfoToken: getURLParameter('vmInfoToken'),
+    disableMessageBuffering: true,
+    clientOffset: {
+      x: 0,
+      y: 0,
+    },
+  }
+  app.run(runParams)
+}
+
+$(document).ready(start)