NX-Jikkyoビデオ表示(フルHD)

by gunnyori 09/13 [2024/09/13 23:49:27]

実況避難所NX-Jikkyoにキャプチャデバイスのビデオストリームを重ねて表示します（画質優先で1920x1080で取り込みます）

@@ -51,7 +51,7 @@
     // 要素をDOMに追加
     element.appendChild(video);
 
-    // ウェブカメラのストリームを開始（解像度指定）パフォーマンス改善のため1280x720に
+    // ウェブカメラのストリームを開始（解像度指定）画質優先でフルHDで取り込む
     var constraints = {
       video: {
         width: { ideal: 1920 },  // 取り込むビデオの幅

/*
 * @title NX-Jikkoビデオ表示(フルHD)
 * @description 実況避難所NX-Jikkoにキャプチャデバイスのビデオストリームを重ねて表示します（画質優先で1920x1080で取り込みます）
 * @include https://nx-jikkyo.tsukumijima.net/watch/*
 * @license MIT License
 */


javascript:(function() {
  // 非表示にしたいクラスのリスト
  var classListToHide = [
    "watch-player__background-text",
    "watch-player__background-logo"
  ];

  // クラスごとにループして要素を非表示にする
  classListToHide.forEach(function(className) {
    var elements = document.getElementsByClassName(className);
    for (var i = 0; i < elements.length; i++) {
      elements[i].style.display = "none";
    }
  });

  var className = "watch-player__background--display";
  var elements = document.getElementsByClassName(className);

  if (elements.length > 0) {
    var element = elements[0];
    element.style.position = "relative";
    element.style.overflow = "hidden";  // オーバーフローを隠す

    // 新しいビデオ要素を作成
    var video = document.createElement("video");
    video.autoplay = true;
    video.muted = true;  // 音声をミュート（別にオーディオミキサー経由で取り込んだ方がよい）
    video.style.position = "absolute";
    video.style.top = "50%";
    video.style.left = "50%";
    video.style.transform = "translate(-50%, -50%)";
    video.style.width = "100%";
    video.style.height = "100%";
    video.style.objectFit = "cover";  // アスペクト比を維持しつつ親に収める
    video.style.zIndex = "-1";  // divの後ろに配置

    // 明るさを調整するCSSフィルターを追加
    video.style.filter = "brightness(0.85)";  // コメントが見やすいように若干明るさを落とす調整（1が標準）

    // div要素の背景を透明に
    element.style.background = "transparent";

    // 要素をDOMに追加
    element.appendChild(video);

    // ウェブカメラのストリームを開始（解像度指定）画質優先でフルHDで取り込む
    var constraints = {
      video: {
        width: { ideal: 1920 },  // 取り込むビデオの幅
        height: { ideal: 1080 },  // 取り込むビデオの高さ
        aspectRatio: 16/9        // アスペクト比
      },
//      audio: true  // オーディオ取得（ブラウザ経由ではなくオーディオミキサー経由で取り込んだ方がよい）
    };

    navigator.mediaDevices.getUserMedia(constraints)
      .then(function(stream) {
        video.srcObject = stream;
      })
      .catch(function(error) {
        console.error("Error accessing webcam: ", error);
      });
  } else {
    alert("Element with class name '" + className + "' not found.");
  }
})();

Permalink RAW Packed Userscript LOADER Metadata ?

Permalink

このページへの個別リンクです。

RAW

書かれたコードへの直接のリンクです。

Packed

文字列が圧縮された書かれたコードへのリンクです。

Userscript

Greasemonkey 等で利用する場合の .user.js へのリンクです。

Loader

@require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

Metadata

コード中にコメントで @xxx と書かれたメタデータの JSON です。

NX-Jikkyoビデオ表示(フルHD)

History