diff --git a/www/src/services/webrtc-service.js b/www/src/services/webrtc-service.js
new file mode 100644
index 0000000..3b173cf
--- /dev/null
+++ b/www/src/services/webrtc-service.js
@@ -0,0 +1,54 @@
+import WebsocketService from "./websocket-service";
+
+function WebRTCService() {
+  let videoElement;
+  let peerConnection;
+
+  function connect() {
+    let configuration = getConfiguration();
+    peerConnection = new RTCPeerConnection(configuration);
+    peerConnection.onicecandidate = (event) => {
+      if (event.candidate) {
+        console.log("New ICE candidate:", event.candidate);
+      }
+    };
+    peerConnection
+      .createOffer({ offerToReceiveAudio: true, offerToReceiveVideo: true })
+      .then((offer) => {
+        peerConnection.setLocalDescription(offer);
+        console.log("Local offer:", offer);
+          sendOffer(offer)
+      })
+      .catch((error) => {
+        console.error("Error creating offer:", error);
+      });
+  }
+    
+  function sendOffer(offer) {
+    WebsocketService.sendJson(offer)
+  }
+
+  function getConfiguration() {
+    return {
+      iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
+    };
+  }
+
+  function setVideoElement(element) {
+    videoElement = element;
+  }
+
+  function getVideoElement() {
+    return videoElement;
+  }
+
+  return {
+    connect,
+    setVideoElement,
+    getVideoElement,
+  };
+}
+
+WebRTCService = new WebRTCService();
+
+export default WebRTCService;
diff --git a/www/src/services/websocket-service.js b/www/src/services/websocket-service.js
new file mode 100644
index 0000000..df7d019
--- /dev/null
+++ b/www/src/services/websocket-service.js
@@ -0,0 +1,38 @@
+function WebsocketService() {
+  let websocket;
+
+  initialize();
+  function initialize() {
+    let url = "ws://" + location.host + "/ws";
+    websocket = new WebSocket(url);
+  }
+
+  function onMessage(callback) {
+    if (!isWebsocketOpen()) throw new Error("Websocket is not open");
+    websocket.addEventListener("message", callback);
+  }
+
+  function sendMessage(message) {
+    if (!isWebsocketOpen()) throw new Error("Websocket is not open");
+    websocket.send(message);
+  }
+  
+  function sendJson(jsonObject) {
+    let jsonString = JSON.stringify(jsonObject);
+    sendMessage(jsonString);
+  }
+
+  function isWebsocketOpen() {
+    return websocket.readyState === WebSocket.OPEN;
+  }
+
+  return {
+    onMessage,
+    sendJson,
+    sendMessage,
+  };
+}
+
+WebsocketService = new WebsocketService();
+
+export default WebsocketService;
diff --git a/www/src/views/integration-view.jsx b/www/src/views/integration-view.jsx
index 908cace..6d8f020 100644
--- a/www/src/views/integration-view.jsx
+++ b/www/src/views/integration-view.jsx
@@ -1,5 +1,6 @@
 import { createMemo, createSignal } from "solid-js";
 import Integration from "../data/integration";
+import WebRTCService from "../services/webrtc-service";
 
 const [integration, setIntegration] = createSignal(null);
 
@@ -9,6 +10,11 @@ function IntegrationView(props) {
       ? integration().getName()
       : "Integration"
   );
+
+  function handleConnectWebRTC() {
+    WebRTCService.connect();
+  }
+
   return (
     <div
       class={
@@ -18,6 +24,17 @@ function IntegrationView(props) {
     >
       <span>Integration</span>
       <h1>{title}</h1>
+      <div class="d-flex flex-row">
+        <div class="d-flex flex-row justify-content-end flex-fill">
+          <button class="btn btn-dark me-2 mb-3" onClick={handleConnectWebRTC}>
+            <i class="bi bi-plug-fill me-2"></i>
+            Connect
+          </button>
+        </div>
+      </div>
+      <div class="flex-fill d-flex flex-column justify-content-center align-items-center rounded overflow-hidden">
+        <video class="w-100 h-100" style="background-color: #000"></video>
+      </div>
     </div>
   );
 }