PallyCon Visible Watermarking 가이드

개요

PallyCon Visible Watermarking 제품은 비디오 콘텐츠가 불법 유출된 경우에 유출한 사용자를 식별하기 위한 HTML5 플레이어용 워터마크 솔루션입니다.

녹화된 영상에 사용자 정보가 표시되므로 불법 유출 시도 자체를 억제하는 효과도 기대할 수 있으며, 멀티 DRM 솔루션만으로는 100% 방지하지 못하는 크롬 브라우저의 화면 녹화 이슈에 대한 보완책으로 활용될 수 있습니다.

본 문서는 Visible Watermarking SDK 1.3.0 버전을 기준으로 작성되었습니다.

주요 기능 및 특징

Visible Watermarking SDK의 주요 특징은 다음과 같습니다.

  • 다양한 HTML5 플레이어 지원
  • 동영상 화면에 오버레이 형태로 임의의 워터마크 문자열 표시
  • 여러 개의 워터마크 문자열 표시 가능
    • 예: 이름, 아이디, IP주소 등 다양한 정보를 순차적으로 표시
  • 워터마크를 쉽게 가리거나 지울 수 없도록 주기적으로 무작위 위치에 표시 가능
  • 워터마크 표시 시간 및 간격 조절
  • 자바스크립트 난독화를 통한 디버깅 방지
기존에 SDK와 별도로 제공되던 ‘VideoJS 버전’ Visible Watermarking 제품은 SDK 버전으로 대체되어 더 이상 제공되지 않습니다. VideoJS 플레이어와의 연동을 원하는 고객사는 아래 가이드와 SDK에 포함된 Readme.demo.ko.md 문서를 참고해 직접 연동하시기 바랍니다.

HTML5 플레이어 연동

SDK에서 제공하는 다음과 같은 API를 통해 임의의 HTML5 플레이어에 Visible Watermarking 기능을 추가할 수 있습니다.

// 워터마크 객체를 생성합니다.
// playerId는 사용되는 플레이어 객체의 ID 입니다.
var watermark = new PallyconWatermark(playerId);

// 재생되는 콘텐츠의 가로, 세로의 길이를 설정합니다.
// 플레이어의 콘텐츠 로딩이 완료된 후 해당 콘텐츠의 크기 정보를 가져올 수 있어야 합니다.
watermark.setVideoSize(videoWidth, videoHeight);

// 글꼴, watermark 등을 설정합니다.
watermark.setWatermarkData(object);

// player의 종료 또는 멈춤 명령을 받을 콜백 함수를 등록합니다.
// player id를 가진 객체가 사라지는 경우 등에 호출됩니다.
watermark.setForceStopCallback(callback);

// 워터마크의 초기 설정과정에서 오류가 발생되었을때 명령을 받을 콜백 함수를 등록합니다.
// 해당 콜백 함수가 호출 될 경우 워터마크가 동작하지 않습니다.
watermark.setFailedSettingCallback(callback);

// 설정이 완료된 watermark를 화면에 표시합니다.
// interval, peakduration에 따라 워터마크를 화면에 표시합니다.
watermark.start();

// 동작하는 watermark를 중지 합니다.
watermark.stop();

// 현재 화면에 보여지고 있는 watermark를 안보이게 합니다.
// 화면 크기 변경, VisibleWatermark 재설정이 필요한 경우 등에 호출합니다.
watermark.hideAll();

// VisibleWatermark가 정상적으로 동작하는 여부를 확인할 수 있습니다.
watermark.isAlive();

제품 인증

PallyCon Visible Watermarking 제품을 사용하려면 고객 인증이 필요합니다. 이를 위해 PallyCon 사이트 가입 시 발급받은 site ID를 설정해야 합니다. 설정 방법은 아래 코드와 같습니다. 입력하지 않을 경우 등록된 FailedSetting 콜백 함수가 호출되며, 워터마크가 정상 동작 하지 않습니다.
입력한 siteId 인증 실패 시, 워터마크 메시지가 PallyCon VW Trial로 고정 됩니다.

// PallyCon 서비스 가입 후 콘솔에 표시된 네자리 사이트 ID 값을 입력
object.siteId = "YOUR_SITE_ID";
watermark.setWatermarkData(object);

서비스 도메인 등록

제품 인증을 위해서 추가적으로 해당 제품이 적용될 웹서비스의 도메인을 등록해야 합니다. PallyCon 콘솔 사이트에 로그인해 설정 > 서비스 설정 화면에서 Visible Watermarking 서비스를 선택한 후, 서비스 URL 항목에 다음과 같이 도메인 정보를 입력합니다.

  • 기본 도메인 및 모든 서브 도메인에 적용 시: https://*.test.com 형식으로 입력
  • 특정 서브 도메인에만 적용 시: https://123.test.com 형식으로 입력

HTTPS 적용이 되지 않은 사이트에 대해서는 프로토콜 부분에 http를 입력할 수도 있으며, 도메인 대신 IP 주소를 입력할 수도 있습니다.

서비스 도메인은 PallyCon 서비스 계정의 사이트 ID 당 하나만 등록 가능합니다. 여러 서비스 도메인에 Visible Watermarking을 적용해야 하는 경우에는 새로운 계정을 생성하거나 ‘사이트 추가 요청’ 기능을 통해 추가 사이트를 생성하시기 바랍니다.

워터마크 파라미터 설정

setWatermarkData 함수를 이용하여 다음과 같이 워터마크와 관련된 설정을 할 수 있습니다.

let object = {
  fontsize: "small",
  opacity: 0.8,
  interval: 5,
  peakduration: 2,
  positiontype: {fixed: "rightbottom"},
  msg: ["inka", "inka@inka.co.kr"],
  fadeAnimation: false
};
watermark.setWatermarkData(object);
  • fontsize (default: medium)
    • 폰트 크기
    • 값: xsmall, small, medium, large, xlarge (비디오 가로 크기 비율로 조절)
    • 값: 정수 (폰트의 크기를 강제로 지정)
  • opacity (default: 0.8)
    • 워터마크 최대 밝기값
    • 값: 0 ~ 1.0 사이의 실수
  • interval (default: 60))
    • watermark 표시 간격 (second)
    • 값: 정수
  • peakduration(default: 2)
    • watermark 표시 시간 (second)
    • 값: 정수
  • positiontype (default: random: 85)
    • watermark 표시 위치 유형
    • 값: fixed, margin, random, edge
      • fixed
        • 고정 위치
        • 값: lefttop, righttop, center, leftbottom, rightbottom
      • margin
        • 사용자가 직접 보여주고 싶은 위치를 지정
        • 값: left:정수;right:정수;top:정수;bottom:정수
        • 예: left:10;top:10
        • 10은 퍼센트 수치를 의미 (0~100 정수)
        • left, right 둘다 입력시 left만 적용, top, bottom 입력시 top만 적용
      • random
        • 영상 전체 영역 중, watermark가 표시될 영역의 비율 (percent)
        • 값: 0 ~ 100 사이의 실수
      • edge
        • 영상 전체 영역 중, watermark가 표시되지 않을 영역의 비율 (percent)
        • 값: 0 ~ 100 사이의 실수
  • msg
    • watermark 메시지
    • 문자열 배열 형태로 설정 가능 (길이 제한 없음)
      • 예: [“123456789ABCDEF”, “GHIJKLMNOPQR”]
    • 단일 문자열로 설정 가능. 32자를 초과하는 문자는 줄바꿈됨
      • 예: “123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ”
        “123456789ABCDEFGHIJKLMNOPQRSTUVW
        XYZ”
    • 수동으로 줄바꿈을 하려면 문자열 중간에 ‘<br>’ 문자를 추가하면 줄바꿈됨
      • 예: “123456789<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ”
        “123456789
        ABCDEFGHIJKLMNOPQRSTUVWXYZ”
  • fadeAnimation (default: true)
    • 워터마크 fade 애니메이션을 활성화
    • 값: 불리언

문제 해결

자바스크립트 보안

  • 문제
    VisibleWatermark SDK를 호출하는 함수 및 클래스를 조작하여 워터마크 위변조가 가능합니다.

  • 해결

    1. 즉시실행함수를 이용하여 VisibleWatermark SDK를 호출하는 클래스 등을 모듈화합니다.
    2. uglyfy-js, JavaScript Obfuscator Tool 등을 이용하여 VisibleWatermark SDK를 호출하는 클래스 등을 보호할 수 있습니다.

iOS 플레이어 설정

  • 문제
    iPhone에서는 HTML5 player 대신 Native Player가 작동되며 VisibleWatermark SDK가 동작하지 않습니다.

  • 해결

    1. video tag안에 playsinline 옵션을 추가합니다.
    <video id="my-player" class="video-js" playsinline controls preload="auto" width="1200" height="650" />
    
    1. 전체화면 버튼을 삭제합니다.
    player.ready( function() {
      var fullScreenControl = document.getElementsByClassName("vjs-fullscreen-control")[0];
      if ( iOS 일 경우 ) {
        fullScreenControl.parentNode.removeChild(fullScreenControl);
      }
    }
    

Picture in Picture(PIP)

  • 문제
    PIP 모드에서는 VisibleWatermark를 지원하지 않습니다. 따라서 사용자가 PIP 모드를 선택할 경우 재생이 취소되도록 설정해야 합니다.

  • 해결
    사용자가 PIP 모드를 선택하지 못하도록 <video> 에 ‘disablePictureInPicture’ 를 설정합니다.

이전
다음