EMB visionVISION
데모 바로가기

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 이상으로 올려주면 됩니다.