实时音视频云

  • 大小窗切换

    最近更新时间:2018-08-30 18:30:28

    严格来说大小窗切换并不算 SDK 需要负责实现的功能,但这个需求在一对一连麦场景中经常用到,这里就介绍其中一种实现方案。

    我们所谓"大""小"窗中的大小概念不过是 css 中的一些属性控制的,所以最简单的大小窗切换方案就是通过改变元素的 css 来实现。这里我们使用的方法更为简单,通过直接交换 2 个视频容器元素的 class 值来达到交换 2 者 css 属性的效果。再通过 transition 来为 css 切换的过程加上动画,一个低成本的大小窗切换就实现了。

    回到我们的 room.html 上,我们注意到之前我们分别给 2 个容器元素设定了 2 个 class:mini-playerfullscreen-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;
    }
    

    进入页面后,点击页面上的大小窗切换按钮就能看到动态的切换效果了。

    以上内容是否对您有帮助?
  • Icon free helper
    Close