🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

@baiduplayer/brtc-beauty-effect

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@baiduplayer/brtc-beauty-effect

BRTCBeautyEffect 封装了百度云 RTC SDK 的美颜功能(美白(亮度)、磨皮（平滑度）、清晰（锐化度）、红润、对比度（明暗度）)，可以方便开发者在 Web 中使用。

latest
npmnpm
Version
1.0.4
Version published
Weekly downloads
20
42.86%
Maintainers
1
Weekly downloads
 
Created
Source

BRTCBeautyEffect

简介

BRTCBeautyEffect 封装了百度云 RTC SDK 的美颜功能(美白(亮度)、磨皮（平滑度）、清晰（锐化度）、红润、对比度（明暗度）)，可以方便开发者在 Web 中使用。

接入指南

1. 安装
npm安装
     npm install @baiduplayer/brtc-beauty-effect
script标签引入
    <script src="./brtc-beauty-effect.js"></script>
2、使用
2.1 引入
   import BRTCBeautyEffect from "@baiduplayer/brtc-beauty-effect"

或者

   <script src="./brtc-beauty-effect.js"></script>
2.2 实例化

1、创建beautyEffect实例

   let beautyEffect = new BRTCBeautyEffect()

2、使用beautyEffect实例，通过getBeautyStream获取美颜后的stream

   let newStream = await beautyEffect.getBeautyStream(mediaStream,options)

参数说明：

参数类型是否必填说明
mediaStreamMediaStream是webrtc getUserMedia 生成的流或 new MediaStream构建的流
optionsObject否可在初始化时设置美颜参数。详细见setOptions API参数说明

API

getBeautyStream
let newStream = await beautyEffect.getBeautyStream(mediaStream,options);

参数说明：

参数类型是否必填说明
mediaStreamMediaStream是webrtc getUserMedia 生成的流或 new MediaStream构建的流
optionsObject否可在初始化时设置美颜参数。详细见setOptions API参数说明

返回值： newStream: MediaStream为生成的美颜流，可以直接发布，video.srcObject = newStream。

setOptions
 设置美颜参数

    beautyEffect.setOptions({
        // 对比度。取值0，1，2
        contrast: 2,
        // 亮度。取值0-1
        lightening: 0.7,
        // 平滑度。取值0-1
        smoothness: 0.6,
        // 锐化程度。取值0-1
        sharpness: 0.5,
        // 红润度。取值0-1
        redness: 0.5
}:beautyEffectOptions)

参数说明：

  • contrast: 对比度，与 lightening 参数搭配使用。取值越大，明暗对比越强烈。取值包括：
    • 0: 低对比度。
    • 1: （默认）正常对比度。
    • 2: 高对比度。
  • lightening: Number 型。亮度，取值范围为 [0.0,1.0]，其中 0.0 表示原始亮度。默认值为 0.5。用于实现美白效果，取值越大，美白程度越大。
  • smoothness: Number 型。平滑度，取值范围为 [0.0,1.0]，其中 0.0 表示原始磨皮程度。默认值为 0.5。用于实现祛痘、磨皮等效果，取值越大，磨皮程度越大。
  • sharpness: Number 型。锐化程度，取值范围为 [0.0,1.0]，其中 0.0 表示原始锐度。默认值为 0.5。用于实现提升画面清晰度的效果，取值越大，锐化程度越大。
  • redness: Number 型。红润度，取值范围为 [0.0,1.0]，其中 0.0 表示原始红润度。默认值为 0。用于实现红润肤色等效果，取值越大，红润程度越大。
getOptions

获取当前美颜参数

let options = beautyEffect.getOptions()

返回值：beautyEffectOptions

enable

开启美颜特效

beautyEffect.enable()
disable

关闭美颜特效

beautyEffect.disable()

destroy

销毁美颜实例。销毁后再次使用需重新创建const beautyEffect = new BRTCBeautyEffect();

beautyEffect.destroy()

示例

  <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>rtc美颜</title>
         <script src="../dist/brtc-beauty-effect.js"></script>
     </head>
     <body>
         <div>
             <div style="display: inline-block">
                 <video id="beautyVideo" width="340" style="transform: scaleX(-1)"></video>
             </div>
         </div>
         <div>
             <h4>美颜特效：</h4>
             <div>
             对比度：
             <select id="ContrastBeauty">
                 <option>0</option>
                 <option selected>1</option>
                 <option>2</option>
             </select>
             </div>
             <div>
             <span>美白：</span>
             <input type="range" id="LighteningBeauty" value="0.5" max="1" mmin="0" step="0.1" />
             </div>
             <div>
             <span>磨皮：</span>
             <input type="range" id="SmoothnessBeauty" value="0.5" max="1" mmin="0" step="0.1" />
             </div>
             <div>
             <span>锐化：</span>
             <input type="range" id="SharpnessBeauty" value="0.5" max="1" mmin="0" step="0.1" />
             </div>
             <div>
             <span>红润：</span>
             <input type="range" id="RednessBeauty" value="0" max="1" mmin="0" step="0.1" />
             </div>
             <button id="start">开始</button>
             <button id="enableBeauty">开启美颜</button>
             <button id="disableBeauty">关闭美颜</button>
             <button id="getoptions">获取当前设置的美颜参数</button>
             <button id="destroy">销毁</button>
         </div>
     </body>
     <script>
            window.onload = ()=>{
             let video = document.getElementById("beautyVideo");
             let beautyEffect = null;
             let localStream = null;
             start();
             async function start(){
                 beautyEffect = new BRTCBeautyEffect();
                 localStream = await getLcalStream();
                 if(localStream){
                     let newStream = await beautyEffect.getBeautyStream(localStream)
                     video.srcObject = newStream;
                     video.play()
                 }
                 }
                 function getLcalStream(){
                 return new Promise((resolve)=>{
                     navigator.mediaDevices.getUserMedia({
                     video: {
                         width: 1280,
                         height: 720,
                     },
                     audio: false,
                     })
                     .then(async(stream) => {
                         resolve(stream)
                     });
                 });
                 }
                 // 设置美颜特效
                 let beautyEffectArray = [
                 "Lightening",
                 "Smoothness",
                 "Sharpness",
                 "Redness",
                 "Contrast",
                 ];
                 beautyEffectArray.forEach((val) => {
                 let documentVal = document.getElementById(val + "Beauty");
                 documentVal.onchange = () => {
                     let param = {
                     [val.toLocaleLowerCase()]: documentVal.value,
                     }
                     beautyEffect.setOptions(param);
                 };
                 });
             document.getElementById("start").onclick = () => {
             destroy();
             start();
             }
             // 开启
             document.getElementById("enableBeauty").onclick = () => {
                 beautyEffect.enable();
             };
             // 关闭
             document.getElementById("disableBeauty").onclick = () => {
                 beautyEffect.disable();
             };
             // 获取当前设置的美颜参数
             document.getElementById("getoptions").onclick = () => {
                 console.log(beautyEffect.getOptions(),'getoptions');
             };
             // 销毁 
             document.getElementById("destroy").onclick = () => {
                 destroy()
             }
             function destroy(){
                 beautyEffect && beautyEffect.destroy && beautyEffect.destroy();
                 beautyEffect = null;
                 localStream = null;
             }
             }
     </script>
     </html>
  ```

Keywords

brtc-beauty-effect
webgl

FAQs

Package last updated on 28 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

jscrambler npm Package Compromised in Supply Chain Attack

Research

/

Security News

jscrambler npm Package Compromised in Supply Chain Attack

A compromised jscrambler npm release added a malicious preinstall hook that runs hidden native binaries on Linux, macOS, and Windows.

By Socket Research Team  -  Jul 11, 2026