![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() Про дизайн и web дизайн |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() Главная Галереи Дизайна (29) |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]()
|
![]() |
![]()
Как установить на сайте 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-камеру |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]()
|
![]() |
![]() |