WebCodecs と WebTransport でビデオチャット | blog.jxck.io
Intro ブラウザの持つ Video/Audio コーデック実装へアクセスする API として WebCodecs の仕様策定と実装が進んでいる。 これにより、映像や音声の変換などといったユースケースへの応用も可能だ。 本来なら WebCodecs 単体の API について解説するところだが、筆者がこの API を待っていた理由であるところの「WebRTC の代替」としての WebCodecs/WebTransport の応用に注目し、背景も踏まえて解説する。 WebRTC WebRTC は UDP 上に DTLS で交換した鍵を用いて、RTP を SRTP で流し、そのシグナリングに SDP を、ホールパンチに ICE(STUN/TURN) を用いることで、P2P ビデオチャットといったユースケースを可能にした API だ。 しかし、最初から「P2P ビデオチャット」というユースケース
JavaScript Blob, TypedArray, 文字列, Canvas, Imageとか周りの変換まとめ | キリウ君が読まないノート
Blob (≒ File) ArrayBuffer Buffer TypedArray (Uint8Array, Uint16Array, Uint32Array) Canvas (HTMLCanvasElement) Image (HTMLImageElement) 文字列 (普通の文字列, Base64文字列, バイナリ文字列) JavaScriptの、ここらへん同士の変換方法をむやみやたらにまとめてます。 [2022-02-27 追記] 全体の見直しを行いました。また、コメントを参考に一部の関数 (uint8ArrayToUint16Array, uint8ArrayToUint32Array) を修正しました。ご指摘くださりありがとうございました。 TypedArray → BlobBlob コンストラクタを使います。 なお、次項の方法で ArrayBuffer にしてみると分かり
オフスクリーンキャンバスを使ったJSのマルチスレッド描画 – スムーズなユーザー操作実現の切り札 - ICS MEDIA
OffscreenCanvas（オフスクリーンキャンバス）はWeb Workers（ウェブワーカー）を使用してWorkerスレッドで描画処理を行える機能です。負荷の高い描画処理をWorkerスレッドに移動することで、メインスレッドの負担が軽くなり、余裕ができます。これによりメインスレッドでスムーズなユーザー操作を実現できるようになり、ユーザー体験の向上が期待できます。本記事ではOffscreenCanvasについて機能と使い方を解説します。 ▲ OffscreenCanvasを使用したデモ。OffscreenCanvasを使用すると、Canvasへの描画負荷が高い場合でもスムーズなユーザー操作とCSSアニメーションの再生を実現できる JavaScriptでマルチスレッドに処理を実行できるWeb Workers OffscreenCanvasの説明の前に、まずはWeb Workersについて
JavaScript(ES2015&React)で画像を扱う：リサイズとプレビュー表示 - dackdive's blog
はじめに web サイト／アプリケーションで画像のアップロード機能などを実装する場合、 最近のスマホのカメラで撮影した画像はサイズが数 MB にも及ぶので、あらかじめクライアント側で送信可能なサイズまで縮小する必要があります。 今回はそのような画像のリサイズの実装方法を整理しつつ、サンプルコードを React で書いてみます。 冒頭に画像のリサイズについて色々書いてますが、結論としては便利なライブラリでよしなにやってくれるので実装方法だけ知りたい場合は読み飛ばしてください。 JavaScript で画像を扱う際の基本 まず、JavaScript で画像ファイルを扱うにあたっての非常に基本的な話。 <input type="file"> 要素で選択した画像ファイルのデータを取得し、プレビュー表示するには以下のようにします。 class ImagePreviewer extends React
まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2016、13日目の記事です。 こんにちは！4月からピクシブに入社したエンジニアの@_ragg_です✨ メンテナンスチーム・pixivFACTORYチーム・pixivFANBOXチームを旅して、デザインをかじったりフロントエンドを触ったりしています、3代目社内旅行エンジニアですね！ さて、今回はHTML5 Canvasに実装されつつあるOffscreenCanvasと、Web Workerについてお話しします。まだ日本語文献の少ないアツアツのネタです🔥🔥 OffscreenCanvas #とは OffscreenCanvasは、「画面に表示されないCanvas」です。 かつて CanvasProxy と呼ばれていたのをご存じの方もいると思います、まさにそれです。 「画面に表示されないCanvas」は、「表示前に何段階か画像の加
![まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/67a807916396b353fe22c6e5872e9f20268dcb97/height=288;version=1;width=512/https%3A%2F%2Fimg.esa.io%2Fuploads%2Fproduction%2Fattachments%2F3516%2F2016%2F12%2F13%2F10914%2F38a4d5e9-a149-45eb-a78c-d0285f932d29.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
