GET http:// localhost:5001 / time-server / info net :: ERR_CONNECTION_REFUSED

时间:2016-05-25 23:38:29

标签: javascript html video websocket sockjs

当我尝试运行我的代码以在网页上同步视频时出现此错误

这应该做的是同步视频,如果它在多个网页或多个设备上打开,它应该如何工作,所以如果有人可以帮助那将是惊人的谢谢。抱歉,我是sockjs和JavaScript的新手,所以感谢任何帮助

这是完整错误“无法加载资源:net :: ERR_CONNECTION_REFUSED”

这是我的索引:

    <!DOCTYPE html>
<html>
<head>

        body {



            padding: 0px;
            margin: 5%;
            width: 90%;
        }

        video {
            width: 100%;
        }

        #volume {
            width: 70%;
        }
    </style>
</head>
<body>
    <video id="video" autoplay>
        <source src="http://googledrive.com/host/0B-5FC9-wtiZzbTJFQnljdzNDdEE" type="video/mp4"/>
        <source src="http://googledrive.com/host/0B-5FC9-wtiZzbTJFQnljdzNDdEE" type="video/webm"/>
    </video>
    <div>
        <label>Volume: </label><input type="range" min="0" max="1" step="0.0001" value="1" id="volume"/>
        <button id="mute">Unmute</button>
        <button id="play">Play</button>
    </div>
    <div>Server Time: <span id="clock"></span></div>
    <div>Video Time: <span id="video-time"></span></div>
    <article>
        <h1>Synchronized Video Player</h1>

    </article>
    <!--<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>-->
    <script src="js/lib/sockjs-0.3.min.js"></script>
    <script src="js/remote-clock.js"></script>
    <script src="js/main.js"></script>
</body>

我的main.js是:

(function (window) {
var CLOCK_PORT = 5001,
    EPSILON = -1 / 15,
    DURATION = 149.619,

    maxOffset = 1 / 30,
    video = document.getElementById('video'),
    clock = document.getElementById('clock'),
    videoTime = document.getElementById('video-time'),
    volume = document.getElementById('volume'),
    muted = document.getElementById('muted'),

    targetTime = 0,
    serverUrl,
    remoteClock,
    durationInMilliseconds,
    timeout,
    retries = 0,

    isBuffered;

function updateClockDisplay() {
    clock.textContent = (new Date(remoteClock.time())).toTimeString();
    videoTime.textContent = (video.currentTime).toFixed(2);
    requestAnimationFrame(updateClockDisplay);
}

function checkAgain(delay) {
    clearTimeout(timeout);
    timeout = setTimeout(checkSync, delay);
}

function checkSync(evt) {
    var currentTime,
        current,
        currentBuffered,
        targetBuffered,
        targetDiff,
        currentDiff,
        skip;

    //currentTime is the time we should be at NOW
    currentTime = (remoteClock.time() % durationInMilliseconds) / 1000;

    //targetTime is the time we're seeking to and want to catch up to later
    //it's a little bit ahead of where we are so we can take time to buffer
    targetTime = Math.max(targetTime, currentTime);

    currentDiff = currentTime - video.currentTime;

    current = currentDiff > EPSILON && currentDiff < maxOffset;
    targetBuffered = isBuffered(targetTime);
    currentBuffered = isBuffered(currentTime) && isBuffered(currentTime + 2);

    if (currentBuffered && current) {
        video.play();
        retries = Math.min(2, retries);
        checkAgain(2000);
        return;
    }

    //we missed our window, so seek ahead and try again
    if (currentDiff >= EPSILON && video.readyState < 2 || currentDiff > 1) {
        skip = Math.pow(2, Math.min(4, Math.max(retries, 1)));
        targetTime = (currentTime + skip) % DURATION;
        video.pause();
        video.currentTime = targetTime;
        retries++;
        maxOffset = Math.max(maxOffset, retries * 0.1);
        checkAgain(1000);
        return;
    }

    //we haven't caught up yet, so give it a little more time to buffer and check in again
    targetDiff = targetTime - currentTime;
    checkAgain(targetDiff * 500);
}

function stateUpdate(evt) {
    if (!video.duration) {
        console.log('No video duration yet');
        video.pause();
        return;
    }

    console.log('video metadata', video.duration, video.videoWidth, video.videoHeight);
    durationInMilliseconds = Math.round(DURATION * 1000);
    if (remoteClock.accuracy() > 100) {
        return;
    }

    checkSync(evt || 'clock update');
}

function timeBuffered(time) {
    var i;
    if (!video.buffered) {
        return true;
    }

    for (i = 0; i < video.buffered.length; i++) {
        if (video.buffered.start(i) > time) {
            return false;
        }
        if (video.buffered.end(i) >= time) {
            return true;
        }
    }
    return false;
}

/*
This runs whenever either the clock accuracy changes or the video duration changes.
*/
if (!video.buffered || 'mozId' in navigator) {
    isBuffered = function (time) {
        return (time - video.currentTime < 5) && video.readyState >= 3 || timeBuffered(time);
    };
} else {
    isBuffered = timeBuffered;
}

serverUrl = location.protocol + '//' + location.hostname + ':' + CLOCK_PORT + '/time-server';
remoteClock = new RemoteClock(serverUrl, stateUpdate);

video.muted = true;
video.addEventListener('durationchange', stateUpdate, false);
//video.addEventListener('waiting', stateUpdate, false);
//video.addEventListener('seeked', stateUpdate, false);
video.addEventListener('volumechange', function () {
    volume.value = video.volume;
    if (video.muted) {
        mute.textContent = 'Unmute';
    } else {
        mute.textContent = 'Mute';
    }
});
mute.addEventListener('click', function () {
    video.muted = !video.muted;
});
volume.addEventListener('input', function () {
    video.volume = volume.value;
});



play.addEventListener('click', function () {


    if (video.paused) {
        play.textContent = 'Play';
        video.play(); 
    } else {
        play.textContent = 'Pause';
        video.pause();
    }
});



window.addEventListener('touchstart', function touchstart(evt) {
    video.load();
    evt.preventDefault();
    window.removeEventListener('touchstart', touchstart, true);
}, true);
updateClockDisplay(); }(this));

我的remote-clock.js是:

(function (window) {

function RemoteClock(server, callback) {
    var synced = false,
        done = false,
        socket,
        minDiff = Infinity,
        maxDiff = -Infinity,
        accuracy = Infinity,
        timingDiff = 0;

    function onMessage(evt) {
        var clientReceived,
            improved = 0,
            acc;

        if (!evt.data) {
            return;
        }

        var message = JSON.parse(evt.data);
        console.log('message', message);

        clientReceived = Date.now();

        if (message.timing !== undefined) {
            minDiff = Math.min(minDiff, clientReceived - message.timing);

            if (minDiff !== undefined) {
                if (message.maxDiff !== undefined) {
                    maxDiff = message.maxDiff;
                    timingDiff = minDiff + (maxDiff - minDiff) / 2;

                    acc = Math.abs(maxDiff - minDiff);
                    improved = accuracy - acc;
                    accuracy = acc;
                    console.log('remote clock', Date.now() - timingDiff, timingDiff, accuracy);
                    if (acc < 200) {
                        if (!synced) {
                            synced = true;
                            //todo: fire callback
                        }

                        if (acc < 50) {
                            done = true;
                        }
                    }
                    if ((improved >= 10 || done) && callback) {
                        callback();
                    }
                } else {
                    timingDiff = minDiff;
                }
            }
        }
    }

    function requestTiming() {
        socket.send(JSON.stringify({
            action: 'sync',
            minDiff: minDiff,
            timing: Date.now()
        }));
        if (!done) {
            setTimeout(requestTiming, 1000);
        }
    }

    if (!window.SockJS) {
        throw new Error('Unable to initialize RemoteSync. Missing SockJS');
    }

    socket = new SockJS(server || location.origin);
    socket.onmessage = onMessage;
    socket.onopen = requestTiming;

    this.time = function () {
        return Date.now() - timingDiff;
    };

    this.accuracy = function () {
        return accuracy;
    };
}

window.RemoteClock = RemoteClock;   }(this));

和我的time-server.js是:

var server,
app,
http = require('http'),
SockJS = require('sockjs'),
socket,
server;

//socket = require('socket.io')(5001);
socket = SockJS.createServer();

socket.on('connection', function(client) {
'use strict';

function max(a, b) {
    return a !== undefined && a > b ? a : b;
}

function onMessage(data){
    var serverReceived;

    if (!data) {
        return;
    }

    var message = JSON.parse(data);

    console.log(client.id + ': ' + (typeof message) + ': ' + JSON.stringify(message));

    //diff = (client clock - server clock) milliseconds
    serverReceived = Date.now();
    if (message.timing !== undefined) {
        client.maxDiff = max(client.maxDiff, message.timing - serverReceived);

        client.write(JSON.stringify({
            maxDiff: client.maxDiff,
            timing: Date.now()
        }));

        if (client.maxDiff !== undefined) {
            if (message.minDiff !== undefined) {
                client.minDiff = message.minDiff;
                client.timingDiff = client.minDiff + (client.maxDiff - client.minDiff) / 2;
            } else {
                client.timingDiff = client.maxDiff;
            }
        }
    }
}

if (!client) {
    console.log('no client!');
    return;
}
if (client.remoteAddress) {
    console.log('client connected. ' + client.id + ' (' + client.remoteAddress + ':' + client.remotePort + ')');
} else {
    console.log('client connected. ' + client.id);
}

//console.log('properties', JSON.stringify(properties, null, 4));
//client.json.send(properties);

//client.on('message', onMessage);
client.on('data', onMessage);

/*
client.on('disconnect', function(){
    //delete clients[client.id];
    client.removeListener('message', onMessage);
});
*/
});

var server = http.createServer();
socket.installHandlers(server, {prefix:'/time-server'});
 server.listen(5001);

我无法让代码格式化抱歉

0 个答案:

没有答案