📹Googleシートでセル内のビデオを再生

この記事は私の楽しみのためだけです.今日、私はGoogleシートAPIで遊んでいて、私がピクセルのような細胞を使っているシートでビデオを再生することができたという考えを得ました.
TLこれは最終結果です!😉 (以下のビデオフレームのリフレッシュは実際よりもX 10です.ビデオエディタで編集しました.)


動作方法
Googleシートに160×90個のセルを用意し、GoogleシートAPIを使用してセルの色を変更しました.APIは1つのAPIの呼び出しによってセルの色を変更するAPIがあります.私は各ビデオフレームのAPIを呼び出し、ビデオを再生しました.

ステップ1:ビデオからフレームを抽出する
最初に、私はffmpegを使用して、有名なビデオ“ビッグバニー”JPG画像に変換します.私は1秒あたり1画像を使用して300イメージを生成しました.私の実験によると、GoogleシートAPIは、私はビデオフレームよりもはるかに少ない画像を選択したので、APIの呼び出しでセルの色をリフレッシュするために~ 3秒を必要とする.そして、私は私のシートのセルの数に合わせて1280 x 720から160 x 90にイメージフレームをリサイズしました.私は、サイズ変更のためにJMPを使いました.
私の汚いコードlolでごめんなさい

const ffmpeg = require("ffmpeg")
const path = require("path")

const FRAMES = 300
const Jimp = require("jimp")

// Extract images and store them in ./images folder
try {
  const p = new ffmpeg(path.join(__dirname, "./video.mp4"))
  p.then(function (video) {
    video.fnExtractFrameToJPG(path.join(__dirname, "./images"), {
      frame_rate: 1,
      number: FRAMES,
      file_name: "%s"
    }, function (error, files) {
      if (!error)
        console.log("Frames: " + files);
    });
  }, function (err) {
    console.log("Error: " + err);
  });
} catch (e) {
  console.log(e.code);
  console.log(e.msg);
}

// Resizing
;(async () => {
  for (let i = 1; i < FRAMES + 1; i++) {
    const image = await Jimp.read(path.join(__dirname, "./images", "1280x720_" + i + ".jpg"))
    image.resize(160, 90).write(path.join(__dirname, "./images", "160x90_" + i + ".jpg"))
  }
})()

ステップ2:セルにピクセル色を適用する
GoogleシートAPIのbatchUpdate()機能は私が使用したものです.API Specは、我々がそれで何をすることができるかについて見るのに十分明確でありません.それで、私はGoogleAPI NPMモジュールのタイプファイルをチェックして、機能がどのように機能するかについて見積もっていることを勧めます.(これは私がタイプスクリプトを使った理由です.batchUpdate()に渡された値では、updateCellsキー、右を参照してください?これはセル形式を更新するプロパティです.要点は

はピクセル・カラーを読みとって、各々の画素

のためのセル・アップデート要求をつくる

は、startColumnIndex(n番目のセル

を更新するendcolumnindex)のためのNおよびN + 1値を使用する

は、フィールドがタイプスクリプト

のタイプとして任意であるとしてもfields: "userEnteredFormat"を指定するのを忘れないでください.

RGB色は、0から1

の範囲で与えられなければなりません
あなたがGoogleシートを使用するためのセットアップに慣れていない場合は、私は読むことをお勧めします.

import { google } from "googleapis"
import path from "path"
import Jimp from "jimp"

const SHEET_ID = "your sheet id"
const SERVICE_ACCOUNT_EMAIL = "your service account email"
const SERVICE_ACCOUNT_PRIVATE_KEY = "your private key"

const FRAMES = 300
// Video resolution
const WITDH = 160
const HEIGHT = 90

;(async () => {
  const auth = new google.auth.JWT({
    email: SERVICE_ACCOUNT_EMAIL,
    key: SERVICE_ACCOUNT_PRIVATE_KEY,
    scopes: ["https://www.googleapis.com/auth/spreadsheets"]
  })
  const sheet = google.sheets("v4")
  for (let i = 1; i <= FRAMES; i++) {
    const image = await Jimp.read(path.join(__dirname, "./images/", `${WITDH}x${HEIGHT}_${i}.jpg`))
    const requests: any[] = []
    for (let j = 0; j < WITDH; j++) {
      for (let k = 0; k < HEIGHT; k++) {
        const c = image.getPixelColor(j, k)
        const { r, g, b } = Jimp.intToRGBA(c)
        const req = {
          updateCells: {
            range: {
              sheetId: 0,
              startColumnIndex: j,
              endColumnIndex: j + 1,
              startRowIndex: k,
              endRowIndex: k + 1,
            },
            fields: "userEnteredFormat",
            rows: [{
              values: [{
                userEnteredFormat: {
                  backgroundColor: {
                    red: r / 255,
                    green: g / 255,
                    blue: b / 255,
                    alpha: 1,
                  }
                }
              }],
            }],
          }
        }
        requests.push(req)
      }
    }
    await sheet.spreadsheets.batchUpdate({
      auth,
      spreadsheetId: SHEET_ID,
      requestBody: {
        requests,
      }
    })
  }
})()