Show thumbnails and data in browser

components/streams/include/ftl/streams/feed.hpp

@@ -196,6 +196,7 @@ private:
 
 	void add(uint32_t fsid, const std::string &uri, ftl::stream::Stream *s);
 	nlohmann::json &_add_recent_source(const ftl::URI &uri);
+	void _saveThumbnail(const ftl::data::FrameSetPtr& fs);
 
 	/** callback for network (adds new sorces on connect/...) */
 	void _updateNetSources(ftl::net::Peer *p);

web-service/public/js/bundle.js

@@ -71306,14 +71306,14 @@ renderThumbnails = async () => {
             const encodedURI = encodeURIComponent(thumbnails[i])
             current_data.uri = thumbnails[i]
             try{
-                const someData = await fetch(`./stream/rgb?uri=${encodedURI}`)
-                if(!someData.ok){
-                    throw new Error('Image not found')
-                }
-                const myBlob = await someData.blob();
-                const objectURL = URL.createObjectURL(myBlob);
+                //const someData = await fetch(`./stream/rgb?uri=${encodedURI}`)
+                //if(!someData.ok){
+                //    throw new Error('Image not found')
+                //}
+                //const myBlob = await someData.blob();
+                //const objectURL = URL.createObjectURL(myBlob);
                 // containerDiv.innerHTML += createCard()
-                containerDiv.innerHTML += createCard(objectURL, i+4)
+                containerDiv.innerHTML += createCard(encodedURI, i+4)
             }catch(err){
                 console.log("Couldn't create thumbnail");
                 console.log(err) 
@@ -71328,7 +71328,7 @@ renderThumbnails = async () => {
  */
 createCard = (url, viewers) => {
     return `<div class='ftlab-card-component' >
-                <img src='${url}' class="thumbnail-img" alt="Hups" width="250px"></img>
+                <img src='stream/rgb?uri=${url}' class="thumbnail-img" alt="Hups" width="250px"></img>
                 <p>Viewers: ${viewers}</p>
                 <button onclick="createVideoPlayer()">button</button>
             </div>`
@@ -72693,8 +72693,8 @@ function Peer(ws) {
 		this._notify("disconnect", this);
 	}
-	let error = () => {
-		console.error("Socket error");
+	let error = (e) => {
+		console.error("Socket error: ", e);
 		this.sock.close();
 		this.status = kDisconnected;
 	}

web-service/public/js/index.js

@@ -82,14 +82,14 @@ renderThumbnails = async () => {
             const encodedURI = encodeURIComponent(thumbnails[i])
             current_data.uri = thumbnails[i]
             try{
-                const someData = await fetch(`./stream/rgb?uri=${encodedURI}`)
-                if(!someData.ok){
-                    throw new Error('Image not found')
-                }
-                const myBlob = await someData.blob();
-                const objectURL = URL.createObjectURL(myBlob);
+                //const someData = await fetch(`./stream/rgb?uri=${encodedURI}`)
+                //if(!someData.ok){
+                //    throw new Error('Image not found')
+                //}
+                //const myBlob = await someData.blob();
+                //const objectURL = URL.createObjectURL(myBlob);
                 // containerDiv.innerHTML += createCard()
-                containerDiv.innerHTML += createCard(objectURL, i+4)
+                containerDiv.innerHTML += createCard(encodedURI, i+4)
             }catch(err){
                 console.log("Couldn't create thumbnail");
                 console.log(err) 
@@ -104,7 +104,7 @@ renderThumbnails = async () => {
  */
 createCard = (url, viewers) => {
     return `<div class='ftlab-card-component' >
-                <img src='${url}' class="thumbnail-img" alt="Hups" width="250px"></img>
+                <img src='stream/rgb?uri=${url}' class="thumbnail-img" alt="Hups" width="250px"></img>
                 <p>Viewers: ${viewers}</p>
                 <button onclick="createVideoPlayer()">button</button>
             </div>`

web-service/server/src/index.js

@@ -7,7 +7,11 @@ const config = require('./utils/config')
 const User = require('./models/users')
 const Configs = require('./models/generic')
 const bodyParser = require('body-parser')
-const Url = require('url-parse')
+const Url = require('url-parse');
+const { LogLuvEncoding } = require('three');
+const msgpack = require('msgpack5')()
+  , encode  = msgpack.encode
+  , decode  = msgpack.decode;
 
 // ---- INDEXES ----------------------------------------------------------------
 app.use(express.static(__dirname + '/../../public'));
@@ -76,6 +80,8 @@ function RGBDStream(uri, peer) {
 	this.rxcount = 10;
 	this.rxmax = 10;
 
+	this.data = {};
+
 	let ix = uri.indexOf("?");
 	this.base_uri = (ix >= 0) ? uri.substring(0, ix) : uri;
 
@@ -87,6 +93,7 @@ function RGBDStream(uri, peer) {
 		//if (this.rxcount >= this.rxmax && this.clients.length > 0) {
 		//	this.subscribe();
 		//}
+		//console.log("Got frame: ", spacket);
 	});
 
 	/*peer.bind(uri, (frame, ttime, chunk, rgb, depth) => {
@@ -97,6 +104,9 @@ function RGBDStream(uri, peer) {
 			this.subscribe();
 		}
 	});*/
+
+	console.log("Sending request");
+	this.peer.send(this.base_uri, 0, [1,255,255,74,1],[7,0,1,255,0,new Uint8Array(0)]);
 }
 
 RGBDStream.prototype.addClient = function(peer) {
@@ -124,9 +134,8 @@ RGBDStream.prototype.subscribe = function() {
 
 RGBDStream.prototype.pushFrames = function(latency, spacket, packet) {
 	//Checks that the type is jpg
-	if (packet[0] === 0){
-		if (spacket[3] > 0) this.depth = packet[5];
-		else this.rgb = packet[5];
+	if (spacket[3] >= 64) {
+		this.data[spacket[3]] = decode(packet[5]);
 	}
 
 	//console.log("Frame = ", packet[0], packet[1]);
@@ -161,24 +170,29 @@ app.get('/streams', (req, res) => {
  * binded to that 
  */
 app.get('/stream/rgb', (req, res) => {
-	let uri = req.query.uri;
+	let uri = decodeURI(req.query.uri);
+	let ix = uri.indexOf("?");
+	let base_uri = (ix >= 0) ? uri.substring(0, ix) : uri;
+
 	if (uri_data.hasOwnProperty(uri)) {
 		//uri_data[uri].peer.send("get_stream", uri, 3, 9, [Peer.uuid], uri);
 		res.writeHead(200, {'Content-Type': 'image/jpeg'});
-		res.end(uri_data[uri].rgb);
+		res.end(uri_data[uri].data[74]);
 	}
 	res.end();
 });
 
 
-app.get('/stream/depth', (req, res) => {
+app.get('/stream/data', (req, res) => {
 	let uri = req.query.uri;
+	let channel = parseInt(req.query.channel);
 	const parsedURI = stringSplitter(uri)
 	if (uri_data.hasOwnProperty(parsedURI)) {
-		res.writeHead(200, {'Content-Type': 'image/png'});
-    	res.end(uri_data[parsedURI].depth);
-	}
+		//res.writeHead(200, {'Content-Type': 'image/png'});
+    	res.status(200).json(uri_data[parsedURI].data[channel]);
+	} else {
 		res.end();
+	}
 });
 
 app.post('/stream/config', async (req, res) => {
@@ -220,23 +234,19 @@ app.get('/stream/config', async(req, res) => {
 	
 	//example of uri ftlab.utu.fi/stream/config?uri=ftl://utu.fi#reconstruction_snap10/merge
 	const settings = req.query.settings;
-	const uri = req.query.uri;
-	const parsedURI = stringSplitter(uri)
+	const uri = decodeURI(req.query.uri);
+	//const parsedURI = stringSplitter(uri)
 
-	// //Checks if DB has data
-	// let dbData = await Configs.find({Settings: settings});
-	// if(dbData[0].data){
-	// 	return res.status(200).json(dbData[0]);
-	// }else{
-		let peer = uri_data[parsedURI].peer
+	if (uri_data.hasOwnProperty(uri)) {
+		let peer = uri_data[uri].peer
 		if (peer){
-			peer.rpc("get_cfg", (response) => {
+			peer.rpc("get_configurable", (response) => {
 				if(response){
-					return res.status(200).json(response);
+					return res.status(200).json(JSON.parse(response));
+				}
+			}, uri);
 		}
-			}, settings)
 	}
-	// }
 })