Мы столкнулись с вариантом использования, когда хотели убедиться, что пользователь использует весь свой экран, а не только конкретное окно/вкладку. Я объясню решение, которое мы нашли для вышеуказанной проблемы в 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. Ваша поддержка очень важна для меня — спасибо.