Настройка веб-страницы веб-камеры

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

Как настроить веб-камеру для прямой трансляции

Вот как настроить веб-камеру для работы с вашим сайтом:

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

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

  3. Выберите медиаплеер. VLC — это бесплатный медиаплеер с открытым исходным кодом, работающий в Windows, Mac и Linux. VLC имеет встроенные возможности потоковой передачи.

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

  4. Установите VLC. Мастер проведет вас через процесс установки VLC в вашей системе.

  5. Откройте VLC.

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

  7. Выбрать Поток.

  8. в Открытые СМИ в диалоговом окне выберите Устройство захвата Tab.

  9. Выберите Название видеоустройства стрелку вниз и выберите свою веб-камеру. Если вы планируете записывать и звук, выберите Название аудиоустройства стрелку вниз и выберите аудиоустройство. Затем выберите Поток.

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

  11. Настройте место назначения для вашего потока. выберите HTTP, А затем выберите Добавить.

    Можно создать несколько пунктов назначения, но HTTP — это все, что вам нужно для вашего потока.

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

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

  14. Выберите Транслируйте все элементарные потоки установите флажок, затем выберите Поток с чего начать.

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

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

    <HTML>
    <head>
    <title> Тест веб-камеры </title>
    </ HEAD>
    <body>
    </ Body>
    </ Html>

  17. Создайте тег видео HTML5 в <body> теги. В качестве атрибута источника укажите местоположение вашего потока.

    <video src = "yourstream.no-ip.org:8080/stream" />

    Чтобы протестировать это локально на вашем компьютере, введите:

    <video src = "localhost: 8080 / stream" />

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

    <video id = "stream" width = "640" height = "480" src = "localhost: 8080 / stream" />

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

    <video id = "stream" width = "640" height = "480" src = "localhost: 8080 / stream" type = "video / ogg; codecs = theora" autoplay = "autoplay" />

  20. Ваш HTML-файл должен быть похож на этот пример.

    <HTML>
    <head>
    <title> Тест веб-камеры </title>
    </ HEAD>
    <body>
    <video id = "stream" width = "640" height = "480" src = "http: // localhost: 8080 / stream" type = "video / ogg; codecs = theora" autoplay = "autoplay" />
    </ Body>
    </ Html>

  21. Когда HTML будет выглядеть правильно, сохраните файл.

  22. Откройте файл в браузере. Чтобы протестировать его локально, щелкните файл правой кнопкой мыши и выберите браузер, например Chrome. В противном случае загрузите файл в корневой каталог HTML на вашем сервере. Поток с веб-камеры воспроизводится на почти пустой странице.

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