Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

概要 最近のブラウザだとWebカメラからの映像取得が簡単にできるようになっている。 この映像を毎フレームごとに画像処理したい場合、以下のように処理用の配列に変換する流れが一般的っぽい。 MDNに以下2つの良いサンプルがあったので組み合わせると良さそう。 Webカメラ → <video> 以下はWebカメラからMediaStreamを取得してvideo要素に読ませているサンプル https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia <video> → <canvas>→ImageData 以下はvideo要素からクロマキー合成とかやってるデモプログラム https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_vid
この記事はPWA Advent Calendar 2019の1日目の記事です。 以前、PWA Night vol.9 で、Web技術だけで作るQRコードリーダーという内容で紹介したのですが、当日は時間の問題で概要程度だったのでもう少し技術的な詳細を書きます。(当日のスライドはこちら) 作ったもの まずは、実際に見ていただくのがイメージつきやすいと思うので動作しているGIFです。 QRコードを読み込んで結果を表示するというものですが、これがブラウザで動いています。 実際に公開されていますのでよかったら使ってみてください。 サイト:https://simple-qr.netlify.com/ GitHub:https://github.com/KanDai/simple-qr-reader 確認している対応ブラウザは以下です。 Android Chrome Android Firefox iO
こんばんは。 最近チャリンコを購入して、チャリンコ通勤始めました。道中のお弁当屋とか発見できてQOL爆上げ中のmorifujiです。 背景 Vuejsでできること色々調べる機会があった いろんなWebAPIが存在していることに気づいた Image Capture API Web Bluetooth API 案件の仕様の中でwebアプリケーション内のみでqr読み取る必要が出てきた 目標 ブラウザで指定のURLを開き QRリーダーを起動(スマホのカメラ画面にならずに) QRを撮影すると、瞬時に解析して画面に表示 ※スマートフォンでの検証はまだ。確認し次第追記します 実装後デモ▼ shape detection API (不採用) リアルタイムに物体を認識するためのAPI。 人間の顔(FaceDetection)とバーコード(BarcodeDetection)の二種類がある。 https://w
JavaScriptでWebRTCやるための基礎知識 - console.lealog(); 春なので書きました。 言うなれば、これの2019年度版です。 はじめに 最低限のJavaScriptでWebRTCを扱うにあたり、どういうクラスがあって、どういうAPIを、どう使うのかについての記事です。 いわゆるフロントエンドのエンジニアがWebRTCを使ったサービスを作るなどの場合は、だいたい何かしらのSDKを使うと思います。 その場合はそのSDKのDocsを読めばそれで十分で、その先の仕組みを知る必要はないかなーと思います。 ただし、 SDKの中で何が行われてるか知っておきたい WebRTCのSDKを作る側である みたいな場合は、一読の価値ありかもです。 ようするに、弊社の新入社員のような人材のための記事です! 基本的なWebRTCの仕組みみたいなパートはざっくり軽めにして、JavaScri
こんにちは! Fusic Advent Calendar 2017 21日目の記事です。 WebRTCを触ってみた話をさせていただきます。 WebRTCとは WebRTC(Web Real-Time Communication)は、ウェブブラウザーの間で特定のプラグインがなくても通信できるAPIです。 W3Cで提示された草案であり、映像、音声、P2Pファイル共有などで活用できます。 WebRTCで提供するAPIは以下の三つです! ①MediaStream ユーザー端末機のビデオ、マイクにアクセスできます。 getUserMediaを使ってアクセスし、MedisStreamオブジェクトをPeerConnectionに渡して転送することになります。 ②PeerConnection 一番重要なAPIであり、ブラウザ間でビデオ、音声などのやりとりするAPIです! ③DataChannel ブラウザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く