I cannot get a feed to show up in my html file

General
1

this is my html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Camera Stream Viewer</title>
  <style>
    .debug {
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      padding: 10px;
      margin: 10px 0;
      font-family: monospace;
      max-height: 200px;
      overflow: auto;
    }
    .controls {
      margin: 10px 0;
    }
    button {
      padding: 5px 10px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <h1>Camera Stream</h1>
  <div class="controls">
    <button id="listBtn">List Streams</button>
    <button id="watchBtn1">Watch Stream 1</button>
    <button id="watchBtn2">Watch Stream 2</button>
  </div>
  <video id="remotevideo" width="640" height="480" autoplay playsinline></video>
  <div>
    <h3>Debug Information:</h3>
    <div id="debug" class="debug"></div>
  </div>

  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="janus.js"></script>
  <script>
    let janus = null;
    let streaming = null;
    let remoteStream = new MediaStream(); // Store the remote stream
    
    function addDebugMsg(msg) {
      const debug = document.getElementById('debug');
      if (typeof msg === 'object') {
        debug.innerHTML += '<pre>' + JSON.stringify(msg, null, 2) + '</pre>';
      } else {
        debug.innerHTML += '<p>' + msg + '</p>';
      }
      debug.scrollTop = debug.scrollHeight;
    }
    
    Janus.init({
      debug: "all",
      callback: function () {
        addDebugMsg("Janus initialized");
        janus = new Janus({
          server: "ws://theip", // your Raspberry Pi
          success: function () {
            addDebugMsg("Connected to Janus server");
            janus.attach({
              plugin: "janus.plugin.streaming",
              success: function (pluginHandle) {
                streaming = pluginHandle;
                addDebugMsg("Plugin attached: " + streaming.getPlugin());
                
                // Add button event listeners
                document.getElementById('listBtn').addEventListener('click', listStreams);
                document.getElementById('watchBtn1').addEventListener('click', function() { watchStream(1); });
                document.getElementById('watchBtn2').addEventListener('click', function() { watchStream(2); });
                
                // List streams automatically on start
                listStreams();
              },
              error: function(error) {
                addDebugMsg("Error attaching plugin: " + error);
              },
              onmessage: function (msg, jsep) {
                addDebugMsg("Got a message:");
                addDebugMsg(msg);
                
                if (jsep !== undefined && jsep !== null) {
                  addDebugMsg("Handling SDP");
                  addDebugMsg(jsep);
                  streaming.createAnswer({
                    jsep: jsep,
                    media: { audioSend: false, audioRecv: false, videoSend: false, videoRecv: true }, // we are recvonly
                    success: function (jsep) {
                      addDebugMsg("Got SDP!");
                      addDebugMsg(jsep);
                      const body = { request: "start" };
                      streaming.send({ message: body, jsep: jsep });
                    },
                    error: function (error) {
                      addDebugMsg("WebRTC error: " + error);
                    }
                  });
                }
                
                if (msg["streaming"] === "event") {
                  // Handle event messages
                  if (msg["result"]) {
                    if (msg["result"]["status"]) {
                      addDebugMsg("Status: " + msg["result"]["status"]);
                    }
                  } else if (msg["error_code"]) {
                    addDebugMsg("Error: " + msg["error"] + " (code: " + msg["error_code"] + ")");
                  }
                }
              },
              // Updated track handling for newer Janus versions
              onlocaltrack: function(track, on) {
                addDebugMsg("Local track event - track: " + track.id + ", on: " + on);
              },
              onremotetrack: function(track, mid, on) {
                addDebugMsg("Remote track event - track: " + track.id + ", mid: " + mid + ", on: " + on);
                if (on) {
                  // Track was added
                  if (track.kind === "video") {
                    addDebugMsg("Adding video track to stream");
                    remoteStream.addTrack(track);
                    Janus.attachMediaStream(document.getElementById("remotevideo"), remoteStream);
                  }
                } else {
                  // Track was removed
                  addDebugMsg("Removing track: " + track.id);
                  remoteStream.removeTrack(track);
                }
              },
              oncleanup: function() {
                addDebugMsg("Stream stopped");
                remoteStream.getTracks().forEach(track => track.stop());
              }
            });
          },
          error: function (error) {
            addDebugMsg("Janus error: " + error);
          },
          destroyed: function () {
            addDebugMsg("Janus destroyed");
          }
        });
      }
    });
    
    function listStreams() {
      if (!streaming) {
        addDebugMsg("Error: Plugin not attached");
        return;
      }
      
      addDebugMsg("Listing available streams...");
      streaming.send({
        message: { request: "list" },
        success: function(result) {
          if (result && result.list) {
            addDebugMsg("Available streams (" + result.list.length + "):");
            result.list.forEach(stream => {
              addDebugMsg(`ID: ${stream.id}, Description: ${stream.description}`);
            });
          } else {
            addDebugMsg("Unexpected response format:");
            addDebugMsg(result);
          }
        },
        error: function(error) {
          addDebugMsg("Failed to list streams:");
          addDebugMsg(error);
        }
      });
    }

    function watchStream(id) {
      if (!streaming) {
        addDebugMsg("Error: Plugin not attached");
        return;
      }

      // Clear previous stream
      remoteStream.getTracks().forEach(track => track.stop());
      remoteStream = new MediaStream();
      document.getElementById("remotevideo").srcObject = null;

      addDebugMsg("Attempting to watch stream " + id);
      streaming.send({
        message: { request: "watch", id: id },
        success: function(result) {
          addDebugMsg("Watch command successful:");
          addDebugMsg(result);
        },
        error: function(error) {
          addDebugMsg("Error watching stream:");
          addDebugMsg(error);
        }
      });
    }
  </script>
</body>
</html>

SDP communication works but I can never get this function to call and I do not understand why.

onremotetrack: function(track, mid, on) {
addDebugMsg("Remote track event - track: " + track.id + ", mid: " + mid + ", on: " + on);
if (on) {
// Track was added
if (track.kind === “video”) {
addDebugMsg(“Adding video track to stream”);
remoteStream.addTrack(track);
Janus.attachMediaStream(document.getElementById(“remotevideo”), remoteStream);
}
} else {
// Track was removed
addDebugMsg("Removing track: " + track.id);
remoteStream.removeTrack(track);
}
},