みかづきブログ・カスタム

基本的にはちょちょいのほいです。

2022-12-01から1ヶ月間の記事一覧

Chromeウェブストアに拡張機能を公開する 🌏

はじめに blog.kimizuka.org以前作成した拡張機能 ですが、審査を通過し Chome ウェブストア に公開することができたので、公開手順をまとめます。公開した拡張機能はこちらです。chrome.google.com 手順 ❶ アカウントを作成 https://chrome.google.com/webs…

Express + socket.ioでiPhoneのカメラが捉えている映像をPCでリアルタイムプレビューするウェブサイトをつくる 🎥

前提 自前で証明書を発行済みでhttpsでlocalhostにアクセスできる iPhoneとPCは同一WiFiにつながっている iPhoneは1台、PCも1台 iPhoneは直接見れない位置にある という条件で、iPhoneのカメラが捉えている映像を確認したく、PCでプレビューできるようにして…

自前で証明書を発行してローカルにExpressで立てたスタティックなウェブサーバにhttpsでアクセスできるようにする 💻

はじめに Expressでウェブサーバを建てる際、http://localhost:3000 でアクセスすることが多い(ポートが3000の場合)のですが、自前で証明書を準備して、https://localhost:3000 でアクセスできるように設定してみます。僕の開発環境がMacOSなので、MacOSで…

Yarn Workspacesを使って複数のNext.js + Electronプロジェクトを管理する 📁

これまでは、Yarn Workspacesの基本的な使い方 、Yarn Workspacesで複数のExpoプロジェクトを管理する方法 を記事にしてきました。blog.kimizuka.org blog.kimizuka.org今回は、Yarn Workspacesを使って複数のNext.js + Electronプロジェクトを管理します。 …

OpenCV.jsを使って、グリーンバック撮影用のカメラをウェブページ上で実装する 🟩

はじめに 今回つくったもの 動作原理 ソースコード index.html index.js index.css 実装時のあれこれ RGBからHSVへの変換 赤の取得 マスク画像との差分の取り方 video要素の消し方 今回使用した色見本 おわりに はじめに この記事は OpenCV Advent Calendar …

OpenCV.jsを使ってカメラで撮影した映像にブラーをかける際はksizeに大きな値を入れすぎないようにする 📷

medianBlur、GaussianBlur、blurを使えば簡単に画像にぼかすことができますが、それなりのFPSを出したい場合は注意が必要です。docs.opencv.org docs.opencv.org docs.opencv.org基本的にどれも使い方に大差はないのですが、今回はmedianBlurで実装してみま…

TypeScriptでCanvasに紙吹雪を舞い散らせる 🎉

5年前ぐらい前につくった紙吹雪をJavaScriptからTypeScriptに移植してみました。 Canvasに紙吹雪をレンダリングする基本方針はそのままに、ちょっとだけ挙動を変更しています。 具体的には、TypeScriptバージョンは紙吹雪が舞い散り終わった後、ループさせず…