Ip camera jpg video support

Development
1

bunch of IP cameras allow something like this (or exactly like this) access to the "video stream" but since my javascript-anythingwebrelated-foo is non existing need to check if something similar already exists ... they offer this as alternative to rtsp stream

<html><head>
<script language="javascript">
var videoURL = 'http://192.168.0.62/tmpfs/auto.jpg?';    
var img = new Image();
var imgObj;

function preload()
{
    img.src=videoURL+new Date;
}

function changesrc()
{
    img1.src=img.src;
    preload();
    setTimeout(changesrc,3500);
}

function update()
{
    imgObj = document.getElementById('img1');
    
    imgObj.src = img.src;
    img.src = videoURL + (new Date()).getTime();
}

function takeError()
{
    img.src = videoURL + (new Date()).getTime();
}

function startonload()
{
    img.src = videoURL + (new Date()).getTime();
    img.onerror=takeError;
    img.onload=update;
}

function load()
{
    if (navigator.appName.indexOf("Microsoft IE Mobile") != -1)
    {
        preload();
        changesrc();
        return;
    }
    startonload();
}
</script>
</head>
<body onLoad="load()">

<!--
<img id="webcam_image" data-bind="css: { flipH: settings.webcam_flipH(), flipV: settings.webcam_flipV() }, event: { load: onWebcamLoaded, error: onWebcamErrored }, visible: !webcamError()" src="http://192.168.0.62/tmpfs/auto.jpg?" style="">
-->    

<p><img id="img1" border="0" src="http://192.168.0.62/tmpfs/auto.jpg"></p>
<iframe name="test" style="none" width="0" height="0"></iframe>
</body>
</html>

so what's happening here is that setTimeout() is just changing the img by adding datetime string to the img url and the rather smooth video is shown ... no clue how to get something like this to play out inside octoprint as I doubt rtsp will work soon inside browsers :frowning: without a proxy ...

I tried to embed this manually into octoprint and it works but it's not how it should be done, it needs to be made into plugin so if someone can point out to plugin that does something similar I can try to do it myself :slight_smile:

2

This is exactly what the SnapStream plugin does, using the snapshot URL in webcam settings.

2 Likes
3

awesome, I was hoping someone already made this happen :smiley: