大小窗切换
严格来说大小窗切换并不算 SDK 需要负责实现的功能,但这个需求在一对一连麦场景中经常用到,这里就介绍其中一种实现方案。
我们所谓"大""小"窗中的大小概念不过是 css 中的一些属性控制的,所以最简单的大小窗切换方案就是通过改变元素的 css 来实现。这里我们使用的方法更为简单,通过直接交换 2 个视频容器元素的 class 值来达到交换 2 者 css 属性的效果。再通过 transition
来为 css 切换的过程加上动画,一个低成本的大小窗切换就实现了。
回到我们的 room.html
上,我们注意到之前我们分别给 2 个容器元素设定了 2 个 class:mini-player
和 fullscreen-player
, 我们现在只需要交换这 2 个 css 就行了。
<!-- room.html -->
...
<div id="remoteplayer" class="fullscreen-player">
<canvas width="640" height="480" id="remotewave"></canvas>
</div>
<!-- 添加大小窗切换的按钮 -->
<button class="btn screen-switch" onclick="switchScreen()">大小窗切换</button>
<script src="./js/room.js"></script>
...
下面在 room.js
中完成 switchScreen
, 在开头添加如下代码
// js/room.js
function switchScreen() {
const localPlayer = document.getElementById("localplayer");
const remotePlayer = document.getElementById("remoteplayer");
// 交换 2 个元素的 class
if (localPlayer.className === "mini-player") {
localPlayer.className = "fullscreen-player";
remotePlayer.className = "mini-player";
} else {
localPlayer.className = "mini-player";
remotePlayer.className = "fullscreen-player";
}
}
最后,为我们添加的 button 加上 css,并给 css 切换加上动画过渡
/* css/room.css */
.fullscreen-player,.mini-player {
transition: all ease 0.6s;
}
.btn {
outline: none;
border: none;
position: absolute;
z-index: 9;
padding: 5px;
}
.screen-switch {
bottom: 230px;
right: 30px;
}
body {
overflow: hidden;
background: #000;
}
进入页面后,点击页面上的大小窗切换按钮就能看到动态的切换效果了。