Can't find explicit file of IP cam stream

833 Views Asked by At

I'm using Instant Webcam for ios and it's very easy to use in the sense that you just type in the IP in the URL bar and it shows you the stream. I'd like to use the stream in other programs, specifically MAX/MSP, so I need to know the actual file name for the stream. Like video.mpeg, but I can't find it! I've looked through the source a bit to no avail. Any tips on how I might find this?

EDIT:

Source of landing page

    <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=320, initial-scale=1"/>
    <title>Instant Webcam</title>
    <link rel="stylesheet" type="text/css" href="screen.css"/>
    <link rel="Shortcut Icon" href="InstantWebcam.png" />
    <style type="text/css">

    </style>
</head>
<body>
    <div id="videoContainer">

        <canvas id="videoCanvas" class="full" width="640" height="480">
            <p>
                Please use a browser that supports the Canvas Element, like
                <a href="http://www.google.com/chrome">Chrome</a>,
                <a href="http://www.mozilla.com/firefox/">Firefox</a>,
                <a href="http://www.apple.com/safari/">Safari</a> or Internet Explorer 10
            </p>
        </canvas>

        <div id="notice">
            <div class="spinner"><div class="mask"><div class="maskedCircle"></div></div></div>
            <span id="noticeText">Connecting</span>
        </div>

        <div id="copy">
            <a href="http://instant-webcam.com/" title="Instant Webcam">
                <img alt="Instant Webcam" src="InstantWebcam.png"/>
            </a>
        </div>

        <div id="recordBox">
            <span id="record" title="Record MPG Video">
                <span id="recordDot">&#x25cb;</span>
                <span id="recordNotice">Record</span>
            </span>
            <span id="recordDisabled">&#x2014; Please use Firefox or Chrome to record Video. Sorry :/</span>
            <span id="recordStats">(1.2mb)</span>
            <span id="recordLinkBox">
                &#x2014; Download: <a href="#" id="recordLink">Recording.mpg (1.2mb)</a>
            </span>
        </div>
    </div>
    <script type="text/javascript" src="jsmpg.js"></script>
    <script type="text/javascript" src="instacam.js"></script>
</body>
</html>

Source of jsmpg.js is far too big, link: https://github.com/phoboslab/jsmpeg/blob/master/jsmpg.js

Source of instacam.js:

// Instant Webcam (c) Dominic Szablewski - PhobosLab.org

(function(window){

var canvas = document.getElementById('videoCanvas');
var notice = document.getElementById('notice');
var noticeText = document.getElementById('noticeText');

var player = null;
var client = null;
var address = 'ws://' + window.location.host + '/ws';
var reconnectInProgress = false;


// ------------------------------------------------------
// Initial connecting and retry

var connect = function() {
    reconnectInProgress = false;

    if( client && client.readyState == client.OPEN ) { return; }

    if( player ) { player.stop(); player = null; }
    if( client ) { client.close(); client = null; }

    client = new WebSocket( address );
    player = new jsmpeg(client, {canvas:canvas});

    // Attempt to reconnect when closing, on error or if the connection
    // isn't open after some time.
    client.addEventListener('close', function(){
        recorderLostConnection();
        attemptReconnect();
    }, false);
    client.addEventListener('error', attemptReconnect, false);
    setTimeout(function(){
        if( !client || client.readyState != client.OPEN ) {
            attemptReconnect();
        }
    }, 2000);

    // Hide notice when connected
    client.addEventListener('open', function(){ setNotice(null); }, false);
};

var setNotice = function( msg ) {
    if( !msg ) {
        notice.style.display = 'none';
    }
    else {
        notice.style.display = 'block';
        noticeText.innerHTML = msg;
    }
};

var attemptReconnect = function(event) {

    if( reconnectInProgress ) { return; }

    setTimeout(connect, 500);
    reconnectInProgress = true;
    setNotice('Lost connection');
};


// ------------------------------------------------------
// Recording

var recordButton = document.getElementById('record');
var recordDot = document.getElementById('recordDot');
var recordNotice = document.getElementById('recordNotice');
var recordStats = document.getElementById('recordStats');
var recordLinkBox = document.getElementById('recordLinkBox');
var recordLink = document.getElementById('recordLink');
recordButton.className = 'available';

var recordingStatsInterval = 0;
var recordingLastURL = null;
recordButton.onclick = function(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    if( !player.canRecord() ) { return false; }

    if( !canRecord() ) {
        document.getElementById('recordDisabled').style.display = 'inline';
        return false;
    }

    if( recordButton.className == 'available' ) {
        recordButton.className = 'waiting';
        startRecording();
    }
    else if( recordButton.className == 'recording' ) {
        recordButton.className = 'available';
        stopRecordingAndDownload();
    }
    return false;
};

var canRecord = function() {
    return (window.URL && window.URL.createObjectURL);
};

var startRecording = function() {
    setRecordingState(true);
    recordLinkBox.style.display = 'none';

    if( recordingLastURL ) {
        if( window.URL && window.URL.revokeObjectURL ) {
            window.URL.revokeObjectURL(recordingLastURL);
        }
        else if( window.webkitURL && window.webkitURL.revokeObjectURL ) {
            window.webkitURL.revokeObjectURL(recordingLastURL);
        }
        recordingLastURL = null;
    }
    recordLink.href = '#';
    player.startRecording(recordingDidStart);
    return false;
};

var recordingDidStart = function(player) {
    recordNotice.innerHTML = 'Recording';
    recordButton.className = 'recording';
    recordStats.style.display = 'inline';
    recordingStatsInterval = setInterval(recordStatsUpdate, 33);
};

var recordStatsUpdate = function() {
    var size = (player.recordedSize/1024/1024).toFixed(2);
    recordStats.innerHTML = '(' + size +'mb)';
};

var stopRecordingAndDownload = function() {
    recordStats.style.display = 'none';
    clearInterval(recordingStatsInterval);
    setRecordingState(false);

    var today = new Date();
    var dd = today.getDate();
        dd = (dd < 10 ? '0' : '') + dd;
    var mm = today.getMonth() + 1;
        mm = (mm < 10 ? '0' : '') + mm;
    var yyyy = today.getFullYear();
    var hh = today.getHours();
        hh = (hh < 10 ? '0' : '') + hh;
    var ii = today.getMinutes();
        ii = (ii < 10 ? '0' : '') + ii;

    var fileName = 'Webcam-'+yyyy+'-'+mm+'-'+dd+'-'+hh+'-'+ii+'.mpg';
    var size = (player.recordedSize/1024/1024).toFixed(2);


    recordLink.innerHTML = fileName + ' (' + size +'mb)';
    recordLink.download = fileName;

    var blob = player.stopRecording();
    recordingLastURL = window.URL.createObjectURL(blob);
    recordLink.href = recordingLastURL;
    recordLinkBox.style.display = 'inline';
};

var recorderLostConnection = function() {
    if( recordButton.className == 'recording' ) {
        recordButton.className = 'available';
        stopRecordingAndDownload();
    }
};

var setRecordingState = function(enabled) {
    recordDot.innerHTML = enabled ? '&#x25cf;' : '&#x25cb;';
    recordNotice.innerHTML = enabled ? 'Recording' : 'Record';
};


// ------------------------------------------------------
// Init!

if( navigator.userAgent.match(/iPhone|iPod|iPad|iOS/i) ) {
    // Don't show recording button on iOS devices. Desktop browsers unable
    // of recording, will see a message when the record button is clicked.
    document.getElementById('record').style.display = 'none';
}

canvas.addEventListener('click', function(){
    canvas.className = (canvas.className == 'full' ? 'unscaled' : 'full');
    return false;
},false);

if( !window.WebSocket ) {
    setNotice("Your Browser doesn't Support WebSockets. Please use Firefox, Chrome, Safari or IE10");
}
else {
    setNotice('Connecting');
    connect();
}

})(window);
2

There are 2 best solutions below

0
On

Maybe looking at the page resources could give you some insight in where the stream is coming from?

http://www.mandalatv.net/2012/07/safari-6-0-activity-window/

0
On

You don't see any stream IP/URL/name, because the stream is delivered to the browser via websocket, decoded with jsmpg.js and then it is rendered into the canvas.