From 92fc5c162a4000fc3e4f24a7b9a408ad924dc7b9 Mon Sep 17 00:00:00 2001
From: Sami Spets <savasp@utu.fi>
Date: Mon, 16 Dec 2019 09:45:46 +0200
Subject: [PATCH] Thumbnails load the correct streams
---
web-service/public/js/bundle.js | 488 ++++++++++++++++----------------
web-service/public/js/index.js | 14 +-
2 files changed, 251 insertions(+), 251 deletions(-)
diff --git a/web-service/public/js/bundle.js b/web-service/public/js/bundle.js
index f3a3487c3..a9a39252d 100644
--- a/web-service/public/js/bundle.js
+++ b/web-service/public/js/bundle.js
@@ -1,248 +1,248 @@
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
-const Peer = require('../../server/src/peer')
-const VideoConverter = require('./lib/dist/video-converter');
-
-let current_data = {};
-let peer;
-
-
-function FtlStream(element, uri, options){
-
- const backButton = document.createElement("BUTTON")
- backButton.innerHTML = "STOP"
- backButton.addEventListener("click",() => {this.stop()});
-
- const playButton = document.createElement("BUTTON");
- playButton.innerHTML = "PLAY";
- playButton.addEventListener("click",() => {this.play()});
-
- const videoTag = document.createElement("video");
- videoTag.setAttribute("width", "640")
- videoTag.setAttribute("height", "360")
-
- const homeButton = document.createElement("BUTTON");
- homeButton.innerHTML = "Home";
- homeButton.addEventListener("click",() => {this.stop(); renderThumbnails()});
-
- const br = document.createElement("br")
-
- element.innerHTML = `<h1>Stream from source ${uri}</h1><br>`;
- element.appendChild(homeButton)
- element.appendChild(backButton)
- element.appendChild(playButton)
- element.appendChild(br)
- element.appendChild(videoTag)
-
-
- this.uri = uri
- this.running = true
- this.video = element.lastChild;
- this.element = element
-
- this.connectToStream()
-}
-
-FtlStream.prototype.connectToStream = function() {
- const converter = new VideoConverter.default(this.video, 20, 6);
- peer.bind(this.uri, (latency, streampckg, pckg) => {
- if(pckg[0] === 2){
- function decode(value){
- converter.appendRawData(value);
- }
- decode(pckg[5]);
- };
- })
-
- function sender(that) {
- const _this = that
- if(_this.running){
- peer.send("get_stream", (_this.uri, 30, 0, _this.uri));
- converter.play();
- setTimeout(() => sender(that), 1000)
- }else{
- converter.pause()
- setTimeout(() => sender(that), 1000)
- }
- }
- // Start the transaction
- sender(this)
-}
-
-FtlStream.prototype.stop = function() {
- this.running = false
-}
-
- FtlStream.prototype.play = function() {
- this.running = true
- }
-
-
-
-/**
- * Validates that the user is logged in by sending the token
- */
-checkIfLoggedIn = async () => {
- // const token = window.localStorage.getItem('token')
- // console.log(token)
- // if(!token){
- // console.log("You need to login")
- // renderLogin()
- // }else{
-
- // //Check if the token is valid
- // const response = await fetch('http://localhost:8080/auth/validation', {
- // method: 'POST',
- // headers: {'Authorization': token}
- // })
- // console.log('RESPONSE', response)
-
- // //Token is valid, show available streams
- // if(response.status === 200){
- // console.log("SUCCESS")
- createPeer()
- renderThumbnails()
-
- // }
- // }
-}
-
-
-
-
-createVideoPlayer = () => {
- const containerDiv = document.getElementById('container')
- const player = new FtlStream(containerDiv, current_data.uri, {});
- console.log(player)
-}
-
-/***********
- * THUMBNAILS
- ***********/
-
-//Returns a list of available streams
-getAvailableStreams = async () => {
- try{
- const streamsInJson = await fetch(`./streams`);
- const streams = await streamsInJson.json();
- console.log('AVAILABLE', streams)
- return streams;
- }catch(err){
- console.log(err)
- }
-}
-
-//Creates thumbnail (image) for all available streams and adds them to div class='container'
-renderThumbnails = async () => {
- const thumbnails = await getAvailableStreams();
- const containerDiv = document.getElementById('container')
- containerDiv.innerHTML = '';
- containerDiv.innerHTML = `<button onClick="configs()">change configs</button>`
- containerDiv.innerHTML += `<div class="ftlab-stream-thumbnails"></div>`
- if(thumbnails.length === 0){
- containerDiv.innerHTML = `<h3>No streams running currently</h3>`
- }else{
- for(var i=0; i<thumbnails.length; i++){
- 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);
- // containerDiv.innerHTML += createCard()
- containerDiv.innerHTML += createCard(objectURL, i+4)
- }catch(err){
- console.log("Couldn't create thumbnail");
- console.log(err)
- }
- }
- }
-}
-
-//Function to create single card
-createCard = (url, viewers) => {
- return `<div class='ftlab-card-component' >
- <img src='${url}' class="thumbnail-img" alt="Hups" width="250px"></img>
- <p>Viewers: ${viewers}</p>
- <button onclick="createVideoPlayer()">button</button>
- </div>`
-}
-
-
-createPeer = () => {
- peer = "";
- // FOR PRODUCTION
- // const ws = new WebSocket("ws://" + location.host + ":" + (location.port == "" ? "80" : location.port) + location.pathname);
- const ws = new WebSocket("ws://localhost:8080")
- ws.binaryType = "arraybuffer";
- peer = new Peer(ws)
-}
-
-webSocketTest = () => {
- peer.send("update_cfg", "ftl://utu.fi#reconstruction_default/0/renderer/cool_effect", "true")
-}
-
-
-
-
-closeStream = () => {
- peer.sock.close()
-}
-
-
-
-/**
- * **************
- * CONFIGURATIONS
- * **************
- */
-
-
-current_data.configURI = "ftl://utu.fi#reconstruction_snap8/net"
-
-configs = () => {
- const container = document.getElementById("container");
- container.innerHTML = `<div class="ftlab-configurations"></div>`;
- renderConfigOptions();
-}
-
-
-renderConfigOptions = () => {
- const input = `<p>input1</p><br>ftl://utu.fi#<input type="text">`
- const doc = document.getElementsByClassName('ftlab-configurations')[0];
- doc.innerHTML = input;
-}
-
-/**
- *
- */
-loadConfigs = async (str) => {
- const configURI = encodeURIComponent(`ftl://utu.fi#reconstruction_snap8${str}`);
- const uri = encodeURIComponent(current_data.uri)
- const rawResp = await fetch(`./stream/config?settings=${configURI}&uri=${uri}`)
- const response = await rawResp.json();
- const content = JSON.parse(response);
- container.innerHTML += `<p>${response}</p>`;
-}
-
-// current_data.configData = '{"peers": 1}';
-
-/**
- * Method to send configurations to backend
- */
-saveConfigs = async () => {
- let {uri, configURI, configData} = current_data
- const rawResp = await fetch('./stream/config', {
- method: 'POST',
- headers: {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({peerURI: uri, configURI, data: configData, saveToCPP: true})
- });
- const content = await rawResp.json();
+const Peer = require('../../server/src/peer')
+const VideoConverter = require('./lib/dist/video-converter');
+
+let current_data = {};
+let peer;
+
+
+function FtlStream(element, uri, options){
+
+ const backButton = document.createElement("BUTTON")
+ backButton.innerHTML = "STOP"
+ backButton.addEventListener("click",() => {this.stop()});
+
+ const playButton = document.createElement("BUTTON");
+ playButton.innerHTML = "PLAY";
+ playButton.addEventListener("click",() => {this.play()});
+
+ const videoTag = document.createElement("video");
+ videoTag.setAttribute("width", "640")
+ videoTag.setAttribute("height", "360")
+
+ const homeButton = document.createElement("BUTTON");
+ homeButton.innerHTML = "Home";
+ homeButton.addEventListener("click",() => {this.stop(); renderThumbnails()});
+
+ const br = document.createElement("br")
+
+ element.innerHTML = `<h1>Stream from source ${uri}</h1><br>`;
+ element.appendChild(homeButton)
+ element.appendChild(backButton)
+ element.appendChild(playButton)
+ element.appendChild(br)
+ element.appendChild(videoTag)
+
+
+ this.uri = uri
+ this.running = true
+ this.video = element.lastChild;
+ this.element = element
+
+ this.connectToStream()
+}
+
+FtlStream.prototype.connectToStream = function() {
+ const converter = new VideoConverter.default(this.video, 20, 6);
+ peer.bind(this.uri, (latency, streampckg, pckg) => {
+ if(pckg[0] === 2){
+ function decode(value){
+ converter.appendRawData(value);
+ }
+ decode(pckg[5]);
+ };
+ })
+
+ function sender(that) {
+ const _this = that
+ if(_this.running){
+ peer.send("get_stream", (_this.uri, 30, 0, _this.uri));
+ converter.play();
+ setTimeout(() => sender(that), 1000)
+ }else{
+ converter.pause()
+ setTimeout(() => sender(that), 1000)
+ }
+ }
+ // Start the transaction
+ sender(this)
+}
+
+FtlStream.prototype.stop = function() {
+ this.running = false
+}
+
+ FtlStream.prototype.play = function() {
+ this.running = true
+ }
+
+
+
+/**
+ * Validates that the user is logged in by sending the token
+ */
+checkIfLoggedIn = async () => {
+ // const token = window.localStorage.getItem('token')
+ // console.log(token)
+ // if(!token){
+ // console.log("You need to login")
+ // renderLogin()
+ // }else{
+
+ // //Check if the token is valid
+ // const response = await fetch('http://localhost:8080/auth/validation', {
+ // method: 'POST',
+ // headers: {'Authorization': token}
+ // })
+ // console.log('RESPONSE', response)
+
+ // //Token is valid, show available streams
+ // if(response.status === 200){
+ // console.log("SUCCESS")
+ createPeer()
+ renderThumbnails()
+
+ // }
+ // }
+}
+
+
+
+
+createVideoPlayer = (uri) => {
+ const containerDiv = document.getElementById('container')
+ const player = new FtlStream(containerDiv, uri, {});
+ console.log(player)
+}
+
+/***********
+ * THUMBNAILS
+ ***********/
+
+//Returns a list of available streams
+getAvailableStreams = async () => {
+ try{
+ const streamsInJson = await fetch(`./streams`);
+ const streams = await streamsInJson.json();
+ console.log('AVAILABLE', streams)
+ return streams;
+ }catch(err){
+ console.log(err)
+ }
+}
+
+//Creates thumbnail (image) for all available streams and adds them to div class='container'
+renderThumbnails = async () => {
+ const thumbnails = await getAvailableStreams();
+ const containerDiv = document.getElementById('container')
+ containerDiv.innerHTML = '';
+ containerDiv.innerHTML = `<button onClick="configs()">change configs</button>`
+ containerDiv.innerHTML += `<div class="ftlab-stream-thumbnails"></div>`
+ if(thumbnails.length === 0){
+ containerDiv.innerHTML = `<h3>No streams running currently</h3>`
+ }else{
+ for(var i=0; i<thumbnails.length; i++){
+ 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);
+ // containerDiv.innerHTML += createCard()
+ containerDiv.innerHTML += createCard(objectURL, i+4, thumbnails[i])
+ }catch(err){
+ console.log("Couldn't create thumbnail");
+ console.log(err)
+ }
+ }
+ }
+}
+
+//Function to create single card
+createCard = (url, viewers, uri) => {
+ return `<div class='ftlab-card-component' >
+ <img src='${url}' class="thumbnail-img" alt="Hups" width="250px"></img>
+ <p>Viewers: ${viewers}</p>
+ <button onclick="createVideoPlayer('${uri}')">button</button>
+ </div>`
+}
+
+
+createPeer = () => {
+ peer = "";
+ // FOR PRODUCTION
+ const ws = new WebSocket("ws://" + location.host + ":" + (location.port == "" ? "80" : location.port) + location.pathname);
+ //const ws = new WebSocket("ws://localhost:8080")
+ ws.binaryType = "arraybuffer";
+ peer = new Peer(ws)
+}
+
+webSocketTest = () => {
+ peer.send("update_cfg", "ftl://utu.fi#reconstruction_default/0/renderer/cool_effect", "true")
+}
+
+
+
+
+closeStream = () => {
+ peer.sock.close()
+}
+
+
+
+/**
+ * **************
+ * CONFIGURATIONS
+ * **************
+ */
+
+
+current_data.configURI = "ftl://utu.fi#reconstruction_snap8/net"
+
+configs = () => {
+ const container = document.getElementById("container");
+ container.innerHTML = `<div class="ftlab-configurations"></div>`;
+ renderConfigOptions();
+}
+
+
+renderConfigOptions = () => {
+ const input = `<p>input1</p><br>ftl://utu.fi#<input type="text">`
+ const doc = document.getElementsByClassName('ftlab-configurations')[0];
+ doc.innerHTML = input;
+}
+
+/**
+ *
+ */
+loadConfigs = async (str) => {
+ const configURI = encodeURIComponent(`ftl://utu.fi#reconstruction_snap8${str}`);
+ const uri = encodeURIComponent(current_data.uri)
+ const rawResp = await fetch(`./stream/config?settings=${configURI}&uri=${uri}`)
+ const response = await rawResp.json();
+ const content = JSON.parse(response);
+ container.innerHTML += `<p>${response}</p>`;
+}
+
+// current_data.configData = '{"peers": 1}';
+
+/**
+ * Method to send configurations to backend
+ */
+saveConfigs = async () => {
+ let {uri, configURI, configData} = current_data
+ const rawResp = await fetch('./stream/config', {
+ method: 'POST',
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({peerURI: uri, configURI, data: configData, saveToCPP: true})
+ });
+ const content = await rawResp.json();
}
},{"../../server/src/peer":36,"./lib/dist/video-converter":9}],2:[function(require,module,exports){
"use strict";
diff --git a/web-service/public/js/index.js b/web-service/public/js/index.js
index 2beecb7a2..8c3f0e983 100644
--- a/web-service/public/js/index.js
+++ b/web-service/public/js/index.js
@@ -108,9 +108,9 @@ checkIfLoggedIn = async () => {
-createVideoPlayer = () => {
+createVideoPlayer = (uri) => {
const containerDiv = document.getElementById('container')
- const player = new FtlStream(containerDiv, current_data.uri, {});
+ const player = new FtlStream(containerDiv, uri, {});
console.log(player)
}
@@ -151,7 +151,7 @@ renderThumbnails = async () => {
const myBlob = await someData.blob();
const objectURL = URL.createObjectURL(myBlob);
// containerDiv.innerHTML += createCard()
- containerDiv.innerHTML += createCard(objectURL, i+4)
+ containerDiv.innerHTML += createCard(objectURL, i+4, thumbnails[i])
}catch(err){
console.log("Couldn't create thumbnail");
console.log(err)
@@ -161,11 +161,11 @@ renderThumbnails = async () => {
}
//Function to create single card
-createCard = (url, viewers) => {
+createCard = (url, viewers, uri) => {
return `<div class='ftlab-card-component' >
<img src='${url}' class="thumbnail-img" alt="Hups" width="250px"></img>
<p>Viewers: ${viewers}</p>
- <button onclick="createVideoPlayer()">button</button>
+ <button onclick="createVideoPlayer('${uri}')">button</button>
</div>`
}
@@ -173,8 +173,8 @@ createCard = (url, viewers) => {
createPeer = () => {
peer = "";
// FOR PRODUCTION
- // const ws = new WebSocket("ws://" + location.host + ":" + (location.port == "" ? "80" : location.port) + location.pathname);
- const ws = new WebSocket("ws://localhost:8080")
+ const ws = new WebSocket("ws://" + location.host + ":" + (location.port == "" ? "80" : location.port) + location.pathname);
+ //const ws = new WebSocket("ws://localhost:8080")
ws.binaryType = "arraybuffer";
peer = new Peer(ws)
}
--
GitLab