diff --git a/web-service/public/js/bundle.js b/web-service/public/js/bundle.js
index 30fcb365ecd5bedbfd497552b018b70c5e529449..b1735eac3ed719834107f17b11318d20db71f07a 100644
--- a/web-service/public/js/bundle.js
+++ b/web-service/public/js/bundle.js
@@ -59,7 +59,7 @@ createVideoPlayer = () => {
     containerDiv.innerHTML = `<h1>Stream ${current_data.uri} is live right here!</h1><br>
     <button onclick="renderThumbnails(); closeStream()">Go back</button>
     <button onclick="connectToStream()">Start Stream</button><br>
-    <canvas id="ftlab-stream-video" width="640" height="360"></canvas>`;
+    <video id="ftlab-stream-video" width="640" height="360"></video>`;
     containerDiv.innerHTML += '<br>'
     containerDiv.innerHTML += ''
     createPeer();
@@ -151,35 +151,20 @@ createPeer = () => {
 connectToStream = () => {
     const element = document.getElementById('ftlab-stream-video');
     console.log(VideoConverter)
-    const converter = new VideoConverter.default(element, 30, 6);
+    const converter = new VideoConverter.default(element, 20, 6);
 
-    // start streaming
-    fetch('/h264/raw/stream').then((res) => {
-        if (res.body) {
-        const reader = res.body.getReader();
-        reader.read().then(function processResult(result) {
+    peer.bind(current_data.uri, (latency, streampckg, pckg) => {
+        if(pckg[0] === 2){
             function decode(value) {
-            converter.appendRawData(value);
+                converter.appendRawData(value);
             }
-    
-            if (result.done) {
-            decode([]);
-            console.log('Video Stream is done.');
-            return Promise.resolve();
-            }
-            decode(result.value);
-    
-            return reader.read().then(processResult);
-        });
-        converter.play();
-        this.canceler = (message) => {
-            reader.cancel();
-            console.log('Video Stream Request Canceled', message);
+            decode(pckg[5]);
+            converter.play();
         };
-        }
-    }).catch((err) => {
-        console.error('Video Stream Request error', err);
-    });
+    })
+
+    // Start the transaction
+    peer.send("get_stream", (current_data.uri, 30, 0, current_data.uri));
 }
 
 closeStream = () => {
diff --git a/web-service/public/js/index.js b/web-service/public/js/index.js
index e616660804f1f354835cd4e656dbe5c8c1b12897..9c3905baad6e95fd32a8aac4b95097d2c86571cd 100644
--- a/web-service/public/js/index.js
+++ b/web-service/public/js/index.js
@@ -58,7 +58,7 @@ createVideoPlayer = () => {
     containerDiv.innerHTML = `<h1>Stream ${current_data.uri} is live right here!</h1><br>
     <button onclick="renderThumbnails(); closeStream()">Go back</button>
     <button onclick="connectToStream()">Start Stream</button><br>
-    <canvas id="ftlab-stream-video" width="640" height="360"></canvas>`;
+    <video id="ftlab-stream-video" width="640" height="360"></video>`;
     containerDiv.innerHTML += '<br>'
     containerDiv.innerHTML += ''
     createPeer();
@@ -150,35 +150,20 @@ createPeer = () => {
 connectToStream = () => {
     const element = document.getElementById('ftlab-stream-video');
     console.log(VideoConverter)
-    const converter = new VideoConverter.default(element, 30, 6);
-
-    // start streaming
-    fetch('/h264/raw/stream').then((res) => {
-        if (res.body) {
-        const reader = res.body.getReader();
-        reader.read().then(function processResult(result) {
-            function decode(value) {
-            converter.appendRawData(value);
-            }
-    
-            if (result.done) {
-            decode([]);
-            console.log('Video Stream is done.');
-            return Promise.resolve();
+    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(result.value);
-    
-            return reader.read().then(processResult);
-        });
-        converter.play();
-        this.canceler = (message) => {
-            reader.cancel();
-            console.log('Video Stream Request Canceled', message);
+            decode(pckg[5]);
+            converter.play();
         };
-        }
-    }).catch((err) => {
-        console.error('Video Stream Request error', err);
-    });
+    })
+
+    // Start the transaction
+    peer.send("get_stream", (current_data.uri, 30, 0, current_data.uri));
 }
 
 closeStream = () => {