Save Google Earth Presentation As a Movie File
Save Google Earth Presentation As a Movie File
This script can save a canvas, video or audio element.
60fps の動画に対して video.captureStream().getVideoTracks()[0].getSettings().frameRate でフレームレート調べたら 30 になっていた。
どうやったら 60fps にできるんだろう。applyConstraints は効かなかった。
canvas の captureStream はフレームレートを指定できる。 video を canvas に映して canvas を保存する？音はどうする？
音についてはこれが答えになるか？
/***************************************************************/ // Definition of GER function /** * @class Google Earth Recorder * @param {HTMLCanvasElement|HTMLVideoElement|HTMLAudioElement} [element] an element what you want to record */ function GER(element) { this.targetElement = element; this.stream = this.targetElement.captureStream(); this.chunk = []; this.recorder; this.link; this.recorder = new MediaRecorder(this.stream); this.recorder.ondataavailable = (e) => { this.chunk.push(e.data); }; this.recorder.onstart = () => { if (this.link && this.link.href) { URL.revokeObjectURL(this.link.href); this.link = undefined; } this.chunk = []; }; this.recorder.onstop = () => { this.link = document.createElement("a"); this.link.download = "hoge.webm"; this.link.href = URL.createObjectURL(new Blob(this.chunk)); this.download(); }; this.start = () => { this.recorder.start(); }; this.stop = () => { this.recorder.stop(); }; this.download = () => { setTimeout(() => { this.link.click(); }, 10); }; } /***************************************************************/ /***************************************************************/ // Usage // 0. Prepare script // Open a browser (recommend Chrome) and go to a target page. // Open Devtool by pressing F12 key or any way. // Input the definition of GER function in the console of Devtool. // 1. You need to get the element waht you want to record. /** Example1. Google Earth canvas element */ var canvas = document .querySelector("body > earth-app") .shadowRoot.querySelector("#earthView") .shadowRoot.querySelector("#canvas"); /** Example2. Youtube video Element */ var video = document.querySelector( "#movie_player > div.html5-video-container > video" ); // 2. Create an instance of GER var ger = new GER(canvas); // Example 1 // or // var ger = new GER(video); // Example 2 // 3. start recording ger.start(); // 4. stop recording ger.stop(); /***************************************************************/
metaflac を使って flac ファイルのアートワーク（ジャケット画像？）を追加・削除する
metaflac を使って flac ファイルのアートワーク（ジャケット画像？）を追加・削除する。
例： sample.flac ファイルからアートワークを削除する。
$ metaflac --remove --block-type=PICTURE,PADDING "./sample.flac"
例： sample.flac ファイルにアートワーク demo.jpg を追加する。
$ metaflac --import-picture-from="./demo.jpg" "./sample.flac"
基本的なことだが、
metaflac コマンドを使うには metaflac.exe のパスを通すか、
metaflac.exe が保存されているフォルダで実行する。
bulma を一部にのみ適用する
bulma を一部にのみ適用する。
言い換えると、bulma を特定の要素以下に限定して適用する。
apply-bulma クラスの下のみが bulma の影響を受ける。
bulma/sass/base/generic.sass や bulma/sass/base/minireset.sass には html や body へのスタイルが定義されているが、親コンポーネントやその他がそれを避けたいような需要に応えられる。
/* App.scss */ .apply-bulma { @import "bulma"; }
// App.tsx import App.scss; const App: React.FC = () => { return ( <div> <div class="apply-bulma"> <button class="button">button 1 (applied bulma)</button> </div> <div> <button class="button">button 2 (not applied bulma)</button> </div> </div> ); }
bulma でカスタムカラーを追加する
scss を css にコンパイルできる前提。idolColors.scss を idolColors.css にコンパイルして index.html で読み込む。
/* idolColors.scss */ /* findColorInvert, findLightColor, findDarkColor 関数を使えるように先にインポートしておく。 */ @import "bulma/sass/utilities/functions.sass"; $haruka: #e22b30; $chihaya: #2743d2; $miki: #b4e04b; $custom-colors: ( "haruka": ( /* クラス名 is-haruka で使えるようになる。以下同様。 */ $haruka, findColorInvert($haruka), findLightColor($haruka), findDarkColor($haruka) ), "chihaya": ( $chihaya, findColorInvert($chihaya), findLightColor($chihaya), findDarkColor($chihaya) ), "miki": ( $miki, findColorInvert($miki), findLightColor($miki), findDarkColor($miki) ) ); @import "bulma";
<!-- index.html --> <link rel="stylesheet" href="idolColors.css"> <button class="button is-haruka">is-haruka</button> <button class="button is-chihaya">is-chihaya</button> <button class="button is-miki">is-miki</button>
React でスコープをコンポーネントに限定して css を適用する
CSS Modules
React でスコープをコンポーネントに限定して css を適用する方法はないの？と思ってたら普通にあった。create-react-app で開始したプロジェクトを想定。
├ Button.tsx └ Button.module.css
Button.module.css
.redButton { background-color: red; }
Button.tsx
import React from 'react'; import styles from './Button.module.css'; const Button: React.FC = () => { return ( <button className={styles.redButton}></button> ); } export default Button;
create-react-app は CSS Modules を利用するためのお膳立てをしてくれていた。おわり。
その他メモ
一部だけ import
- import styles from './Button.module.css'; + import { redButton } from './Button.module.css'; - <button className={styles.redButton}></button> + <button className={redButton}></button>
css セレクタにケバブケース（hoge-hoge）が含まれている場合
どうしてもキャメルケース（hogeHoge）にできないなら。
Button.module.css
.red-button { background-color: red; }
Button.tsx
import React from 'react'; import styles from './Button.module.css'; const Button: React.FC = () => { return ( <button className={styles['red-button']}></button> ); } export default Button;
import { red-button } from './Button.module.css'; は構文エラー
追記
ググるより公式ドキュメント見たほうがいい。
ffmpegでの動画変換メモ
ffmpeg をダウンロードする。
ffmepg はインストールしないで使うことができる。コマンドラインから利用するので ffmpeg のパスを通す。
mp4 から gif へ変換する
gif に変換する。GPU支援使えない？
ffmpeg -i source_file.mp4 result.gif
mp4 から mp4 へ変換する
サイズ変えたり？切り取ったり？
ffmpeg -i source_file.mp4 result.mp4
GPU 支援を利用する
グラボがある人用。ありえんほど速い。
ffmpeg -i source_file.mp4 -vcodec h264_nvenc result.mp4
ffmpeg と nvenc のバージョンが合わないとエラーを吐く。どちらも最新バージョンを入れれば間違いない？ nvenc をバージョンアップするには Drivers | GeForce で新しいドライバーをインストールする。詳しくないので Automatic Driver Updates でなんとかした。
以下のコマンドでドライバーのバージョンを確認できる。
nvidia-smi
メモを残したいというメモ
msal.js を利用して認証付きの Azure functions を ajax で呼び出す SPA を作ったのでメモを残しておきたい。
Microsoft ID プラットフォーム JavaScript シングルページ アプリケーション ガイド | Microsoft Docs
Azure 側の設定、特に認証関係の用語は全く知らない状態なので苦労した。今でもわかってないし。
