Мы столкнулись с вариантом использования, когда хотели убедиться, что пользователь использует весь свой экран, а не только конкретное окно/вкладку. Я объясню решение, которое мы нашли для вышеуказанной проблемы в Chrome.

Хром

MediaTrackSettings.displaySurface

Свойство displaySurface словаря MediaTrackSettings указывает тип захватываемой поверхности дисплея.

Возможные значения —

  • application — Видеодорожка потоков содержит все окна, принадлежащие выбранному пользователем приложению.
  • browser — Видеодорожка потока представляет собой все содержимое одной вкладки браузера, которую пользователь выбрал во время вызова getDisplayMedia().
  • monitor — Видеодорожка в потоке представляет собой полное содержимое одного или нескольких экранов пользователя.
  • window — Видеодорожка потока представляет собой содержимое одного окна, выбранного пользователем.

Теперь нам нужно было в момент получения объекта MediaStream использовать его для получения этого — MediaTrackSettings.displaySurface и убедиться, что это значение равно — monitor, а если нет, показать пользователю сообщение с просьбой поделиться своим весь экран.

Вот пример кода для того же —

Другой подход —

Хотя вышеупомянутый подход работает довольно хорошо, в процессе поиска решения я также наткнулся на другой способ решения этой проблемы.

Еще одно решение, которое я нашел, связано с самим объектом MediaStream.

Как только у нас будет поток после вызова — getDisplayMedia , нам нужно получить видеодорожку, и там мы найдем свойство с именем «label», используя эту метку, мы можем решить, какой вариант экрана пользователь выбрал для совместного использования.

Мы можем получить видеодорожку (при условии, что у нас есть объект MediaStream) следующим образом:

Вот образец объекта videoTrack, полученный во всех трех случаях, когда пользователь выбирает один из этих трех вариантов для публикации — a) Весь экран b) Окно c) Вкладка Chrome

Как видите, свойство label начинается с screen:, поэтому мы можем использовать его, чтобы решить, показывает ли пользователь весь свой экран или нет.

Вот пример кода для того же —

Это все для этой истории, скоро будет еще одна. Меня зовут Паван, и я буду продолжать публиковать истории, связанные с веб-разработкой. Если вам нравятся такие истории, подписывайтесь на меня на Medium. Ваша поддержка очень важна для меня — спасибо.