AppleがiOS 17・iPadOS 17・macOS Ventura・macOS Monterey・macOS Sonoma向けにSafari 17.0を2023年9月26日にリリース予定です。リリースに先立って、Safari 17.0のレンダリングエンジンであるWebKitのアップデート内容をAppleのWebKit開発陣がブログでまとめています。 WebKit Features in Safari 17.0 | WebKit https://webkit.org/blog/14445/webkit-features-in-safari-17-0/ ◆HTMLのアップデート ・「search」要素をサポート 検索機能は多くのウェブサイトにとって重要な機能となっていることを受けて、新たに「search」要素が追加されました。従来は、全てのユーザーが検索機能を適切に利用できるようにするに
HTML5ではPCやスマホのデバイスの機能をJavaScriptから直接利用することができるようになりました。今回はカメラを操作し、デジカメのような要領で静止画を撮影する簡単なサンプルを作ってみたいと思います。 カメラの映像が向かって左側に写り続け、良いタイミングで下にある「シャッター」ボタンをクリックすると、右側に撮影した静止画が表示されます。ボタンをクリックするとシャッター音も再生されます。 サンプル 実行例 ソースコード 解説 大まかな原理 カメラが存在しない場合は？ オプション 特に指定しない 解像度の最小値と最大値 素材 参考ページ サンプル 実行例 以下のページから実際にサンプルを実行できます。 miku3.net 初回のアクセス時にWebブラウザから、このサイトにカメラの操作を許可して良いか聞かれますので「許可」ボタンをクリックしてください。「ブロック」ボタンを押すと設定を変
![[HTML5] カメラをJSで操作し写真を撮影する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/0e5f6ee7e86e2004df6e833b7ad30d66a04fb93e/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkatsube%2F20231125%2F20231125043913.png)
[2023/10/23 追記] SkyWayでバーチャル背景を利用するためのJavaScriptのライブラリを公開しました。 https://support.skyway.ntt.com/hc/ja/articles/24229180565401 バーチャル背景や背景ぼかしの処理を、より簡単に実装できます。 今後バーチャル背景の処理を実装する際は、こちらのライブラリの利用も検討してみてください。 こんにちは、SkyWay WebRTC Researchチームのucchyです。 突然ですが、皆さんはバーチャル背景機能を使ったことがありますか？ リモート化の進展に伴い、バーチャル背景機能の重要性がより高まっています。 実際に、SkyWayを利用されているお客様からも「バーチャル背景機能が欲しい」「背景ぼかし機能を実装してみたがイマイチ精度が良くない、動作が重い」といったご要望やご意見をいただい
はじめに この記事は、WebRTCのビデオ通話の帯域幅を自分で削減したい、という方向けの記事です。 WebRTCにはユーザの回線状況に合わせて動的にビットレートを調整する機能がありますが、それとは別軸の話です。 ビデオ通話の通信量が想定していたより大きいので節約したい... 解像度は低くていいから、細い回線でもビデオ通話できるようにしたい... こんな声を開発者からいただくことがあります。 その回答としてこの記事が役立てばと思いこの記事を書きました。 なぜCanvas APIなのか 帯域削減の解となる選択肢はいくつかあると思います。以下にその例を列挙してみました。 getUserMedia()のMediaTrackConstraintsを使って解像度・フレームレートを調整する Canvas APIを使って映像の解像度・フレームレートを調整する 帯域削減に有効な映像コーデックを指定する（例:
さてさて、このところLaravelの新バージョンがリリースされたこともあってほぼLaravel記事ばかりでしたが、やはり開発者として「気になること」もたまにはやってみたいということで、今回は「ある驚く機能」をブラウザで実装してみたいと思います。 その機能とは・・・・・ OCR（画像から文字を読み取る） 機能です。 実は、OCRは次の記事で紹介をしたことがあります。 📝 無料でできる！PHPで画像からテキストを読み取る方法 しかし、これはPHPからコマンドを実行する方法なので、サーバーが必須でした。 しかし、この間すごいパッケージを発見してしまったんです。 その名も、「tesseract.js」です。 なんと、このパッケージは純粋にブラウザのJavaScriptだけでOCRを実現するというスグレモノなんです。 そこで❗ 開発者として、どうしてもやってみたくなったので、今回は需要は度外視して
今風の画像アップローダーを作る
この記事はZOZOテクノロジーズ #1 Advent Calendar 2019 2日目の記事になります。 また、今年は全部で5つのAdvent Calendarが公開されています。 ZOZOテクノロジーズ #2 Advent Calendar 2019 ZOZOテクノロジーズ #3 Advent Calendar 2019 ZOZOテクノロジーズ #4 Advent Calendar 2019 ZOZOテクノロジーズ #5 Advent Calendar 2019 Advent Calendarは業務と関係ない内容でも良いとのことだったので、個人的に運営しているFirespeedの画像アップローダーを作り直した話をしてみたいと思います。 画像アップローダーを作り直した経緯Blog や SNS など、多くの場面で画像をアップロードする機会が増えてきました。 FirespeedのBlogでも
canvas を使って画像をトリミングする - Diary
canvas を使って画像をトリミングする const img = document.querySelector('img'); const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const context = canvas.getContext("2d"); context.drawImage(img, x, y, width, height, 0, 0, width, height); というようなコードが紹介されることが多いですが、ダメです。これはディスプレイの解像度が伝統的な 96DPI になっていることに依存したコードで、現代的な HiDPI 環境では思った通りに動きません。 こうした問題に対応するためにwindow.devicePixelR
さてさて、この間 wordpressみたいなドラッグ・アンド・ドロップをVueで実装という記事を公開しました。この記事の目的はユーザビリティだったのですが、ドラッグ＆ドロップ機能の先では画像のアップロードを想定していました。 最近のウェブサイトでは画像をサーバーへ保存するというのは珍しいことではないでしょうが、実はアップロードする側の状況が変化してきたことである問題が発生するようになってきました。 それが・・・ スマホ・カメラの高解像度化のせいで画像アップロードに時間がかかってしまう というものです。 つまり、サイズが大きなファイルをアップロードするのに時間がかかってしまうということですね。 特にまだ日本のウェブサイトは、以下のように確認ページを挟む場合も多く存在していますので、その場合（バリデーションを厳密にするなら）画像サイズが大きい場合は１番と２番で画像をアップロードする必要がでてき
Google Cloud Vision API を使って「1時間（自称）」くらいで車のナンバーを隠してくれるサービスを作ってみた - Qiita
@charset "UTF-8"; html { height: 100%; } body { display: flex; height: 100%; width: 100vw; flex-direction: column; justify-content: center; align-items: center; } #file-field-wrapper { box-sizing: border-box; width: 100%; max-width: 360px; padding: 16px; } #canvas-field-wrapper { display: none; box-sizing: border-box; width: 100%; max-width: 1240px; padding: 16px; justify-content: center; align-it
Webカメラの映像を解析(?)することがあったので、その工程をざっくりとまとめてみる。 内容をいっきに書き出すと長くなる予感がするので、今回はタイトルの通り「Webカメラの映像をcanvasに表示させる」まで。 次回は「canvasに表示されている映像（画像）の色の判別する」。 日本語、英語ともに語彙力が乏しいので、優しく見守ってくれると嬉しい…。 やること Webカメラの映像をvideo要素に表示させる。 video要素に表示されている映像をcanvasに表示させる。 Webカメラの映像をvideo要素に表示させる htmlにvideoタグを直書きしてもよいが、個人的な趣味嗜好でjsで管理する。 const cameraSize = { w: 360, h: 240 }; const resolution = { w: 1080, h: 720 }; let video; let med
戦車ラジコン：QRコードを倒す - Qiita
前回「Obnizで戦車ラジコンを作ろう」で戦車ラジコンを作ったのですが、思いのほか面白かったので、拡張してみました。 M5Cameraをつなげて、戦車から撮影するのですが、戦車ラジコンで徘徊している最中にQRコードを見つけて、大砲を発射（ボタンを押下）すると得点がもらえる、というものです。 時間制限を付けたので、両指でキャタピラをなんとか操作しつつ、時間内にたくさんのQRコードを破壊すれば高得点です。 ということで、前回の記事ではM5Cameraは必須としていませんでしたが、今回は必須です。 毎度の通り、GitHubに上げておきました。 https://github.com/poruruba/obniz_motor 以下からもページを参照できます。（Obnizにつながないと使えないですが）。 https://poruruba.github.io/obniz_motor/ ※M5Camera
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Safari 17.0がリリース、プロファイル機能のほか、多数のAPIや要素のサポートが追加される
[HTML5] カメラをJSで操作し写真を撮影する - ねこの足跡R
SkyWayで軽量なバーチャル背景を実現する方法｜SkyWay
Canvas APIを活用してWebRTCによるビデオ通話の帯域を削減する - Qiita
【JavaScript】ブラウザだけでカメラ撮影した文字を読み取る（OCR）
大きな画像をJavaScriptでリサイズしてからAjax送信する方法
Webカメラの映像をcanvasに表示させる - Qiita