diff --git a/api/index.js b/api/index.js index 07b296f1..bf15e05e 100644 --- a/api/index.js +++ b/api/index.js @@ -85,8 +85,8 @@ var connect_to_api = function () { console.log("got image"); } } catch (error) { - // console.log("could not parse as json, must be bytes"); - send_image_data_to_clients(message); + console.log("could not parse as json"); + // send_image_data_to_clients(message); } }); diff --git a/api/views/index.ejs b/api/views/index.ejs index fa92392e..1c001531 100644 --- a/api/views/index.ejs +++ b/api/views/index.ejs @@ -82,21 +82,21 @@ console.log("OPENED EVENT"); } - events.onmessage = (event) => { - // console.log("MESSAGE RECEIVED"); - const eventData = JSON.parse(event.data); + // events.onmessage = (event) => { + // // console.log("MESSAGE RECEIVED"); + // const eventData = JSON.parse(event.data); - // Check if the event contains image data - if (eventData.image) { - const base64Data = eventData.image; + // // Check if the event contains image data + // if (eventData.image) { + // const base64Data = eventData.image; - // Get the element - const imgElement = document.getElementById('result-video'); + // // Get the element + // const imgElement = document.getElementById('result-video'); - // Decode the base64 image and set it as the source of the element - decodeBase64Image(base64Data, imgElement); - } - } + // // Decode the base64 image and set it as the source of the element + // decodeBase64Image(base64Data, imgElement); + // } + // } }; function assign_button_callbacks() { @@ -206,6 +206,41 @@ console.log("arm/disarm"); } + function connect_to_video_stream() { + console.log("Connecting to websocket") + const video_holder = document.getElementById("result-video"); + const socket = new WebSocket('ws://10.0.100.40:9002'); + + socket.addEventListener('open', (event) => { + console.log('Connected to WebSocket server'); + }); + + socket.addEventListener('message', (event) => { + // Assuming the received data is an ArrayBuffer or Uint8Array + const imageData = event.data; + + // Convert the image data to a Blob + const blob = new Blob([imageData], { type: 'image/jpeg' }); + + // Generate a temporary URL for the Blob + const imageURL = URL.createObjectURL(blob); + + // Set the src attribute of the element + video_holder.src = imageURL; + }); + + // Connection closed + socket.addEventListener('close', (event) => { + console.log('Disconnected from WebSocket server'); + }); + + // Error occurred + socket.addEventListener('error', (event) => { + console.error('WebSocket error:', event.error); + }); + + } + function connect() { var received = false; var xhr = new XMLHttpRequest(); @@ -218,6 +253,7 @@ // console.log(status) document.getElementById("connectedlabel").innerHTML = "Connected: true"; document.getElementById("connectbutton").disabled = true; + connect_to_video_stream(); } } else { console.log("error");