WebRTC: Safari блокирует видео в картинке? - PullRequest
Новая
       12

WebRTC: Safari блокирует видео в картинке?

0 голосов
/ 26 августа 2018

Я работаю над пользовательским интерфейсом WebRTC, который показывает видео пользователя в виде небольшого элемента, расположенного перед видео человека, с которым разговаривает пользователь.

Вот рабочий код:

https://codepen.io/VikR/pen/GXoXRp

CSS 

#pipContainer {
    position: relative;
    top: 0;
    left: 0;
  width: 250px;
}

#otherCallerVideo  {
    position: relative;
    top: 0;
    left: 0;
  width: 100%;
}

#myVideo {
    width: 30%;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: rotateY(-180deg);
    z-index: 1000;
}

HTML 

  <p id="status">Loading room information...</p>

  <div id="start">
    <button  onclick="start(event)">Start</button><br/>
  </div>

  <div id="pipContainer">
    <video id="otherCallerVideo" playsInline="true" autoPlay></video>
    <video id="myVideo" playsInline="true" autoPlay muted></video>
  </div>

Это прекрасно работает в Chrome и Firefox, но Safari OS X и IOS, похоже, не позволяют этого.Видео пользователя исчезает.Я пробовал много разных способов, используя z-index и разные виды позиционирования, но я пока не нашел способа заставить это работать в Safari.

Возможно ли сделать это вSafari

1 Ответ

0 голосов
/ 27 августа 2018

Я получил это работает.Вот обновленный CodePen.

https://codepen.io/VikR/pen/Wgwwoa

Ключ помещал этот код overflow в контейнер видео: 

#pipContainer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 5px solid black;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

Это было сложно отследитьвниз.Поиск в Google «элементов видео z-index для сафари» показывает, что многие люди испытывают трудности с этим: на первой странице результатов появляются сообщения с 2011 по 2018 год.Многие исправления, которые работают в других случаях, похоже, не работают в этом случае, возможно, потому, что я накладываю один элемент видео поверх другого.Исправление, которое сработало, было найдено здесь .

Примечание 1: overflow: 'hidden' также работает и имеет дополнительное преимущество - скрывает полосы прокрутки.

Примечание 2: У меня естьТакое впечатление, что невозможно изменить размеры видео с помощью JavaScript.В моем приложении я установил их в HTML-рендеринге по ссылке screen.height.

...