記事一覧
Raspberry Pi Picoで動画と音声再生 multicore＋DMA⇒30fps ソースコードの残骸
昔、YouTubeで公開した動画のソースコードです。定期的にコメントがあるのでソースコードを公開します。
ただし
間違って上書きしてしまい動作しません
詳細を忘れてしまったため、質問に答えられません
たぶんバグあり、たまたま動いていたかも
回路図なしで配線したので、回路図はありません
JavaScript VideoDecoderを使った高機能動画再生プログラム
標準の<video>動画再生ではできない機能を実装した動画再生プログラムです。プレーヤーアプリではないので簡易的なUIのみの実装です。
高速＆安定したシーク、複数動画の同期再生、オーディオ遅延補正、コマ送り戻し（ステップ再生）に対応、ストリーミング再生には対応していません（動画ファイルの再生のみ）。
ソースコードはすべて自作（オリジナル）、オープンソース、生成AIは使っていません。
対応ファイル
JavaScript Webカメラ録画アプリ リアルタイム色補正/拡大回転 アプリDIY
録画するときに色調整、画像の拡大回転をリアルタイム処理する録画アプリが欲しかったので自分で作りました。JavaScriptではリアルタイム処理が難しいため、webGL(GPU)を利用しています。
使用例
YouTubeにアップするためのピアノ演奏動画作成に利用しています。一応30fpsで録画できているようです。カメラ解像度が1920で処理落ちしているのか時々コマ落ちしてます。PCの性能によって
TypeScript バイナリデータ読み込み処理
バイナリデータを少しずつ数値や文字列に変換しながら読み込んでいく処理です。以前の記事の巨大ファイルの部分読み込みと組み合わせると省メモリ＆高速なデータ解析処理が実現できます。
使い方
fetchで取得したBlobを使った例です。
let blob = await (await fetch("./data.bin")).blob();let reader = new BinaryReader(
JavaScript 巨大なローカルファイルの部分的な読み込み
<input type="file">で選択したローカルファイルの部分アクセス方法
※OS、ブラウザによっては使えない可能性があります
Fileインターフェイスのslice
<input>で選択した時点では、ファイルは読み込まれません。
FileはBlobの機能を備えています。slice関数を使用すれば、ローカルファイルへの部分アクセスが可能です。
// File ローカルファイルの部分ア
TypeScript VideoEncoderでwebmファイルの作成 Step（１コマずつ）録画
MediaRecorderでのリアルタイム録画ではなく、キャンバスに描画した画像を１コマずつ録画する方法です。そのためには、動画エンコードとwebmの作成が必要になります。エンコードはAPIのVideoEncoder、webmは仕様書を見て自作しました。ソースコードは白紙から作成しています。
こいつを見てくれ
白い四角形が移動するだけの動画です。ダウンロードして見てください。
MediaRe
JavaScript カメラ画像をCanvasで加工してからMediaRecorderで録画
コントラスト調整やキャプション追加など、カメラ画像を加工してから録画する方法です。（※画像加工プログラムは含まれません）
ソースコード
export async function main(){ let canvas = document.getElementById("canvas"); if(!(canvas instanceof HTMLCanvasElement))thro
JavaScript API VideoEncoder/Decoderの使い方
最近（？）追加された動画用のエンコード・デコードを行うAPIを使ってみました。キャンバスの画像（2フレーム）をエンコード（録画）、デコード（再生）するプログラムです。
ソースコード
export async function main(){ let canvas = document.getElementById("canvas"); if(!(canvas instanceof
JavaScript async/await シグナル処理
Promiseのthenを使用しない書き方の例です。
awaitが使えないイベントハンドラ内で使用すると便利
個人的にthen構文が苦手なのでawaitを多用しています。
とりあえずソースコード
export async function main(){ let button = document.getElementById("button"); if(!button)throw
JavaScript WebWorkerでCRC32計算 スレッドによる非同期計算処理の例
以前と投稿したCRC32計算をWebWorker（スレッド）で非同期にしたものです。計算中でもUI関連の処理が停止しないため、快適な操作を維持できます。
WebWorker
async-awaitの並列処理ではなく、マルチスレッド処理を行うAPIです。
詳しくは検索で
いきなりソースコード
export async function main(){ let crcWorker
TypeScript zipファイルとIndexedDBを使ったインストール（ファイルキャッシュ）システムの作成
ブラウザで動作するゲームなどが利用するデータ（画像、ポリゴンデータなど）をIndexedDBに保存する（インストール）することで、読み込み処理の高速化、サーバー負荷軽減が行えます。
使い方
zipファイル内のファイルをIndexedDBに保存、fetchなどサーバーにアクセスする前にDBを検索、あればそのデータを使いなければサーバーから取得
zipが更新されていればDBの再構築
co
JavaScript IndexedDBの使い方 独自のファイルキャッシュ作成
ブラウザのファイルキャッシュはほとんど制御できませんが、IndexedDBを使用すれば独自のファイルキャッシュシステム等が作成可能になります。
mdn web docsを参考にソースコードを作成しています。
IndexedDB
Key（string number ほか）を使ってJavaScriptのオブジェクトを格納取得できるオブジェクト指向データベースです。詳しくは検索とかで。
とりあえず
TypeScript zipファイルの読み込みと作成 JavaScript
JavaScriptでzipファイルが使えると何かと便利なので作ってみました。圧縮展開はAPIを利用、ソースコードはすべて白紙の状態から作成しています。オープンソースや外部のライブラリ未使用です。
zipファイルからファイル情報取得
文章で説明するよりソースコードで
文字コード変換や圧縮展開などの実装は以前の記事または、この後の有料記事にあります。
// pkzip constantcons
JavaScript APIを利用したDeflate圧縮と展開 CompressionStream DecompressionStream
zip(pkzip)やgzipの圧縮展開がJavaScript（ブラウザ）のAPIに用意されているようなので使ってみました。
//---------------------------------------// deflate展開 zip(pkzip)export async function decompressPkZipDeflate(blob : Blob){ let decomp
JavaScript CRC32の計算 ＞＞＞符号なし右シフト演算
JavaScriptのビット演算にご用心
C言語のようにビット演算を記述すると想定外の動作になったり
符号なし右シフト演算を活用
(-1)>>>0 = 4294967295(0xffffffff)
JavaScriptのビット演算は32bit
class CRC32{ static table : number[] = []; constructor(){ if(CR
TypeScript String(UTF-16)⇒SJIS 文字コード変換
時々必要になるSJISコード（zipとか）。JavaScriptのAPIにSJIS⇒Stringはあるけど逆はないので作成しました。
APIのTextEncoder("sjis")を使って変換表を作成、変換処理に利用
// 文字コード変換 String(UTF-16) -> SJIS// 簡易版？ プログラム実験用 サロゲートペア未対応export class TextEncoderSJIS{