1.0.4 • Published 1 year ago
@baiduplayer/brtc-beauty-effect v1.0.4
BRTCBeautyEffect
简介
BRTCBeautyEffect 封装了百度云 RTC SDK 的美颜功能(美白(亮度)、磨皮（平滑度）、清晰（锐化度）、红润、对比度（明暗度）)，可以方便开发者在 Web 中使用。
接入指南
1. 安装
npm安装
npm install @baiduplayer/brtc-beauty-effectscript标签引入
<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)参数说明：
| 参数 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
| mediaStream | MediaStream | 是 | webrtc getUserMedia 生成的流或 new MediaStream构建的流 |
| options | Object | 否 | 可在初始化时设置美颜参数。详细见setOptions API参数说明 |
API
getBeautyStream
let newStream = await beautyEffect.getBeautyStream(mediaStream,options);参数说明：
| 参数 | 类型 | 是否必填 | 说明 |
|---|---|---|---|
| mediaStream | MediaStream | 是 | webrtc getUserMedia 生成的流或 new MediaStream构建的流 |
| options | Object | 否 | 可在初始化时设置美颜参数。详细见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>
```