Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт. Обучение дизайну. Фото. Гламурные галереи
Веб дизайн


Дизайн Форум


Про дизайн и web дизайн




Главная     Галереи Дизайна (29)



  Статьи о дизайне




  Галереи дизайна
Промышленный дизайн, графический дизайн, гламурные картинки, иконки, аватары.

  Помощь Дизайнеру!
Советы по дизайну. Философия, психология и трудовые будни дизайнера.

  Установить на сайте web-камеру

Как установить на сайте web-камеру

Поставить Web-камеру на страничку не просто, а очень просто.
А нужно для этого совсем немного: Web-камера, софт для нее, компьютер и сайт с хостингом. Вот листинг такой web странички.

Вам также понадобятся:

Камера: A4 Tech PK-333MB или другая (недавно купил Logitech HD Pro Webcam C910. Не для этих целей, но... Отличное качество. Качество видео не хуже. У этой камеры есть еще много достоинств. Рекомендую!)

Софт: Webcam Plus! 1.3 (программа настраивается самостоятельно, там все просто). Прога скачивается и устанавливается на компе, настраивается (пишем название картинки (тоже, что и в коде ниже) и ставим время обновления картинки (такое же, как в коде ниже). Прописываем путь до картинки.

Это может быть любая другая подходящая прога. Метод работы - заливать с перезаписью каждые несколько сек. отснятые картинки на ваш хостинг. А на страничке, посредством скрипта, картинка будет постоянно обновляться.
Это не видео, это постоянно меняющиеся статичные фото.

Читаем внимательно, в тексте есть подсказки(!)


1. Этот код ставится вверху страницы между тегами <head> </head>:

<html>
<head>
<title>Название страницы</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <!-- запрещаем кэширование //-->
<META NAME="Description" CONTENT="Описание страницы">
<META NAME="keywords" content="Ключевые слова">

Ниже вставляем такой код:

<SCRIPT language="JavaScript">
<!--

var klugedWidth = 400 <!-- это размер таблицы (где будет картинка и ссылки) в пикселях (ширина) //-->
var klugedHeight = 350 <!-- это размер таблицы (где будет картинка и ссылки) в пикселях (высота) //-->

function remote()
{ RemoteWin=window.open("miniweb.htm","","resizable=yes,toolbar=0,location=0,directories=0,status=
0,menubar=0,scrollbars=auto,copyhistory=0,width=" + klugedWidth + ",height=" + klugedHeight + "")
RemoteWin.creator=self
}

var Interv = 6 <!-- это время обновления картинки с камеры (сек) чем быстрее обновление, тем больше нагрузка на сайт //-->

function startClock2() {
Interv = Interv - 1

var now = new Date()
var dummystr = parseInt(now.getTime() / 1000)
delete now

if (Interv < 0) {
if (document.images) {
document.refrimage.src = "здесь в кавычках пишем название сохраняемой изWebcam Plus! 1.3 картинки.jpg (в программе прописываем это же название)" + "?" + dummystr
} else {
window.location.reload()
}
Interv = 6 <!-- это время обновления картинки с камеры (сек) чем быстрее обновление, тем больше нагрузка на сайт (ставим такое же, как и значение выше по тексту) //-->
}
document.clock.time.value = Interv
timrID = setTimeout("startClock2()", 1000)
}

//-->
</SCRIPT>

<head>

2. Этот код ставится между тэгами <body> </body>
туда, где предполагается картинка с камеры (размеры картинки и время перезагрузки странички и композицию элементов можно менять) ссылку "смотреть в отдельном окне" можно ставить по желанию (при нажатии на ссылку будет выскакивать маленькое окошко).

<BODY onLoad="startClock2()"> <!-- код - onLoad="startClock2()" вставляется в верхний тэг <body> на странице //-->
<center>
<FORM name="clock">
<br>
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="ставим в кавычках стиль текста css, если есть">
<center>
<img src="здесь в кавычках пишем путь к сохраняемой изWebcam Plus! 1.3 картинке.jpg (в программе прописываем это же название)" name="refrimage" width="160" height="120" border="0">
<br>
<br>
перезагрузка через   <input type="text" name="time" size="3" value="">  секунд
<br>
<br>  
<a href="javascript:remote()">смотреть в отдельном окне</a> <!-- ссылка для выпадающего pop-up окошка (если нужно), страницу с pop-up окошком делаем отдельно, полный код смотрим ниже //-->
<br>
<br>
</center>
</td>
</tr>
</table>
</FORM>
</center>

3. Код для выпадающего pop-up окошка (если нужно). Ставится на предусмотренную для этого новую страничку, созданную в этой же директории

<html>
<head>
<TITLE>Название твоей страницы. </TITLE>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <!-- запрещаем кэширование //-->

<SCRIPT language="JavaScript">
<!--
var klugedWidth = 400 <!-- это размер вставляемой таблички в пикселях (ширина) //-->
var klugedHeight = 350 <!-- это размер вставляемой таблички в пикселях (высота) //-->

function remote()
{

RemoteWin=window.open("miniweb.htm","","resizable=yes,toolbar=0,location=0,directories=0,status=
0,menubar=0,scrollbars=auto,copyhistory=0,width=" + klugedWidth + ",height=" + klugedHeight + "")
RemoteWin.creator=self
}

var Interv = 6 <!-- это время обновления картинки (сек) //-->

function startClock2() {
Interv = Interv - 1

var now = new Date()
var dummystr = parseInt(now.getTime() / 1000)
delete now

if (Interv < 0) {
if (document.images) {
document.refrimage.src = "картинка.jpg" + "?" + dummystr
} else {
window.location.reload()
}
Interv = 6 <!-- это время обновления картинки (сек) //-->
}
document.clock.time.value = Interv
timrID = setTimeout("startClock2()", 1000)
}

//-->
</SCRIPT>
</head>
<BODY onLoad="startClock2()"> <!-- так onLoad="startClock2()" вставляется в верхний тэг <body> //-->
<center>
<FORM name="clock">
<br>
<table width="350" border="0" cellspacing="0" cellpadding="0" height="350">
<tr>
<td>
<center>
<br>
<br>
<img src="в кавычках пишем путь к сохраняемой изWebcam Plus! 1.3 картинке.jpg (в программе прописываем это же название)" name="refrimage" width="160" height="120" border="0">
<br>
<br> перезагрузка через   <input type="text" name="time" size="3" value="">  секунд
<br>
<br>
<a href="javascript:close()">закрыть окошко </a>
<br>
</center>
</td>
</tr>
</table>
</FORM>
</center>
</BODY>
</html>


СМОТРИМ: Пример работы вебкамеры на сайте

Пример работы вебкамеры на странице сайта - http://rosdesign.com/webcam/webcam.htm


А если использовать правую кнопку мыши и поковыряться в коде страницы, можно наковырять вышеописанный код и сделать такие скриншоты. Все просто!



Клюев М. (написано в 2004 г., отредактировано 12.08.2006, еще раз отредактировано 15.04.2012)


 Смотри также:
Немного трепа про web-камеру





  Rambler's Top100  


Web дизайн и создание сайтов       Пользовательское соглашение
Карта сайта      Наверх