動画の署名付URL | 全国個人事業主支援協会

COLUMN コラム

動画の署名付URL

2024年02月01日
動画の署名付URL
- プログラマー
- システムエンジニア

web画面で動画を視聴できるようにすると、動画URLを知っているユーザなら誰でも見えてしまうので
署名付で動画再生できるようにする。

やり方は２通り
・署名付URL
・署名付cookie

今回は、署名付動画URLの再生方法について説明します。

＜前提＞
hls動画ファイルは、複数ファイル（m3u8・ts）で構成されている。

（例）
sample.m3u8
sample_00001.ts
sample_00002.ts

＜考慮事項＞
sample.m3u8の動画を再生したい場合、sample.m3u8だけでなく、tsファイルにも署名付URLを発行する必要がある。

＜対応方法＞
署名付URLをワイルドカードで発行する
ワイルドカードを使用したい場合は、カスタムポリシーを設定して、署名付URLを発行する必要がある

exports.getMediaSignedUrl = (file, validDate) => {
  const wildCardKey = file.replace('.m3u8', '*');
  const url = `https://hogegoge.jp/${wildCardKey}`;
  // カスタムポリシーを設定
  const policy = {
    Statement: [{
      Resource: url,
      Condition: {
        DateLessThan: {
          'AWS:EpochTime': Math.floor(new Date(validDate).getTime() / 1000),
        },
      }
    }]
  };
  const signedUrl = getSignedUrl({
    url,
    keyPairId: '公開鍵キー名',
    dateLessThan: validDate.toISOString(),
    policy: JSON.stringify(policy).toString('base64'),
    privateKey: '秘密鍵の内容',
  });

  return signedUrl.replace(url, `https://hogegoge.jp/${file}`);
};

＜動画再生方法＞

動画再生時に一工夫して、tsファイル読み込み時に、署名を付与するようにする

function play() {
  // https://hogegoge.jp/sample.m3u8?Policy=eyJTdGF0ZW1....&Key-Pair-Id=KAJ3....&Signature=....
  var signedUrl = document.getElementById('signedUrl').value;
  
  var query = signedUrl.split('?').length >= 2 ? signedUrl.split('?')[1] : '';
    
  if(Hls.isSupported()) {

    var video = document.getElementById('videoSample');
    var config = {
      debug: true,
      xhrSetup: function (xhr,url) {
        if (url.indexOf('.ts') > 0) {
           // tsファイル読み込み時、署名用のパラメータを付与
          url = url + '?' + query;
          xhr.open('GET', url, true); 
        }
      }
    };

    var hls = new Hls(config);
    hls.attachMedia(video);
    hls.loadSource(signedUrl);
    video.play();
  }
}