OpenTok Ionic 3 - z-индекс видео подписчиков и издателей, не работающих на Android - PullRequest
Новая
       10

OpenTok Ionic 3 - z-индекс видео подписчиков и издателей, не работающих на Android

0 голосов
/ 11 января 2019

Я пытаюсь создать пользовательский интерфейс, в котором видео подписчика (оппонента) должно быть в фоновом режиме в полноэкранном режиме, видео издателя (само) должно быть поверх подписчика в небольшом поле в правом верхнем углу, и Я пытаюсь показать несколько кнопок над этими двумя слоями видео. Всякий раз, когда я подключаю сеанс, иногда видео показывается, как и ожидалось, иногда издатель отображается за подписчиком. Но все время кнопки не видны / за видео. Теперь я уже правильно настроил z-индексы элементов dom, то есть z-индекс подписчика: 1, z-индекс издателя: 11 и z-индекс кнопки: 111. У кого-нибудь есть идеи? Что-то с моим пониманием?

CSS-файл: 

.video-subscriber {
width: 100% !important;
height: calc(100vh - 110px) !important;
top: 46px !important;
z-index: 0 !important;
}
.video-publisher {
width: 80px !important;
height: 120px !important;
background-color: gray;
z-index: 1 !important;
position: absolute;
top: 20px;
right: 20px;
}
.controls-btn-outer {
position: fixed;
bottom: 0;
background-color: white;
width: 100%;
height: 64px;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}

HTML-файл: 

<ion-content>
    <div id="subscriber" class="video-subscriber"></div>

    <div class="controls-btn-outer">
      <!-- buttons -->
    </div>

    <div id="publisher" class="video-publisher"></div>

</ion-content>

.ts файл: 

//publisher
let publisherOptions = {
insertMode: "append",
publishAudio: this.publishAudio
};
currentScope.publisher = OT.initPublisher("publisher", publisherOptions);
currentScope.session.publish(currentScope.publisher);
// subscriber
let subscriberOptions = {
insertMode: "replace"
};
currentScope.subscriber = currentScope.session.subscribe(event.stream, "subscriber", subscriberOptions);

N.B. Мой пользовательский интерфейс не должен зависеть от того, кто присоединяется к сеансу первым. Я всегда хочу, чтобы собственное видео было поверх видео оппонента.

1 Ответ

0 голосов
/ 11 января 2019

Когда вы работаете с плагином Cordova OpenTok , видео не является частью DOM, потому что это представление iOS / Android, которое создано на собственном слое и открыто через JavaScript. Плагин также не поддерживает Z-Index, поэтому у вас возникают проблемы с наложением элементов управления. Вы можете отследить проблему здесь на репо: https://github.com/opentok/cordova-plugin-opentok/issues/128

Спасибо!

...