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

Необходимо трансилировать видео с экрана компьютера на веб-страницу в реальном времени. Также из веб-страницы передаются нажатия клавиш, клики и т.д. получается такой колхозный RDP(Эта часть реализована и не вызывает вопросов).

Как это сейчас реализовано
1. Консольное программа на С# выполняется на компьютере экран которого необходимо трансиловать.
2. Программа делает скриншот в формате jpeg
3. Программа пересылает скриншот в бинарном виде по WebSocket в браузер.
4. Далее js рендерит это изображение в canvas.
var _canvas = document.getElementById("player");
var _ctx = _canvas.getContext("2d");
		
var _image = new Image();
_image.onload = function() {
	_ctx.drawImage(_image, 0, 0);
};

socket.onmessage = function(event) {	
	URL.revokeObjectURL(_image.src);		
	_image.src = URL.createObjectURL(event.data);
};

Это работает и достаточно быстро но не real-time небольшая задержка есть 100-150мс.

Собрав статистику производительности в браузере получил следущее.
5b9fa054a2e39413912641.png
Из таймлайна видно что в "Other" все занято вызовами URL.createObjectURL. По другому отобразить байтовый массив с картинкой в js невозможно. Собственно здесь тупик.

Соотвественно вопросы:
1. Каким образом в С# можно захватить видео поток с экрана компьтютера и передать его в браузер.
2. Можно ли как то ускорить существующую схему передачи изображения? если да то как?
  • Вопрос задан
  • 3889 просмотров
Решения вопроса 1
ayazer
@ayazer
Sr. Software Engineer
вы переизобрели MJPEG. он используется во всяких системах видеонаблюдения т.к. из-за минимального кол-ва сжатия дает хорошие стопкадры. главный недостаток - по той-же причине потребляет огромное кол-во трафика (реально огромное, видео на 5-10 минут с фпс 20+ в этом формате будет занимать пару гб). Выше в комментариях советовали использвать вебртс. Так вот, на всякий случай - он тут нахрен не нужен. Но обратить внимание на H.264 который там используется можно. Что видео в mjpeg, что h.264 можно просто и без лишних телодвижений открыть в браузере как стрим. А нативная поддержка видеокодека в браузере будет работать быстрее чем рендер кадров джаваскриптом.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
2. Программа делает скриншот в формате jpeg
3. Программа пересылает скриншот в бинарном виде по WebSocket в браузер.

Как-то не оптимально. Думаю программа должна делать задержку, формировать оптимальный поток и отправлять.
Ответ написан
@mefutu
Задумывался об этой теме.
Для начала вам правильно подсказывают про webrtc- проект с открытым исходным кодом, который разработала компания Google..
Потоковое видео удобней при условии что, пользователей будет много. А вот насколько сильно упадет ваш костыль с jpeg - неизвестно, особенно если вам вдруг резко потребуется увеличить FPS/качество картинки...

P.s Стабильнее видео передавать через webrtc, а вот уже обрабатывать нажатия клавиш посредством обычных запрос/ответ.
Ответ написан
Комментировать
@Shikyaro
Just backend dev
Для передачи и отображения -- WebRTC
Ответ написан
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 апр. 2024, в 05:01
999999 руб./за проект
19 апр. 2024, в 03:52
1000 руб./за проект
19 апр. 2024, в 03:01
1000 руб./за проект