by gunnyori
09/13 [2024/09/13 23:49:56]
実況避難所NX-Jikkyoにキャプチャデバイスのビデオストリームを重ねて表示します（パフォーマンス優先で1280x720で取り込みます）
/*
* @title NX-Jikkyoビデオ表示Lite
* @description 実況避難所NX-Jikkyoにキャプチャデバイスのビデオストリームを重ねて表示します（パフォーマンス優先で1280x720で取り込みます）
* @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);
// ウェブカメラのストリームを開始（解像度指定）パフォーマンス改善のため1280x720に
var constraints = {
video: {
width: { ideal: 1280 }, // 取り込むビデオの幅
height: { ideal: 720 }, // 取り込むビデオの高さ
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.");
}
})();