Ищу код для отображения двух общедоступных IP-камер

Question

Я в основном парень с / с ++. Я сделал довольно много PHP-вещей, и теперь мне нужно написать код JS.

Для макета я хочу создать веб-страницу, показывающую видеопоток из двух источников живого видео. У нас есть веб-камеры на основе IP на заказ, и я полагаю, что это будет случай использования

<img src="IP address">

для каждой веб-камеры, возможно с некоторыми тегами размера изображения. Это верно?

В то же время, может ли кто-нибудь опубликовать некоторый пример кода, желательно с видеопотоком, который будет транслироваться в дневное время в Австралии? Вы можете быть милым творческим, но, пожалуйста, будьте SFW. Спасибо.

Answer 1

Этот код использует метод «pull» для обновления изображений JPEG в браузере. Он работает путем изменения части строки запроса URL-адреса src для принудительной перезагрузки изображения через десять секунд после завершения загрузки последнего изображения (демонстрация в режиме реального времени с использованием изображений с веб-камеры на пляже составляет http://jsfiddle.net/kLUkA/2/):

function refreshCamera() {
    var img = this;
    setTimeout(function() {
        var parts = img.src.split('?');
        parts[1] = new Date().getTime();
        img.src = parts.join('?');
    }, 10000);
}

function startCameraPull(img) {
    img.onload = refreshCamera;
    img.onload();
}

window.onload = function() {
    startCameraPull(document.getElementById('webcam1'));
    startCameraPull(document.getElementById('webcam2'));
};

Примечание: Вы можете убрать часть setTimeout в refreshCamera, чтобы устранить задержку перезагрузки.

Answer 2

Я не уверен насчет элементов canvas или video, но я не думаю, что они поддерживают потоковое видео в реальном времени. Звучит так, как будто вы используете динамически создаваемые статические изображения, но если вы используете видеопоток, вам придется использовать вспышку (или серебряный свет, или какой-либо другой эквивалент).