在音视频通话或互动直播场景中，用户往往希望通过美颜效果呈现出良好的肌肤状态，或通过画面滤镜改变视频的色调与氛围。NERTC SDK 提供基础美颜功能，打造自然的美颜和滤镜效果。

网易云信还提供美颜插件 AdvancedBeauty，可以与核心 SDK 搭配使用，帮助您实现高级美颜功能，具体请参考高级美颜。

功能描述

网易云信 NERTC Web SDK 提供基础美颜能力，支持通过调整美颜、滤镜相关参数，帮助您轻松实现基础美颜功能。

前提条件

在实现美颜功能前，请确保已在您的项目中实现基本的实时音视频功能。

注意事项

• 美颜的计算和渲染处理属于实时计算密集型操作，此操作过程中存在较大的 GPU 和 CPU 开销，因此若用户的设备性能不足以支撑运算，不建议启用此功能，否则可能会导致帧率下降等问题。
• 美颜功能暂时仅支持桌面端 Chrome 浏览器和 Safari 浏览器（建议 15.4+），暂不兼容 Firefox 浏览器。
• 若您使用的是 Safari 浏览器，由于浏览器的限制，在您开启了美颜功能后，切后台时，SDK 会自动停止对视频的采集与播放，切回此页面后即可恢复。如果您需要保证在切后台时，视频可以正常播放，则需要添加 visibilitychange 监听，监听切换后台的动作。在切后台导致页面失活时，关闭美颜功能；并在切回页面时，自动开启美颜。
• 在 Safari 浏览器上开启了美颜功能后，若您需要调用 localStream.stop() 方法停止播放音视频流，请在此之前先关闭美颜功能；若您需要再次开启美颜功能，请在此之前先调用 localStream.play() 方法播放音视频流。
• 若您使用的是 Safari 15 版本的浏览器，请注意此版本的浏览器有未修复的 bug，会导致您开启美颜功能时出现黑屏，建议将浏览器更新到 Safari 最新版本。
• 用户可以在音视频通话过程中，调用 setBeautyEffectOptions() 方法实时调整美颜相关参数。

若您使用的是 v4.6.20 之前的版本：

• 无法同时开启美颜和编码水印功能。
• 若用户在启用美颜功能后关闭了摄像头，画面会变成黑屏，无美颜效果。若用户希望继续使用美颜功能，需要再次开启摄像头，并在 localStream.open() 回调中再次调用 setBeautyEffect() 方法开启美颜，默认继续使用原来设置的相关参数。
• 若用户在启用美颜功能后切换了摄像头，则需要在 localStream.switchDevice() 回调中再次调用 setBeautyEffect() 方法才能继续正常使用美颜功能，默认继续用原来设置的相关参数。

而自 v4.6.20 版本起，支持同时开启美颜和编码水印功能，且支持在关闭又开启摄像头或切换摄像头的情况下，保持美颜效果。因此建议您升级至最新版本，体验更细节、灵活的美颜功能。

基础美颜

配置步骤

1. 在成功加入房间后调用 createStream 方法创建并返回一个本地音视频流对象。

   调用 createStream 创建媒体流之前，需要通过 getDevices 方法获取麦克风和摄像头设备的 deviceId。详细说明请参考音视频设备检测。

2. 调用 init 方法启动本地音视频流后，调用 localStream.play() 方法播放本地音视频流。

3. 在本端监听 on(basic-beauty-res-complete) 事件，以判断基础美颜资源是否加载成功。

4. 调用 setBeautyEffect 方法，并设置 enable 参数为 true 开启基础美颜。

5. 调用 setBeautyEffectOptions 方法设置基础美颜效果，并调整对应的效果强度。相关参数的说明如下。

   分类	项	枚举值	描述
   美肤	美白	brightnessLevel	取值范围为 0 ~ 1，默认值为 0
   	红润	rednessLevel	取值范围为 0 ~ 1，默认值为 0
   	磨皮	smoothnessLevel	取值范围为 0 ~ 1，默认值为 0

6. 若您需要取消基础美颜效果，请调用 setBeautyEffect 方法，并设置 enable 参数为 false 关闭基础美颜。

示例代码

使用美颜功能的基础流程对应的示例代码如下：

// 创建本端 stream 实例
rtc.localStream = NERTC.createStream({
    uid: uid,                      // 本端的uid
    audio: true,                   // 是否从麦克风采集音频
    microphoneId: microphoneId,    // 麦克风设备 deviceId，通过 getMicrophones() 获取
    video: true,                   // 是否从摄像头采集视频
    cameraId: cameraId             // 摄像头设备 deviceId，通过 getCameras() 获取
});

//启动本地音视频流
rtc.localStream.init().then(()=>{
    //音视频初始化完成
    //v5.4.0版本开始，需要在localStream初始化之后开启美颜及设置参数
    //开启基础美颜功能
    rtc.localStream.setBeautyEffect(true) //enable 参数传 true 表示开启，传 false 表示关闭
    //设置基础美颜参数并传递
    let effects = {
        brightnessLevel: 0, // 美白度(0 - 1)，默认值是 0
        rednessLevel: 0, // 红润度(0 - 1)，默认值是 0
        smoothnessLevel: 0 // 平滑度(0 - 1)，默认值是 0
    }
    rtc.localStream.setBeautyEffectOptions(effects)

    let div = document.getElementById('local-container')
    //开始播放本地视频流
    rtc.localStream.play(div) 
})

//监听基础美颜资源是否加载成功（v4.6.20+ 版本）
rtc.localStream.on('basic-beauty-res-complete',(failUrls)=>{
    if(failUrls.length){
      console.error('基础美资源加载失败，失败的连接地址为：',failUrls);
    }else{
      console.log('基础美颜资源记载完毕');
    }
})

//关闭基础美颜功能
rtc.localStream.setBeautyEffect(false)

在美颜功能开启的进程中切换摄像头的示例代码如下(v4.6.20 之后不需要处理)：

//切换摄像头
rtc.localStream.switchDevice('video', cameraId).then(()=>{
    rtc.localStream.setBeautyEffect(true);
})

在美颜功能开启的进程中关闭摄像头后的操作对应的示例代码如下(v4.6.20 之后不需要处理)：

// 先关闭美颜, 再关闭摄像头
rtc.localStream.setBeautyEffect(false);
rtc.localStream.close({
    type: 'video'
  })
//打开摄像头并使用美颜功能
 rtc.localStream.open({
    type: 'video',
    deviceId: deviceId,
 }).then(()=>{
     rtc.localStream.setBeautyEffect(true);
})

滤镜

配置步骤

1. 在成功加入房间后调用 createStream 方法创建并返回一个本地音视频流对象。

   调用 createStream 创建媒体流之前，需要通过 getDevices 方法获取麦克风和摄像头设备的 deviceId。详细说明请参考音视频设备检测。

2. 调用 init 方法启动本地音视频流后，调用 localStream.play() 方法播放本地音视频流。

3. 调用 setBeautyEffect 方法，并设置 enable 参数为 true 开启基础美颜。

4. 调用 setFilter 方法启用滤镜功能，并调整对应的效果强度，具体请参见滤镜枚举值。

   参数	说明
   options	指定滤镜效果。目前支持多达 15 种滤镜效果。
   intensity	指定滤镜强度。取值范围为 [0,1]，各种滤镜效果的默认值不同。取值越大，效果强度越大，请根据业务需要自定义设置滤镜强度。

   • 滤镜效果可以和美颜等效果互相叠加，但是不支持叠加多个滤镜。
   • 需要更换滤镜时，重复调用 setFilter 接口使用新的滤镜效果即可。

5. 若您需要取消滤镜效果，请调用 setFilter 方法，并设置 intensity 参数为 0 取消滤镜。

滤镜枚举值

项	枚举值	描述
自然	ziran	取值范围为 0 ~ 1，默认值为 1
白皙	baixi	取值范围为 0 ~ 1，默认值为 0.5
粉嫩	fennen	取值范围为 0 ~ 1，默认值为 0.5
唯美	weimei	取值范围为 0 ~ 1，默认值为 0.5
浪漫	langman	取值范围为 0 ~ 1，默认值为 0.5
日系	rixi	取值范围为 0 ~ 1，默认值为 0.5
蓝调	landiao	取值范围为 0 ~ 1，默认值为 0.5
清凉	qingliang	取值范围为 0 ~ 1，默认值为 0.5
怀旧	huaijiu	取值范围为 0 ~ 1，默认值为 0.5
青橙	qingcheng	取值范围为 0 ~ 1，默认值为 1
午后	wuhou	取值范围为 0 ~ 1，默认值为 1
质感	zhigan	取值范围为 0 ~ 1，默认值为 1
默片	mopian	取值范围为 0 ~ 1，默认值为 1
电影	dianying	取值范围为 0 ~ 1，默认值为 1
黑白	heibai	取值范围为 0 ~ 1，默认值为 1

示例代码

// 创建本端 stream 实例
rtc.localStream = NERTC.createStream({
    uid: uid,                      // 本端的uid
    audio: true,                   // 是否从麦克风采集音频
    microphoneId: microphoneId,    // 麦克风设备 deviceId，通过 getMicrophones() 获取
    video: true,                   // 是否从摄像头采集视频
    cameraId: cameraId             // 摄像头设备 deviceId，通过 getCameras() 获取
});

//启动本地音视频流
rtc.localStream.init().then(()=>{
    //音视频初始化完成
    let div = document.getElementById('local-container')
    //开始播放本地视频流
    rtc.localStream.play(div)

    //v5.4.0版本开始，需要在localStream初始化之后开启美颜及设置参数
    //开启基础美颜功能
    rtc.localStream.setBeautyEffect(true) //enable 参数传 true 表示开启，传 false 表示关闭
    //设置滤镜参数并传递
    rtc.localStream.setFilter('ziran', 1);
    //需要关闭滤镜，将强度设置成 0 即可
});

API 参考

方法	功能描述
createStream	创建并返回音视频流对象。
init	启动本地音视频流。
play	播放本地音视频流。
setBeautyEffect	启用基础美颜功能。
setBeautyEffectOptions	设置基础美颜效果。
setFilter	启用滤镜功能。

常见问题

Safari 浏览器，开启美颜时出现黑屏

问题现象

使用 Safari 15 版本的浏览器接入 NERTC，开启美颜时出现黑屏。

问题原因

Safari 浏览器的 bug，具体请参见 WebKit Bug 230617。

问题解决

建议升级到 Safari 浏览器的最新版本。