diff --git a/web-service/public/js/bundle.js b/web-service/public/js/bundle.js
index ebf9eb74268c88aedc669caf426c17583c843a98..1fa935de665164a0759f8931cd672616a2457f88 100644
--- a/web-service/public/js/bundle.js
+++ b/web-service/public/js/bundle.js
@@ -7,21 +7,42 @@ let peer;
function FtlStream(element, uri, options){
+
+ const backButton = document.createElement("BUTTON")
+ backButton.innerHTML = "STOP"
+ backButton.addEventListener("click",() => {this.stop()});
- 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
+ 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 = () => {
-
+FtlStream.prototype.connectToStream = function() {
const converter = new VideoConverter.default(this.video, 20, 6);
peer.bind(this.uri, (latency, streampckg, pckg) => {
if(pckg[0] === 2){
@@ -29,24 +50,33 @@ FtlStream.prototype.connectToStream = () => {
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)
+ 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()
+ sender(this)
}
-FtlStream.prototype.stop = () => {
+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
@@ -80,19 +110,9 @@ checkIfLoggedIn = async () => {
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();
}
/***********
diff --git a/web-service/public/js/index.js b/web-service/public/js/index.js
index bbbdba9be383f1828a118546c74c51ccb987a57c..2beecb7a2c771116d2143cc17c788b6c4330283d 100644
--- a/web-service/public/js/index.js
+++ b/web-service/public/js/index.js
@@ -6,21 +6,42 @@ let peer;
function FtlStream(element, uri, options){
+
+ const backButton = document.createElement("BUTTON")
+ backButton.innerHTML = "STOP"
+ backButton.addEventListener("click",() => {this.stop()});
- 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
+ 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 = () => {
-
+FtlStream.prototype.connectToStream = function() {
const converter = new VideoConverter.default(this.video, 20, 6);
peer.bind(this.uri, (latency, streampckg, pckg) => {
if(pckg[0] === 2){
@@ -28,24 +49,33 @@ FtlStream.prototype.connectToStream = () => {
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)
+ 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()
+ sender(this)
}
-FtlStream.prototype.stop = () => {
+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
@@ -79,19 +109,9 @@ checkIfLoggedIn = async () => {
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();
}
/***********