目次
はじめに
すこし高価だったのですが、あることをやるために5インチの円形HDMIディスプレイを買いました。
あることとは、、Atomph Windowが欲しくて…でも高くて…。
youtubeのライブ動画をディスプレイで流せば、同じようなことができるかと思いチャレンジしました。
リンク
実現の方針
調べたらいろいろなやり方がありました。わたしは以下で実現しました。
- Youtubeのライブ動画を、Raspberry Pi OS上でChromiumブラウザを全画面起動させ、埋め込みHTML（YouTube IFrame API）をロードするだけのシンプル手法
- CSSで丸い画面に合わせて映像を円形にトリミング。丸窓から見ているように表現する
- 複数の動画を一定間隔で順番に切り替えられるようにする。
手順
STEP
ラズベリーパイとディスプレイを接続
HDMIで接続するタイプのディスプレイなら付属の端子を使って接続するだけです。
接続したあとラズベリーパイの電源を入れると、すでに画面が写っているはずです。
このままでは作業しにくいため、VNCかSSHで作業しましょう。
メカエレ Blog | 電子工作とライフ…
初心者でも簡単！Raspberry PiをPCで操作する方法 – RealVNC Viewer編
はじめに Raspberry Piを使う際、ディスプレイやキーボードを毎回接続するのは手間がかかります。そんなときに便利なのがリモートデスクトップ接続です！この記事では、Ras…
STEP
ディレクトリとHTMLを準備
コードはすべて、ラズベリーパイのターミナルに貼り付けでOKです
mkdir -p ~/round_live
nano ~/round_live/index.html以下のHTMLをはりつけ
・var IDS = [“***”,”***”] ここにはyoutubeのIDを入れてください。
以下のアドレスの場合、”=”以降の”tujkoXI8rWM”がIDです。
https://www.youtube.com/watch?v=tujkoXI8rWM
・画面のサイズは、widthとheightの数値で変えることができます。
cat > /home/koichi/round_live/index.html <<'EOF'
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html,body{margin:0;padding:0;height:100%;width:100%;background:#000;overflow:hidden;cursor:none}
.circle{position:fixed;top:50%;left:50%;width:133vmin;height:133vmin;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;background:#000}
.btn{padding:10px 16px;border:1px solid #fff;border-radius:999px}
</style>
</head>
<body>
<div class="circle"><div id="player"></div></div>
<div id="unmute"><div class="btn">▶ Click / Tap to Unmute</div></div>
<script>
var IDS=["DBWgFXSMr-8","tujkoXI8rWM","gFRtAAmiFbE","GrEEoEmmrKs","rnXIjl_Rzy4","jtvmwjzZY0c","XsOU8JnEpNM","DP9hbJmwbNU"];
var INTERVAL_SEC=180;
var idx=0,p=null,stall=0,timer=null,wd=null;
var AC=window.AudioContext||window.webkitAudioContext; var ac=new AC();
function hideU(){var x=document.getElementById('unmute'); if(x) x.classList.add('hidden');}
function next(){ idx=(idx+1)%IDS.length; try{ p.loadVideoById(IDS[idx]); }catch(e){} stall=0; }
function startTimers(){
if(timer) clearInterval(timer);
timer=setInterval(next, INTERVAL_SEC*1000);
if(wd) clearInterval(wd);
wd=setInterval(function(){ if(!p||!p.getPlayerState) return; var s=p.getPlayerState();
if(s===1||s===3){ stall=0; } else { stall++; if(stall>=3){ next(); stall=0; } } },15000);
}
function onReady(e){ try{ e.target.mute(); e.target.playVideo(); }catch(_){ } startTimers(); }
function onState(e){ if(e.data===0){ next(); } }
function onErr(){ next(); }
function go(){
p=new YT.Player("player",{videoId:IDS[idx],
playerVars:{autoplay:1,mute:1,controls:1,playsinline:1,modestbranding:1,rel:0},
events:{onReady:onReady,onStateChange:onState,onError:onErr}});
document.getElementById('unmute').onclick=function(){
ac.resume().then(function(){ try{ p.unMute(); p.setVolume(85); p.playVideo(); }catch(_){ } hideU(); });
};
}
var s=document.createElement("script"); s.src="https://www.youtube.com/iframe_api"; document.head.appendChild(s);
window.onYouTubeIframeAPIReady=go;
</script>
</body>
</html>
EOFSTEP
Chromium自動起動スクリプト
nano ~/round_live/start.sh以下のURLの＊＊部には、ユーザー名を入れてください
#!/usr/bin/env bash
URL="file:///home/***/round_live/index.html"
exec "$(command -v chromium)" \
--no-first-run --no-default-browser-check \
--disable-infobars --password-store=basic \
--autoplay-policy=no-user-gesture-required \
--start-fullscreen "$URL"chmod +x ~/round_live/start.shSTEP
起動
あえてreloadを含むコマンドにしています。念の為です。
systemctl --user daemon-reload
systemctl --user restart round_live.service
systemctl --user status round_live.serviceまとめ
かなり試行錯誤で実現しましたので、異なる環境ではエラーなど出るかもしれません。
ただ、うまくうごいたときの感動は何ものにも代えがたいものでした。
是非チャレンジしてみてください。わたしは壁掛けできるディスプレイケースを作ろうと思っています。
リンク
コメント