Статьи

Як здійснити найпростішу веб-трансляцію (веб-камера + VLC media player (Windows) + WordPress + FlowPlayer)

- 18.08.2010

Завдання таке: з мінімальними зусиллями вставити живе відео з домашньої веб-камери на сайт під управлінням WordPress.


Будемо вважати, що веб-камера вже підключена, налаштована і нормально працює.

підготовка:

  • Завантажити та встановити VLC media player для Windows (відкрийте посилання, на головній сторінці велика синя кнопка «Download VLC»). VLC буде здійснювати кодування і потокове мовлення.
  • завантажити FlowPlayer (Знадобиться для тестування, а також якщо ваш сайт не на движку WordPress). FlowPlayer - це flash-плеєр, який буде безпосередньо здійснювати показ відео. В принципі його можна замінити будь-яким іншим плеєром, який вам більше до смаку.

Налаштування VLC:

  • Відкрити VLC media player.
  • Для початку просто переглянути відео з веб-камери в VLC плеєрі. У головному меню відкриваємо Медіа -> Відкрити пристрій захоплення: - 18

    Тестуємо веб-камеру + VLC

  • У графі «Назва відео-пристрої» вибираємо свою веб камеру (у мене Logitech Webcam 250). У графі «Назва аудіо-пристрої» вибираємо мікрофон веб-камери (у мене Microphone Logitech Mic (Webcam 250)). Після цього натискаємо кнопку Відтворити. Якщо все правильно, ви побачите відео зі своєю веб-камери.
  • Переконавшись, що камера працює переходимо до налаштування потокового мовлення. Відкриваємо Медіа -> Потокове мовлення -> закладка Пристрій захоплення. Також як і в попередньому пункті вибираємо пристрій захоплення відео і аудіо. Натискаємо на кнопку Потік.
  • У вікні, знаходимо кнопку Наступний, натискаємо її і потім ще раз. У підсумку ви повинні побачити ось таке вікно:

    VLC - потокове мовлення

    В поле «Рядок введення для генерованого потоку» вставляємо:

    : Sout = # transcode {vcodec = h264, vb = 300, ab = 64, fps = 25, width = 256, height = 192, acodec = mp3, samplerate = 44100}: duplicate {dst = std {access = http {mime = video / x-flv}, mux = ffmpeg {mux = flv}, dst =: 7777}}

    Розглянемо параметри докладніше:
    vcodec = h264 - відео кодек H264;
    acodec = mp3 - аудіо кодек;
    vb = 300 - відео бітрейт (чим вище, тим вище якість і вимоги до смуги пропускання);
    ab = 64 - аудіо бітрейт (чим вище, тим вище якість і вимоги до смуги пропускання);
    fps = 25 - кількість кадрів в секунду;
    width = 256, height = 192 - відповідно ширина і висота зображення;
    samplerate = 44100 - частота дискретизації звуку.

    Ці параметри можна варіювати і тим самим покращувати / знижувати якість зображення ну і як наслідок вимоги до смуги пропускання. Що стосується конкретних цифр, то вони взяті мною з videolan.org з прикладу для простих веб-трансляцій. Для перегляду в невеликому вікні плеєра (до 640х480) якість цілком нормальне)

    dst =: 7777 - найважливіший параметр, що визначає мережевий порт (TCP) по якому буде здійснюватися мовлення. У моєму випадку: 7777 (ви можете вибрати будь-який інший не зайнятий порт). Порт повинен бути відкритий в брандмауері. Якщо підключення до Інтернет здійснюється через роутер, то на роутері необхідно додатково налаштувати форвардного цього порту.

    Після налаштування параметрів, натискаємо на кнопку Потік.

  • Якщо все працює правильно, то повинен засвітитися роботи на веб-камері, а також в рядку стану VLC плеєра повинна бути напис «Передача потокового»:

    Йде потокова передача

  • Щоб остаточно переконатися, запускаємо Flowplayer на локальному комп'ютері. Для цього розпаковуємо раніше скачаний архів (можна прямо на робочий стіл, щоб ближче). В архіві папка example, в ній файл index.htm - відкриваємо його в блокноті. Шукаємо рядок: http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv і замінюємо її на http: // localhost: 7777, де 7777 раніше обраний порт веб-трансляції. Зберігаємо файл, і запускаємо його подвійним клацанням. Відкриється браузер за замовчуванням. Якщо це експлорер, то ви побачите вгорі попередження про заблокованого документа - все дозволяємо. В результаті відкриється сторінка з плеєром. Завантаження трансляції може зайняти до 30 сек. На початку (10-15 сек.) Можуть бути проблеми з якістю (наприклад у мене все зелене).

Вставляємо трансляцію на сайт WordPress:

  • Необхідна умова: інтернет-провайдер повинен надати вам зовнішній статичний або зовнішній динамічний ip-адреса. У разі зовнішнього динамічного адреси (на сьогоднішній день найбільш часто зустрічається тип адреси) необхідно додатково налаштувати сервіс DDNS .
  • Встановлюємо і активуємо плагін FV WordPress Flowplayer (З безлічі інших плагінів, він мені сподобався найбільше). Після установки досить вставити на сторінку наступний шорттег: [flowplayer src = 'http: //89.235.17.66: 7777' width = 520 height = 330 autoplay = true]

    де 89.235.17.66 - ваш зовнішній ip-адреса або доменне ім'я DDNS, 7777 - порт веб-трансляції.

  • Увага! Якщо ви підключені до Інтернет через роутер, ввідео на сайті може не програватися (для вас). Переконатися, що трансляція працює, можна, відкривши сайт з будь-якого іншого комп'ютера не з вашої локальної мережі (наприклад попросити зайти на сайт одного).

Новости