From 272b86914021b1220ea2df2c2421c0e9abc309c3 Mon Sep 17 00:00:00 2001
From: Sami Spets <savasp@utu.fi>
Date: Fri, 13 Dec 2019 10:26:02 +0200
Subject: [PATCH] FtlStream class created
---
web-service/public/js/bundle.js | 115 ++++++++++++++++++++------------
web-service/public/js/index.js | 115 ++++++++++++++++++++------------
2 files changed, 144 insertions(+), 86 deletions(-)
diff --git a/web-service/public/js/bundle.js b/web-service/public/js/bundle.js
index 841fec172..ebf9eb742 100644
--- a/web-service/public/js/bundle.js
+++ b/web-service/public/js/bundle.js
@@ -4,7 +4,49 @@ const VideoConverter = require('./lib/dist/video-converter');
let current_data = {};
let peer;
-let player;
+
+
+function FtlStream(element, uri, options){
+
+ element.innerHTML = `<h1>Stream from source ${uri}</h1><br>
+ <button class="ftlab-backButton" onclick="renderThumbnails(); this.stop()">Go back</button>
+ <button class="ftlab-testSocket" onclick="webSocketTest()">WebSocket Test</button><br>
+ <video class="ftlab-stream-video" width="640" height="360"></video>`;
+
+ this.video = element.lastChild;
+ this.element = element
+ this.uri = uri
+ this.running = true
+ this.connectToStream()
+}
+
+FtlStream.prototype.connectToStream = () => {
+
+ 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]);
+ converter.play();
+ };
+ })
+
+ const sender = () =>{
+ if(this.running){
+ peer.send("get_stream", (this.uri, 30, 0, this.uri));
+ setTimeout(sender, 1000)
+ }
+ }
+ // Start the transaction
+ sender()
+}
+
+FtlStream.prototype.stop = () => {
+ this.running = false
+}
+
/**
* Validates that the user is logged in by sending the token
@@ -27,15 +69,37 @@ checkIfLoggedIn = async () => {
// //Token is valid, show available streams
// if(response.status === 200){
// console.log("SUCCESS")
- renderThumbnails()
+ createPeer()
+ renderThumbnails()
// }
// }
}
-/**
- * Returns a list of available streams
- */
+
+
+
+createVideoPlayer = () => {
+
+ const containerDiv = document.getElementById('container')
+ const player = new FtlStream(containerDiv, current_data.uri, {});
+ console.log(player)
+ // containerDiv.innerHTML = `<h1>Stream from source ${current_data.uri}</h1><br>
+ // <button onclick="renderThumbnails(); closeStream()">Go back</button>
+ // <button onclick="connectToStream()">Start Stream</button><br>
+ // <button onclick="webSocketTest()">WebSocket Test</button><br>
+ // <video id="ftlab-stream-video" width="640" height="360"></video>`;
+ // containerDiv.innerHTML += '<br>'
+ // containerDiv.innerHTML += ''
+ // createPeer();
+ // connectToStream();
+}
+
+/***********
+ * THUMBNAILS
+ ***********/
+
+//Returns a list of available streams
getAvailableStreams = async () => {
try{
const streamsInJson = await fetch(`./streams`);
@@ -47,23 +111,7 @@ getAvailableStreams = async () => {
}
}
-
-createVideoPlayer = () => {
- const containerDiv = document.getElementById('container')
- containerDiv.innerHTML = `<h1>Stream from source ${current_data.uri}</h1><br>
- <button onclick="renderThumbnails(); closeStream()">Go back</button>
- <button onclick="connectToStream()">Start Stream</button><br>
- <button onclick="webSocketTest()">WebSocket Test</button><br>
- <video id="ftlab-stream-video" width="640" height="360"></video>`;
- containerDiv.innerHTML += '<br>'
- containerDiv.innerHTML += ''
- createPeer();
- connectToStream();
-}
-
-/**
- * Creates thumbnail (image) for all available streams and adds them to div class='container'
- */
+//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')
@@ -93,10 +141,7 @@ renderThumbnails = async () => {
}
}
-
-/**
- * Method to create a single thumbnail
- */
+//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>
@@ -107,7 +152,7 @@ createCard = (url, viewers) => {
createPeer = () => {
- peer = null;
+ peer = "";
// FOR PRODUCTION
// const ws = new WebSocket("ws://" + location.host + ":" + (location.port == "" ? "80" : location.port) + location.pathname);
const ws = new WebSocket("ws://localhost:8080")
@@ -120,23 +165,7 @@ webSocketTest = () => {
}
-connectToStream = () => {
- const element = document.getElementById('ftlab-stream-video');
- const converter = new VideoConverter.default(element, 20, 6);
-
- peer.bind(current_data.uri, (latency, streampckg, pckg) => {
- if(pckg[0] === 2){
- function decode(value){
- converter.appendRawData(value);
- }
- decode(pckg[5]);
- converter.play();
- };
- })
- // Start the transaction
- peer.send("get_stream", (current_data.uri, 30, 0, current_data.uri));
-}
closeStream = () => {
peer.sock.close()
diff --git a/web-service/public/js/index.js b/web-service/public/js/index.js
index f791757d7..bbbdba9be 100644
--- a/web-service/public/js/index.js
+++ b/web-service/public/js/index.js
@@ -3,7 +3,49 @@ const VideoConverter = require('./lib/dist/video-converter');
let current_data = {};
let peer;
-let player;
+
+
+function FtlStream(element, uri, options){
+
+ element.innerHTML = `<h1>Stream from source ${uri}</h1><br>
+ <button class="ftlab-backButton" onclick="renderThumbnails(); this.stop()">Go back</button>
+ <button class="ftlab-testSocket" onclick="webSocketTest()">WebSocket Test</button><br>
+ <video class="ftlab-stream-video" width="640" height="360"></video>`;
+
+ this.video = element.lastChild;
+ this.element = element
+ this.uri = uri
+ this.running = true
+ this.connectToStream()
+}
+
+FtlStream.prototype.connectToStream = () => {
+
+ 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]);
+ converter.play();
+ };
+ })
+
+ const sender = () =>{
+ if(this.running){
+ peer.send("get_stream", (this.uri, 30, 0, this.uri));
+ setTimeout(sender, 1000)
+ }
+ }
+ // Start the transaction
+ sender()
+}
+
+FtlStream.prototype.stop = () => {
+ this.running = false
+}
+
/**
* Validates that the user is logged in by sending the token
@@ -26,15 +68,37 @@ checkIfLoggedIn = async () => {
// //Token is valid, show available streams
// if(response.status === 200){
// console.log("SUCCESS")
- renderThumbnails()
+ createPeer()
+ renderThumbnails()
// }
// }
}
-/**
- * Returns a list of available streams
- */
+
+
+
+createVideoPlayer = () => {
+
+ const containerDiv = document.getElementById('container')
+ const player = new FtlStream(containerDiv, current_data.uri, {});
+ console.log(player)
+ // containerDiv.innerHTML = `<h1>Stream from source ${current_data.uri}</h1><br>
+ // <button onclick="renderThumbnails(); closeStream()">Go back</button>
+ // <button onclick="connectToStream()">Start Stream</button><br>
+ // <button onclick="webSocketTest()">WebSocket Test</button><br>
+ // <video id="ftlab-stream-video" width="640" height="360"></video>`;
+ // containerDiv.innerHTML += '<br>'
+ // containerDiv.innerHTML += ''
+ // createPeer();
+ // connectToStream();
+}
+
+/***********
+ * THUMBNAILS
+ ***********/
+
+//Returns a list of available streams
getAvailableStreams = async () => {
try{
const streamsInJson = await fetch(`./streams`);
@@ -46,23 +110,7 @@ getAvailableStreams = async () => {
}
}
-
-createVideoPlayer = () => {
- const containerDiv = document.getElementById('container')
- containerDiv.innerHTML = `<h1>Stream from source ${current_data.uri}</h1><br>
- <button onclick="renderThumbnails(); closeStream()">Go back</button>
- <button onclick="connectToStream()">Start Stream</button><br>
- <button onclick="webSocketTest()">WebSocket Test</button><br>
- <video id="ftlab-stream-video" width="640" height="360"></video>`;
- containerDiv.innerHTML += '<br>'
- containerDiv.innerHTML += ''
- createPeer();
- connectToStream();
-}
-
-/**
- * Creates thumbnail (image) for all available streams and adds them to div class='container'
- */
+//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')
@@ -92,10 +140,7 @@ renderThumbnails = async () => {
}
}
-
-/**
- * Method to create a single thumbnail
- */
+//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>
@@ -106,7 +151,7 @@ createCard = (url, viewers) => {
createPeer = () => {
- peer = null;
+ peer = "";
// FOR PRODUCTION
// const ws = new WebSocket("ws://" + location.host + ":" + (location.port == "" ? "80" : location.port) + location.pathname);
const ws = new WebSocket("ws://localhost:8080")
@@ -119,23 +164,7 @@ webSocketTest = () => {
}
-connectToStream = () => {
- const element = document.getElementById('ftlab-stream-video');
- const converter = new VideoConverter.default(element, 20, 6);
-
- peer.bind(current_data.uri, (latency, streampckg, pckg) => {
- if(pckg[0] === 2){
- function decode(value){
- converter.appendRawData(value);
- }
- decode(pckg[5]);
- converter.play();
- };
- })
- // Start the transaction
- peer.send("get_stream", (current_data.uri, 30, 0, current_data.uri));
-}
closeStream = () => {
peer.sock.close()
--
GitLab