EMB visionVISION
데모 바로가기

Video.js × SGR Vision

표준 Video.js 플레이어에 enhance(videoElement, options) 한 줄로 실시간 화질 개선을 적용합니다. Video.js 가 MSE(VHS)로 HLS 를 재생하므로 canvas 오염 없이 동작하며, 컨트롤바는 그대로 유지됩니다(WebGPU 우선·WebGL 폴백).

렌더러
// 1) 표준 Video.js 플레이어
const player = videojs("vid", { html5: { vhs: { overrideNative: true } } });

// 2) 준비되면 내부 <video> 에 화질 개선 적용
player.ready(() => {
  const videoEl = player.el().querySelector("video");
  const fx = enhance(videoEl, { enabled: true, profile: "default", licenseKey: "VSK-…" });
});
컨트롤바 z-index — SDK 오버레이 canvas 는 z-index:2 로 영상 위에 겹쳐집니다. Video.js 컨트롤바가 가려지지 않도록 .vjs-control-bar { z-index:3 } 한 줄만 추가하면 됩니다.