Ich versuche den RTSP Stream einer UniFi Kamera direkt in einem Browserfenster anzuzeigen, also ohne Umweg über Protect oder ähnliches. Der RTSP Stream der Kamera ist natürlich aktiviert, aber bei Klick auf einen <rtsp> Tag wird VLC zur Darstellung aufgerufen.
Ich habe ein Code Beispiel gefunden wie man die eingebaute Webcam eines Computers direkt im Browser anzeigen kann und das funktioniert auch sehr gut, also sollte dies doch auch mit einer externen Kamera möglich sein.
Hier ist mal der Code den mein treuer Helfer ChatGPT ausgespuckt hat, aber das Bild bleibt leider schwarz:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embedded RTSP Stream</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rtsp-ffmpeg/0.0.2/rtsp-ffmpeg.min.js"></script>
</head>
<body>
<h1>Embedded RTSP Player</h1>
<video id="rtspPlayer" autoplay controls></video>
<script>
const videoElement = document.getElementById('rtspPlayer');
// Initialize the RTSP player
const player = new rtspPlayer(videoElement, {
url: 'rtsp://192.168.1.43:7447/xxx………xxx',
});
// Start playing the stream
player.start();
</script>
</body>
</html>
Alles anzeigen
Ich glaube das Problem ist, dass die ffmpeg Library nicht gefunden wird. Hat jemand eine Idee wie man das lösen kann?