invert

none

gray

sepia

//html
<!DOCTYPE html>
<html>
<head>
  <title>webrtc test</title>
  <style>
      .none{
          -webkit-filter:none;
      }
      .blur{
        -webkit-filter:blur(3px);
      }
      .grayscale{
          -webkit-filter:grayscale(1);
      }
      .invert{
          -webkit-filter:invert(1);
      }
      .sepia{
          -webkit-filter:sepia(1);
      }
  </style>
</head>
<body>
    <div>
        <label>audioSource音频输入: </label>
        <select id="audioSource">
    </select>
    </div>
    <div>
        <label>audioOutput音频输出: </label>
        <select id="audioOutput">
    </select>
    </div>
    <div>
        <label>videosource: </label>
        <select id="videoSource">
    </select>
    </div>
    <div>
        <label>filter加一点点特效: </label>
        <select id="filter">
            <option value='none'>None</option>
            <option value='bluer'>Blur</option>
            <option value='grayscale'>grayscale</option>
            <option value='invert'>invert</option>
            <option value='sepia'>sepia</option>
        </select>
    </div>
    

    <video autoplay playsinline id = 'player'></video>
    <script src="./lib/adapter-latest.js"></script>
    <script src="./js/client.js"></script>  
</body>
</html>

//改变video的class；通过样式来设置效果
filtersSelect.onchange = function(){        //视频特效
    videoplay.className = filtersSelect.value;
}

posted @ 2019-09-20 11:52 smileyqp 阅读(308) 评论(0) 收藏举报

刷新页面返回顶部

【webrtc】视频特效的添加（15）

文档gitbook地址

文档github地址