Как настроить веб-страницу веб-камеры

Веб-камеры не являются чем-то новым для Интернета. Это не значит, что они не невероятно популярны. На самом деле, проще, чем когда-либо, создать собственную страницу веб-камеры. Все, что вам нужно, это компьютер с веб-камерой, подключение к Интернету и сервер для размещения вашего сайта. Настройка не займет много времени.

1. Вам понадобится хостинг. Веб-хостинг – это сервер, который вы арендуете в Интернете для размещения вашего сайта. Они обычно недороги и не требуют особого ухода. Прежде чем начать, настройте хост. Вы можете сделать это практически с любым веб-хостингом.

2. Убедитесь, что ваша веб-камера подключена к компьютеру, с которого вы хотите осуществлять потоковую передачу. Вы можете использовать свой рабочий стол или компьютер меньшего размера, например, Raspberry Pi. Неважно, что вы выберете. Просто убедитесь, что к вашей веб-камере подключены последние установленные драйверы.

3. VLC – фантастический медиаплеер с открытым исходным кодом. Это абсолютно бесплатно и работает на Windows, Mac и Linux. VLC – это фантастический выбор практически для всех мультимедийных действий на вашем компьютере, и он поставляется со встроенными возможностями потоковой передачи. Это делает его идеальным вариантом, создавая поток с вашей веб-камеры.

   

   Перейдите на страницу загрузки VLC и скачайте последнюю версию установщика. Если вы работаете в Linux, вы, вероятно, найдете VLC в репозиториях вашего дистрибутива, поэтому сначала проверьте его.

4. Когда у вас есть установщик VLC, запустите процесс его установки в вашей системе. Мастер очень прост, так что просто пройдите процесс и установите VLC в своей системе.

   

5. Откройте VLC. Связанный значок – оранжевый конус движения, который стал одним из самых узнаваемых логотипов программного обеспечения.

   

6. На главном экране VLC выберите Мультимедиа в верхнем левом углу меню.

   

7. VLC отобразит новое раскрывающееся меню для доступных параметров Мультимедиа . Найдите Stream по направлению к нижней средней части и выберите его.

   

8. Откроется новое окно с четырьмя вкладками в верхней части. Выберите Устройство захвата .

   

9. Используйте раскрывающийся список Видеоустройство , чтобы выбрать веб-камеру. Если вы планируете также захватывать звук, выберите также Аудиоустройство . Когда они появятся, нажмите Stream в нижней части окна.

   

10. В следующем окне вас попросят ввести источник вашего потока. Вам не нужно беспокоиться об этом, там уже будет местоположение вашей веб-камеры. Если вы хотите указать что-то еще здесь, вы можете, но вы можете просто пойти по умолчанию в большинстве случаев.

11. На следующем экране вы настроите пункт назначения для вашего потока. Используйте раскрывающийся список, чтобы выбрать HTTP . и нажмите Добавить , чтобы добавить его. При желании вы можете создать несколько адресатов, но HTTP – все, что вам нужно для вашего потока.

    

12. После того как вы нажмете Добавить , VLC создаст новую вкладку для вашего потока HTTP . Вкладка содержит две опции: одну для порта и одну для пути. Если у вас нет чего-то другого, использующего порт по умолчанию, хорошо оставить это. Путь – это точный путь к вашему потоку, следующий за основным URL. Таким образом, по умолчанию это будет выглядеть как http: // localhost: 8080/path . Введите «/ stream» или что-то подобное, чтобы отделить поток от всего, что вы можете запустить.

13. Теперь выберите профиль кодирования для вашего потока. Самый простой и универсальный формат для работы здесь – это OGG . Используйте раскрывающийся список, чтобы выбрать Видео – Theora + Vorbis (OGG) . Вы можете использовать значок гаечного ключа рядом с раскрывающимся списком, чтобы настроить конкретные параметры, но профиль по умолчанию будет работать в большинстве случаев.

    

14. Установите флажок Поток всех элементарных потоков и нажмите Поток , чтобы начать.

    

15. Ваш поток теперь работает на вашем компьютере в порту, который вы указали. Вы можете получить к нему доступ в некоторых браузерах и мультимедийных проигрывателях через IP-адрес вашего компьютера, а также указанный вами порт и путь. Если вы хотите сделать это для Интернета, вам нужно разрешить доступ к вашей домашней сети из Интернета. Есть несколько способов сделать это.

    Самое простое, что вы можете сделать, это настроить переадресацию портов с вашего маршрутизатора на компьютер через порт, на котором работает ваш поток.Вам также необходимо настроить динамический DNS от кого-то вроде No-IP.com, чтобы гарантировать, что ваш домашний IP-адрес не изменится. Используя этот метод, вы получите доступ к своей камере таким же образом, но вы будете использовать внешний URL-адрес, полученный от No-IP, а затем номер порта и путь. Ваш адрес будет выглядеть как yourstream.no-ip.org:8080/stream . Это некрасиво, но когда вы создаете свой сайт, этот адрес в любом случае будет скрыт в HTML-коде.

    Другой вариант – настроить VPN. Вы можете подключить как компьютер, так и сервер, на котором размещен ваш сайт, к VPN. Через VPN они будут вести себя так, как будто они находятся в одной локальной сети, что делает ваш поток доступным и легкодоступным для вашего сервера. Вероятно, это «лучший» вариант, но его не так просто настроить.

16. Как только у вас есть доступ к вашему потоку, вы можете написать базовый HTML-код, чтобы проверить, как ваша веб-камера будет отображаться на вашей странице. Если вы хотите что-то действительно минимальное, вы можете использовать код на своей странице.

    Начните с создания основного каркаса HTML-страницы с помощью текстового редактора. Блокнот отлично работает на Windows. Пользователи Linux могут использовать что-то графическое, например Gedit, или редактор командной строки, например Vim. Используйте базовый макет, как показано ниже.

     
     
     Тест веб-камеры 
     
     
     
     
     

17. Теперь создайте тег HTML5 в тегах . Установите атрибут источника в местоположение вашего потока.

    Конечно, вы можете проверить это локально на своем компьютере.

18. Добавьте остальные атрибуты для вашего видео, начиная с идентификатора, высоты и ширины.

    Затем добавьте информацию о самом видео, указав тип видео, кодек и способ его воспроизведения в браузере.

19. Посмотрите на все это. Это должно выглядеть примерно так, как показано ниже.

     
     
     Тест веб-камеры 
     
     
     
     
     
     

    Когда все выглядит правильно, сохраните его.

20. Откройте файл в вашем браузере. Если вы тестируете его локально, вы можете щелкнуть правой кнопкой мыши по файлу и выбрать браузер, чтобы открыть его. Хром, кажется, работает лучше всего. В противном случае загрузите файл в корневой каталог HTML на вашем сервере.

    

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

21. Здесь есть еще много всего, что вы можете сделать. Если вы планируете создавать свой сайт с помощью WordPress, есть множество плагинов веб-камеры, готовых для вас, чтобы подключить адрес потока и использовать их. Если вы сами создаете сайт, используйте видео тег HTML5 и обходите его.