Смотрим IP-камеру DLink на iPhone и Android

Захотел как-то директор некой организации Т посмотреть из отпуска, как у него продажники работают в его отсутствие. Так на потолке в кабинете отдела продаж появилась IP-камера с микрофоном. Дальше мне, как технарю, предстояло отдать звук+видео с камеры на яблочный телефон и на планшет от компании, которая возвращает долги целыми грузовиками пятицентовых монет.

Скажу сразу, все жители кабинета знают про камеру с микрофоном.

Первое решение этой задачи было весьма незамысловатым: web-камера и скайп, который сам поднимал трубку при звонке от директора. Решение прожило не долго. То камера “упадёт” глазом вниз, то комп “забудут” включить. И в те редкие счастливые случаи, когда позвонить всё таки удавалось, почему-то все работали.
Директор попросил другое решение задачи, на которое сотрудники не смогут повлият. Предложил wi-fi камеру, отключить которую можно только отключив питание у камеры или точки доступа или всего кабинета. Розетка камеры на потолке, по-быстрому не отключишь. Отключение точки доступа или кабинета чревато неработой всех компьютеров. Решение было поддержано и оплачено. Приступаем.

Выбор камеры как-то сразу ограничился наличием на полках магазина. Это D-Link DCP-2130. Монтаж и настройка камеры просты: монтаж — электрик, камера — ip-адрес и пароль. Камера умеет по http отдать изображение в mjpeg, но без звука. Умеет отдать звук+видео по rtsp (rtsp://ipcamera/video1.sdp)
Почему-то не все плееры дружат с rtsp. VLC оказался молодцом и победил других коллег.
Ярлычок “vlc rtsp://ipcamera/video1.sdp” на рабочий стол директора и просмотр в офисе на десктопе готов.

А вот дальше пришлось достать бубен, ибо хочется посмотреть кино с весёлыми человечками откуда угодно.
Путь первый: пробросить rtsp на шлюзе с внешнего ip на камеру. Fail. И вот почему:
1. rtsp не имеет никакой защиты в виде аутентификации смотрящего и наружу на шару выпустить это кино запрещено. Хотел было переименовать video1.sdp в mohqu3iep8Ohh.sdp, но такое не запомнить, и см п.2
2. Сильно не копал, но успел понять, что rtsp тяжко или совсем нельзя просмотреть на iOS, и далеко не каждый плеер на Android осилит.
И так, проброс порта снаружи на камеру отпал.

Путь второй: html5 или flash. Успех, но не весь.
я не смог найти ни одного flash плеера, который бы поддерживал rtsp. HTML5 video вообще не поддерживает потокового вещания. Но! VLC прекрасно читает имеющийся поток, VLC умеет декодировать видео на лету, VLC умеет отдавать по HTTP, да ещё и с аутентификацией. И у нас есть компьютер-шлюз. Совмещаем шлюз и умения VLC воедино командой на шлюзе

vlc.exe -I dummy rtsp://192.168.0.333:554/live1.sdp --http-reconnect --repeat --rtsp-caching=4600 --loop --sout=#transcode{width=320,vcodec=h264,vb=384,fps=15,venc=x264{aud,profile=baseline,level=30,keyint=30,ref=1},acodec=mp4a,ab=64,channels=1,samplerate=22050,audio-sync}:http{user=camuser,pwd=campass,dst=:8080/st.flv} --no-sout-rtp-sap --no-sout-standard-sap --ttl=1 --sout-keep

где 192.168.0.333 — это IP камеры, а rtsp://192.168.0.333/live1.sdp — это, соответственно, живой поток с камеры.
В итоге получаем, что по http://camuser:campass@gate:8080/st.flv идёт преобразованный видеопоток, уже годный для flash плеера. Кстати, открывается многими плеерами на Android, что не может не радовать.
Открываем порт 8080 на шлюзе и к потоку появляется доступ снаружи, и, как вы уже, возможно, заметили, имеющий хоть какую-то аутентификацию. Теперь flash плееру в качестве источника можно подсунуть наш поток в виде
http://camuser:campass@camera.my-org.ru:8080/st.flv
По совету друзей выбор пал на JW Player. Его простота и работоспособность полностью удовлетворили.
Накидал html страничку с аутентификацией и flash плеером, проверил, работает с компьютеров и с указанного в начале статьи планшета. Теперь директор с компьютера или с планшета заходит на
http://camera.my-org.ru, вводит имяпароль и смотрит, как его орлы работают, а кто на просто чай залетел.

Если тот же поток подсунуть html5 плееру, то ничего не выйдет, html5 никак не хочет понимать потоковое видео. Долгая игра с форматами видео/звука результата не дала. Но хочется смотреть кино ещё и на телефоне от одной фруктовой компании, а как известно, эта самая фруктовая компания ваши флеши на html вертела, поэтому меня ждал

Путь третий: Откусить яблоко и не умереть от счастья. Успех.
Гугление в яндексе долго не давало никаких результатов. Вообще никаких. Я уж начал сомневаться в своих умениях спрашивать у поисковиков. Я точно знал, что раз презентации Apple можно в прямом эфире смотреть на Apple же устройствах без дополнительных танцев, то это возможно. Примерно на третьем наскоке найти решение, я заметил часто повторяющуюся комбинацию слов, а именно HTTP Live Streaming. Я был восхищён решением Apple. Как известно, html5 умеет проигрывать только имеющийся файл. Вот и чудненько, подумали в Apple, и сказали: “а давайте представим, что живой поток — это кусочки по 10 секунд, нужно всего лишь, закончив играть текущий кусочек, сразу начать играть следующий” Супер! Это настолько гениально, насколько просто. Каждый занят своим делом. HTML5 video показывает файлы, он это умеет. Http-server файлы отдаёт и занимается всякой нагрузкой, авторизауией и пр. Он для этого и сделан. Остаётся лишь эти 10секундные кусочки вовремя подсовывать. И решение есть, и вновь VLC победил. VLC, как и остальные члены этой связки, занят исключительно своим делом — кодирует видео. Запускаем

vlc.exe -I dummy --mms-caching 0 rtsp://192.168.0.333:554/live1.sdp vlc://quit --sout="#transcode{width=320,height=180,fps=15,vcodec=h264,vb=384,venc=x264{aud,profile=baseline,level=30,keyint=30,ref=1},acodec=mp3,ab=64,channels=1}:std{access=livehttp{seglen=10,delsegs=true,numsegs=5,index=c:wwwcam01istream.m3u8,index-url=http://camera.my-org.ru/cam01/cam01-########.ts},mux=ts{use-key-frames},dst=c:wwwcam01cam01-########.ts}"

Вот что получаем: VLC складывает в папку c:wwwcam01 файлы cam01-########.ts и постоянно обновляющийся плейлист istream.m3u8, содержащий ссылки на эти файлы. Хранит 5 свежих кусочков видео, старые удаляет.
Собственно этот плейлист и отдаём HTML5 видео плееру на iDevice в качестве источника. Смотрим и наслаждаемся потоковым видео. Вот насколько просто выглядит HTML-файл:

<body>
<center>
<video width=320 height=180 controls="controls" src=/cam01/istream.m3u8 />
</center>
</body></html>

Помним только, что у Apache в .htaccess или конфигах нужно дописать новые типы файлов

AddType application/x-mpegURL m3u8
AddType video/MP2T ts

К сожалению, подсунуть такой плейлист в качестве источника для HTML5 видео можно только iDevice’ам. Жаль, что пропадает такое великолепное решение.

После почёсывания ЧСВ от проделанной работы немного обновил html страничку. Теперь директор заходит на сайт, логинится, и смотрит хоть с десктопа, хоть с Android, хоть c iOS.

хак: под андроид есть Puffin Web Browser который умеет показывать флешь, даже если флешь не установлен.

Добавляем запуск VLC в автозапуск и, пожалуй, готово.

Наблюдения за месяц полёта:
1. Тот VLC, который кодирует кусочки для iOS, работает стабильно неделями.
2. VLC, который гонит поток для флэша, любит падать через 1-2 дня непрерывной работы. Решение — перезапуск каждые два часа.
3. VLC, который гонит поток для флеша иногда теряет видео, оставляя только звук на фотне чёрного прямоугольника не Малевича. Решение не найдено, поэтому-то перезапуск каждые два часа, а не раз в сутки.
4. шлюз, на котором запущены VLC — это какой-то ранний P4 с 1G оперативной памяти, Win2K3. VLC потребляет немного оперативки и 50-60% процессора.

Автор: Nem427