「canvas」の記事 - Crieit

草野球のライブ配信を補助するツールを作った話

2020-09-20T00:57:20+09:00

草野球放送局

https://baseball-broadcast.vercel.app/

仕組み

「ツイキャスゲームズ」などのスクリーン配信に対応したサービスで、
スマホの画面を直接ストリーミング配信できることを利用して、
スマホ側でカメラを起動して画面を合成したらいいじゃないかという発想に。
react-webcamというライブラリ(canvasで描画している)とNextJSを組み合わせました。

使い方

使った技術

NextJS

最低でもQA画面と設定画面、合成画面が必要になると思っていたので、
NextJSを選択しました。

苦労したこと

カメラのデバッグ

セキュリティ的にカメラの起動条件がlocalhostか、https通信下だったので、最初はvercelに上げながら動作確認していましたが、途中からcodesandboxを使っていました。

iPhone/Chromeではカメラが起動しないとか。

スマホの向きを変えたときの描画

縦横の向きを変えたときにリサイズする処理を色々試したのですが、

addEventListener('resize')
再描画回避のためにuseRefを使う
縦横のサイズを入れ替える

どれも結局上手くいかず、stackoverflowなどを見ながら最終的にたどり着いたのはCSSでの表示制御でした。えぇぇぇぇぇ.....。

UI詰め過ぎ問題

スコアボードのUIを詰め過ぎてタップしづらいという問題が発生。
transform: scale(1.3)でコンポーネントごと1.3倍にして逃げました。
秘伝のたれを思いついた瞬間

import Webcam from "react-webcam";
import NHKBoard from "./NHKBoard";

const Home = () => {
  const videoConstraints = {
    facingMode: { exact: "environment" },
    aspectRatio: 1.78
  };
  return (
    {{
        width:'95vw',
        height:'95vh',
        position:'relative'
      }}
    >
      {{
          position:'absolute',
          top:0,
          left:0,
          width:'95vw',
          height:'95vh',
        }}
        videoConstraints={videoConstraints}
      />
      {{
          transform:'scale(1.3)',
          position:'absolute',
          bottom:0,
          right:0
        }}
      >
      
      
    
      )
}
export default Home;

IKEN

スコアボードの種類を選べるようにするとか、選手紹介を表示するとか機能拡張は考えていますが、一旦最小構成でリリースしますのでフィードバックいただけるとうれしいです！

https://ikens.net/ckoshien_tech/baseball-broadcast

WebAudioAPIとcanvasで音声波形動画を出力するサイトを作ってみた

2020-08-16T06:52:03+09:00

YouTubeなどで見かけるよくあるミュージックビデオに音声波形が動いて表示されたりするのがあります。
そういう動画は調べてみると、大抵はWindowsのAviUtlという無料の動画編集ソフトの拡張機能で作られてるようです。
最近では、daniwell氏によりMusic Visualization GeneratorがWindows/Macのフリーソフトがリリースされ、簡単に音声波形動画が作れるようになりました。
そういった中で、Web上でも作って共有できたら便利だなと思い、調べてみたところ、どうやらHTML5のWebAPIとJavascriptでできるようなのでやってみました。

作ったもの

Music Waves Visualizer

コード

komura-c/music-waves-visualizer

実装した機能

WebAPIとCanvas、Next.jsを駆使して以下を実装しました。
・画像と音声の読み込み、表示
・音声波形表示
・動画として出力

画像と音声の読み込み

FileReader.onload - Web API | MDN
を参考にして、画像を読み込むと同時にcanvasに描画しています。
音声も同様ですが、読み込み時にbase64としてデコードすることでWebAudioAPIに渡した上で、FileReaderに読み込ませています。

// audioLoad
const LoadSample = (audioCtx, audioDataUrl) => {
  fetch(audioDataUrl)
    .then((response) => {
      return response.arrayBuffer();
    })
    .then((arrayBuffer) => {
      audioCtx.decodeAudioData(arrayBuffer).then((decodedData) => {
        buffer = decodedData;
      });
    })
};

音声波形表示

canvas に絵を描く - Web API | MDNを参考にしました。
モード別に描画方法を変えることで周波数バー・折れ線・円形を実現しています。

動画として出力

以下の記事を参考に実装しました。
MediaRecorder APIをつかってCanvas/WebAudioなゲーム画面を録画する
 JavaScriptでcanvasを録画して動画ファイルに保存する方法

また、上記の対応だとwebpでしか動画の出力ができませんでした。
そのため、ffmpeg.wasmを使いmp4で書き出せるように対応しました。
https://github.com/ffmpegwasm/ffmpeg.wasm

import { createFFmpeg } from "@ffmpeg/ffmpeg";

export async function generateMp4Video(
  binaryData: Uint8Array,
  webmName: string,
  mp4Name: string
) {
  const ffmpeg = createFFmpeg({ log: true });
  await ffmpeg.load();
  ffmpeg.FS("writeFile", webmName, binaryData);
  await ffmpeg.run("-i", webmName, "-vcodec", "copy", mp4Name);
  return ffmpeg.FS("readFile", mp4Name);
}

今後の課題

canvasの性質上、モバイルへの対応が難しいので知見を深める

参考記事

WebAudioAPIについて

使い方は以下を参考にしました。
Web Audio API | Codelab
Web Audio API - Web API | MDN
Web Audio API の基礎

WebAudioAPIで詰まったところは、以下のように仕様書を日本語訳してくれている方がいらっしゃるので辞書代わりに参考にしました。
Web Audio API ( 日本語訳 )

Canvasのライブラリ「Konva.js」でOGP生成(Nuxtアプリ)

2020-05-06T15:52:28+09:00

Nuxt.jsとFirebaseで作っていたWebサービスを7月末にリリースして、はや10ヶ月。。
登録総額1億円を突破したので、記念企画として積読レビュー機能をリリースしました!!

そこでKonva.jsというライブラリを使ってOGP画像を生成したので、
その時に調べたことをまとめてみました。

積読・読書前でも書ける『積読レビュー』

読書のレビューというと、読書後の感想を書くものですが、
積ん読が多いとなかなか書く機会がないです。。

「感想は読書後だけではないのでは？」
ということで、読書前でも書けるレビューを2つ用意してみました。

妄想で書く『妄想レビュー』

まだ読んでないけど、本の表紙や帯の印象から妄想で書いてみる『妄想レビュー』

「中身じゃなく外観だけで、読書後のレビューを書いてみるとどうだろう。。？」
というネタ的なレビューです。

いかに読んでる醸し出せるかをチャレンジしてみるとおもしろいかも(´ω｀)

他の使い方としては、読む前に書いておいて、読んだ後との感想を比較してみるのもたのしいかも？
読書前後で感想が同じになっても違っていても、新たな発見があるかもです。

きっかけを書く『きっかけレビュー』

買ったときのきっかけや意気込み・ワクワク感を書いてみる『きっかけレビュー』

「『なぜ買うのか、どうして買いたいのか』という気持ちを残しておくのもどうだろう。。？」
と思いつきつくってみました。

買ったときの気持ちも大事で、
* 技術書やビジネス書なら「こうなりたい！ここを強くしたい！」
* 小説やマンガなら「ひさびさの新刊！たのしみ！」
という思いがあるはず・・

それを記録として残しておくと、いつか見返したときにたのしいかもしれません。

なぜKonva.js？

この企画では、本を選んで、レビューを書いていくのですが、
本の表紙など画像を埋め込む必要があります。

以前、別のサービスで、SVGでOGP用の画像を生成してみたのですが、端末によってはうまくいかなかったりと、画像を埋め込むのがかなり大変でした。。

なので、SVGではなく、Canvasで試してみようと調べたところ、
Konva.jsとFabric.jsが見つけ、
文字の折返しなどのガイドがあったKonva.jsを選んでみました。

$ npm install vue-konva konva --save

今回は、Nuxt/Vueで使うので、KonvaのVueライブラリ(vue-konva)もインストール

プラグインの作成

vue-konvaを使えるようプラグインを作成。

// ~/plugins/vue-konva.ts
import Vue from "vue";
import VueKonva from "vue-konva";

Vue.use(VueKonva);

そして、作ったプラグインをnuxt.config.tsに追加。

// nuxt.config.js
import { Configuration } from "@nuxt/types";

const config: Configuration = {
  mode: "spa",
  // 略

  plugins: [
    { src: "~/plugins/vue-konva", ssr: false },
    // 略
  ],

  // 略
};

これで準備はOK

位置やサイズ、表示する画像は:configを介して、Kanva.js自体の設定値を付与していく。

どんな設定値があるかは、ApiDocを見ていく感じで、
Imageだとここ(Class: Image)をみる

チュートリアルもあるので、それを見つつ、
具体的な設定値はApiDoc参照という流れで進めた。

画像の表示には読み込みが必要

画像の表示は少しめんどくさくて、

HTMLImageElementをつくって
HTMLImageElementで画像をロードして
ロード後のHTMLImageElementをconfigに設定

という流れ。。

それをしているのがこのあたり。
画像読み込みは何度も使うけど、Promiseじゃないので、
ロードが終わったらHTMLImageElementを返す処理を共通化

async mounted() {
  // マウントされたら、背景画像を読み込んで設定する
  this.setupBg().then();
}

// 背景画像の設定
private async setupBg() {
  const image = await this.getImage("/img/review_paple.png");
  this.configBg.image = image;
}

// 共通処理: 画像の読み込み
private async getImage(src: string): Promise {
  return new Promise((resolve, reject) => {
    const image = new window.Image();
    image.onload = () => resolve(image);
    image.src = src;
  });
}

これでできるのがこんな感じ。

でかい。。
CanvasのサイズをOGP画像のサイズ(1200x630)にしているもんね。。

画像を画面サイズにあわせる

ほんとはこんな感じにしたい。。

ので、Windowサイズの変更を検知して、CSSのscaleで調整してみる。

こんな感じ。

これでOK。Konva.jsの話に戻る

画像を加工する(サイズ変更)

次は書影を読み込んで、配置する部分。
書影は本ごとにサイズが違うので、加工が必要。。

こんな感じ。切り取りは、v-imageのcropを指定すればOK。

ここで若干ハマった。。

【ハマり1】cropとscaleを同時に指定するとうまくいかない。。

サイズを調整しようと、いろいろしていたときに、
スケールを変化させるscaleと切り取り処理のcropを同時に指定してみたけど、
あまりうまくいかず、cropのみで対応した。。

【ハマり2】computedだとうまくいかない。。

最初は、以下のような感じで、computedにしてたけど、
cropなど、配下のobjectが変わっても変更が反映されなかったので、
dataのconfigBookImgを用意する形にしてみた。

get configBookImg() {
  // 画像の読み込み
  const imageBook = await this.getImage("/img/notfound_paple.png");

  // v-imageのconfig
  const scale = BOOK_IMAGE_WIDTH / imageBook.width;
  return {
    image: imageBook,
    x: 48,  // 左上からの位置(x)
    y: 112, // 左上からの位置(y)
    width: BOOK_IMAGE_WIDTH,   // 画像のサイズ(横)
    height: BOOK_IMAGE_HEIGHT, // 画像のサイズ(縦)
    crop: {  // 切り取り処理
      x: 0,  // 切り取り位置(x)
      y: 0,　// 切り取り位置(y)
      width: imageBook.width,           // 切り取りサイズ(横)
      height: BOOK_IMAGE_HEIGHT / scale // 切り取りサイズ(縦)
    }
  };
}

画像を加工する(丸く切り取る)

次はこれ。ユーザのアイコン画像。

もともとは、こんな四角い画像だけど、アイコンっぽく丸く切り取りたい。

チュートリアルを見てみると、v-groupを使うとできるっぽい。

v-groupのclipFuncを使うと、Canvaを操作できるようで、
CanvasRenderingContext2Dのarcを使って、丸く切り取り。

注意点は、原点がCanvas(v-stage)の左上であること。
画像の左上が原点だと思っていたので、全然切り取られなかった。。

1行の文字を表示する(省略あり)

画像はここまで。次は文字。本のタイトルを表示したい。

文字を表示するには、v-textを使えばOK

CSSのtext-overflowと同じ感じで、折返しをnoneにすれば、省略記号の表示もできる。

複数行の文字を表示する(省略不可)

次はレビューの文字を表示。

同じくv-textを使う感じ。
wrapを指定しなければ、そのまま複数行に。

改行文字を入れれば改行もしてくれて、widthを指定すれば折返しも自動。

ただ、残念ながら、-webkit-line-clampみたいに複数行の省略はないみたい。。

Canvasを画像にエクスポート

最後に作った画像をエクスポート!!

こんな感じ。Konvaでエクスポートするときには、v-stageから取得する。
DataURL以外にJSONとかでもエクスポートできるので、保存したりもOK

HTML5 Canvas Stage Data URL Tutorial | Konva - JavaScript 2d canvas library

開発しているサービスでは、FirebaseのCloud Storageに保存しているので、DataURL形式でOK。

ハマリポイントは、外部URLの画像を使っているとき。。エクスポートに失敗する。。
Cavans自体の仕様で外部URLの画像がある場合、汚染されたとみなされエラーになるとのこと。。

対処法は以下に書かれている感じで、CORS対応をすればOK
・Resolving "Tainted canvases may not be exported" with Konva | Konva - JavaScript 2d canvas library

おわり

SVGでも外部URLは問題があったけど、Konva.jsでも。。
でも、サクサクできたのと、ドラッグで位置を変えれるみたいなので、いろいろできそう(´ω｀)

積ん読レビューはできたての機能なので、ぜひぜひさわってみてくださいヽ(=´▽`=)ﾉ
■どっちでレビューする？妄想レビュ・きっかけレビュー