Bad Apple!! on obniz Board 1Y

2021/3/12公開
2021/4/29更新

概要

いわゆるHelloWorldの代わりとして、あらゆるデバイスで再生されているBad Apple!!をobniz上で再生してみました。
本来そういう使い方をするデバイスではないんですけどせっかく画面が付いているのでやらずにはいられませんでした。
最初はうまく表示できずに画面が真っ黒なままだったり、なんとか表示できたらできたで30fpsで処理しようとすると
実再生時間より間延びしてしまったので15fpsで再生しています。

2021/4/29追記
Youtubeの動画は15fpsのままですがコードサンプルの方はほぼ30fps出るように修正しました。

コードサンプル

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bad Apple!! on obniz</title>
<script src="https://unpkg.com/obniz@3.x.0/obniz.js"></script>

<script type="text/javascript">
var obniz = new Obniz("OBNIZ_ID_HERE");

obniz.onconnect = async function () {
    console.log("connected");
}

async function playVideo(){
  var video = document.getElementById("v");
  if(video.paused) {
      video.play();
  } else {
      video.pause();
  }
  
  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");

  obniz.display.setColorDepth(1);

  try {
    while(obniz.connectionState === 'connected') {
      ctx.drawImage(video, 0, 60, 480, 240, 0, 0, 128, 64);
      obniz.display.draw(ctx);
      await obniz.pingWait(); // 通信を確認
    }
  } catch(e) {
    // break or throw a error
  }
}
</script>

<style type="text/css">
<!--
#v{
    display:none;
}
#screen{
    width:128px;
    height:64px;
    background-color:#000000;
}
button{
    width:100px;
    height:50px;
}
-->
</style>
</head>

<body>
<video controls id="v" width="480" height="360">
  <source type="video/mp4" width="480" height="360" src="data:video/mp4;base64,【ここにBASE64エンコードした動画データ(省略)】">
</video>

<div id="screen">
  <canvas id="c" width="128" height="64"></canvas>
</div>

<button onClick="playVideo();">play/stop</button>
</body>
</html>

戻る