VPE Player × SGR Vision
네이버 클라우드
VPE Player(ncplayer)에 enhance(videoElement, options) 한 줄로
실시간 화질 개선을 적용합니다. VPE 가 MSE(HLS.js)로 재생하므로
canvas 오염 없이 동작하며, VPE 컨트롤바는 그대로 유지됩니다(WebGPU
우선·WebGL 폴백).
렌더러 —
// 1) VPE Player UMD 스크립트 (access_key 포함)
<script src="https://player.vpe.naverncp.com/v2/ncplayer.2.0.0.js?access_key=…"></script>
// 2) VPE 플레이어 생성
const player = new ncplayer("player-container",
playlist: [{ file: "https://…/master.m3u8" }] ,
});
// 3) 내부 <video> 에 화질 개선 적용
const videoEl = document.querySelector("#player-container video");
const fx = enhance(videoEl, { enabled: true, profile: "default", licenseKey: "VSK-…" });
컨트롤바 z-index — SDK 오버레이 canvas 는
z-index:2 로 영상 위에 겹쳐집니다. VPE 의 커스텀 컨트롤
UI 가 가려지지 않도록 #player-container 내부
컨트롤/오버레이 요소의 z-index 를 3 이상으로 올려주면
됩니다.