Question

我正在使用Instant Webcam for ios，它很容易使用，因为您只需在URL栏中键入IP，它就会显示流。我想在其他程序中使用流，特别是MAX / MSP，所以我需要知道流的实际文件名。喜欢video.mpeg，但我找不到它！我看了一下源有点无济于事。关于我如何找到这个的任何提示？

编辑：

着陆页来源

    <!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>

jsmpg.js的来源太大了，链接：https://github.com/phoboslab/jsmpeg/blob/master/jsmpg.js

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);

Answer 1

也许查看页面资源可以让您深入了解流的来源？

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

Answer 2

您没有看到任何流IP / URL /名称，因为流通过websocket传递到浏览器，使用jsmpg.js解码，然后将其渲染到画布中。

找不到IP cam流的显式文件

2 个答案: