Использование web-камеры из javascript

Маленькая предыстория, месяца два назад обратились ко мне с задачей: реализовать возможность отправки фотографий пользователями прямо с сайта

Как следствие - маленький тестовый проект, в котором реализована отправка фото с web-камеры на сервер и вывод этого фото по ссылке
Публиковал эти 10 строк кода в windows-azure, не так уж плохо оказалось (пробная версия даёт 7 тыс. пробных рублей на что угодно), но увы - уже 30 дней истекли, так что демо в фидлере и код проекта в самом конце заметки




Итак, коротко о главном

Вывод информации с вебки на страницу:


Но чтобы отправить конкретный кадр из видео - нужно получить его как изображение
Самое простое что я придумал - отрисовать видео на 2d канве и base64 отправлять уже на сервер...

Получение изображения из видео:

Демо, но с добавлением на страницу

Результат GetVideoFrame уже можно отправлять на сервер, но можно сократить трафик, если сделать изображение черно-белым:


Еще одно маленькое демо

На демках ширину видео с камеры выставил 100 специально, чтобы меньше места на экране занимало
Частоту обновления фрейма правого - 0.5 сек, просто так, вот тут быстро сделал: https://fiddle.jshell.net/c8zse5r3/2/

Итак, конечный JS-хелпер:


Razor HTML:


И несколько методов контроллера:


Краткое описание:
1. Читаем поток с камеры
2. по таймеру забираем кадр
3. отправляем кадр на сервер
4. на сервере сохраняем кадр в кеше
5. по специальной ссылке под видео в демке - открываем отдельную страницу на телефоне, к примеру, и смотрим на телефоне то, что транслирует ноутбук, или наоборот - с ноута то, что транслирует телефон

Ссылка на демку: https://cloud.mail.ru/public/30e6f9f24ccb%2FWebCamShare.zip