Hello.

私は世界で最も簡単なスクリーンレコーディングソフトウェアを作ることを目標としています、そして私はここ数カ月間ずっとこのプロジェクトについてゆっくりとうなずいていました（私は本当にゆっくり意味します）。 前回の記事では、私は持っていたscreen recording and a voice overlay 、すべての入力ソースからのストリームを用いて約futzingで。ただし、欲求不満の1つの分野は、デスクトップからオーディオを取得する方法やスピーカーからオーディオをオーバーレイする方法を理解できなかったことです。私はついにそれをする方法を考え出しました。 まず、ChromeのgetDisplayMediaではオーディオキャプチャが可能にaudio: trueましたが、関数呼び出しでaudio: trueを指定することができなかったという点で、Specでの奇妙な見落としのようですが、今は可能です。 const audio = audioToggle.checked || false; desktopStream = await navigator.mediaDevices.getDisplayMedia({ video:true, audio: audio }); 2つ目は、オーディオストリームに2つのトラックを作成することで、必要なものを取得できると思いましたが、ChromeのMediaRecorder APIは1トラックしか出力できないことを知りました。 DVDマルチオーディオトラックのようなものですが、一度に再生できるのは1つだけです。 解決策はおそらく多くの人にとって単純なことですが、それは私にとっては初めてのことでした。ウェブオーディオを使う WebAudio APIにはcreateMediaStreamSourceとcreateMediaStreamDestination 、どちらも問題を解決するために必要なAPIです。 createMediaStreamSourceは私のデスクトップオーディオとマイクからストリームを取ることができます、そしてcreateMediaStreamDestinationによって作成されたオブジェクトに2つを一緒に接続することによってそれは私にこの1つのストリームをMediaRecorder APIにパイプする能力を与えます。 const mergeAudioStreams = (desktopStream, voiceStream) => { const context = new AudioContext(); // Create a couple of sources const source1 = context.createMediaStreamSource(desktopStream); const source2 = context.createMediaStreamSource(voiceStream); const destination = context.createMediaStreamDestination(); const desktopGain = context.createGain(); const voiceGain = context.

私はGoogle IOの後少し休止時間がありました、そして私は私が持っていた長期のかゆみをかいたいです。ブラウザの画像の中にあるテキストをコピーできるようにしたいだけです。それがすべてです。私はそれが皆のためのきちんとした機能であろうと思います。 Chromeに機能を直接追加するのは簡単ではありませんが、Androidのインテントシステムを利用できることはわかっています。現在はWeb（または少なくともAndroidのChrome）を使用してこれを実行できます。 二つの新しいWebプラットフォームへの追加-共有ターゲットレベル2（または私はそれが共有ファイルを呼び出すために好きなように）とTextDetector形状検出APIで- have allowed me to build a utility that I can Share images to and get the text held inside them 。 基本的な実装は比較的簡単で、Service Workerで共有ターゲットとハンドラーを作成してから、ユーザーが共有したイメージをTextDetectorしたらそれTextDetectorを実行します。 Share Target API使用すると、Webアプリケーションをネイティブ共有サブシステムの一部にすることができます。この場合は、次のようにWeb App Manifest内で宣言することで、すべてのimage/*タイプを処理するように登録できます。 "share_target": { "action": "/index.html", "method": "POST", "enctype": "multipart/form-data", "params": { "files": [ { "name": "file", "accept": ["image/*"] } ] } } あなたのPWAがインストールされると、あなたは以下のようにあなたがから画像を共有するすべての場所でそれを見るでしょう: Share Target APIは、共有ファイルをフォーム投稿のように扱います。ファイルがWebアプリケーションと共有されると、サービスワーカーがアクティブになり、 fetchハンドラーがファイルデータと共に呼び出されます。データはService Worker内にありますが、処理できるように現在のウィンドウに必要です。サービスはどのウィンドウが要求を呼び出したのかを知っているので、クライアントをターゲットにしてデータを送信できます。 self.addEventListener('fetch', event => { if (event.request.method === 'POST') { event.

最新のSafari用の大きなアップデート！ これはかなり大きな発表だと思いました。Googleとは正反対の話で、Google Pay Libが支払いを実行するための推奨方法であると私は言いました。支払い要求の、しかしそれは最初にPRではありません。 Payment Request is now the recommended way to pay implement Apple Pay on the web. Read full post 。 そして私のお気に入りの機能はWeb Intentsでの私の歴史を与えてくれました。 Web Share API The Web Share API adds navigator.share(), a promise-based API developers can use to invoke a native sharing dialog provided the host operating system. This allows users to share text, links, and other content to an arbitrary destination of their choice, such as apps or contacts.

何年も前に、ネイティブアプリケーションがネットワーク接続の欠如にどのように対応したかについて調査しました。私は分析へのリンクを失いましたが（Google+にあると誓うことができます）、多くのネイティブアプリケーションはインターネットに密接に結び付けられているため、機能を拒否することができます。多くのWebアプリのように思えますが、それらはWebとは一線を画したものですが、経験はまだ「オンブランド」であったということです。大部分のWebエクスペリエンスでは、「Dino」が表示されます（chrome:// dinoを参照）。 Service Workerには長い間取り組んできましたが、Service Workerによってページが制御されるサイトがますます増えている一方で、ネットワークが機能していないときには、ほとんどのサイトで基本的なフォールバックの経験がありません利用可能です。 私は私たちの良い友達Jakeに、あなたが完全にオフラインで最初のエクスペリエンスを作りたくないという仮定の下で一般的なフォールバックページをどのように作り上げるかについてのガイダンスがあるかと尋ねました。 Check it out 。 説明を簡潔にするために、コードの長さは約20行にすぎないので、以下に貼り付けました。オフラインアセットをキャッシュし、「ナビゲーション」フェッチであるすべてのフェッチについて、エラーが発生したかどうか（ネットワークが原因で）を確認し、元のコンテンツの代わりにオフラインページをレンダリングします。 addEventListener('install', (event) => { event.waitUntil(async function() { const cache = await caches.open('static-v1'); await cache.addAll(['offline.html', 'styles.css']); }()); }); // See https://developers.google.com/web/updates/2017/02/navigation-preload#activating_navigation_preload addEventListener('activate', event => { event.waitUntil(async function() { // Feature-detect if (self.registration.navigationPreload) { // Enable navigation preloads! await self.registration.navigationPreload.enable(); } }()); }); addEventListener('fetch', (event) => { const { request } = event; // Always bypass for range requests, due to browser bugs if (request.

私はHugoベースのエディタで更新し、EditorJSをブログのエディタとしても試してみた。 Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor’s Core. Read full post 。 私はそれがうまくいくと思います。 私は少しコードベースと苦労しました、例はすべてESモジュールを使用します、しかしNPM distはすべてIIFE ES5コードで出力されます。しかし、そのハードルを乗り越えれば、もう少し中程度の外観のUIを構築するのは非常に簡単です。

私たちは最近フィーチャーフォンで多くの開発をしてきました、そしてそれは大変でしたが、楽しいです。最も難しいのは、KaiOS上で、特に私たちが持っているハードウェア上で、Webページをデバッグすることが不可能であることがわかったということです（The Nokia 8110）。ノキアは素晴らしいデバイスです、それは私たちが知っているKaiOSで造られますそれはFirefox 48に似た何かに基づいています、しかしそれはロックされています、簡単にWebIDE。 2、3のブログを読むことと、 adbについて少し知っていることの組み合わせを通して、私はそれをする方法をadbました。他の人がそれを行うことができたかもしれないことに注意してください、しかしそれは一箇所に明確に文書化されていません。 （上の画像はDevToolsとスクリーンショットツールの出力を示しています） 手順は次のとおりです。 USBケーブルを接続します。メインマシンにadbインストールされていることを確認してください。 Firefox 48コピーをダウンロードする 3.携帯電話から*#*#33284#*#*入力して「開発者モード」を有効にします（ダイヤラは使用しないでください）。画面上部に小さな「バグ」アイコンが表示されます。 [Source ] USBケーブルを取り付けます 5.開発マシン上で以下のコマンドを実行します。 adb start-server あなたの電話が接続されていることを確認するためのadb devices 。 adb forward tcp:6000 localfilesystem:/data/local/debugger-socketこれはあなたのマシンから電話のソケットへのチャンネルを設定します。これがWeb IDEが使用するものです。 FirefoxをWeb IDEを起動し、[ツール]、[Web IDE]のWeb IDEします。 Web IDEが開きます。[Remote Runtime]をクリックし、[localhost:6000]の[開く]ボタンをクリックします（これはTCP転送ポートです）。 8.電話でページを開くと、左側に表示されます。ほら。

私はChromeでShape Detection APIてきましたが、その可能性を本当に気に入っています。たとえば、非常に単純なQRCode detectorにはJSポリフィルがありますが、 new BarcodeDetector() APIが使用可能な場合 形状検出APIの他の機能、 Face Detection 、 Barcode Detection 、およびText Detectionを使用してここで作成した他のデモをいくつか見ることができます。 私が偶然見つけたとき、私は驚きましたJeeliz週末に、私は彼らのツールキットのパフォーマンスに非常に感銘を受けました-付与された私はPixel3 XLを使用していたが、顔の検出がで可能であるものよりも大幅に速く見えたFaceDetector API。 Checkout some of their demos 。 私はたくさん考えました。このオブジェクト検出用のツールキット（およびそれに類するもの）は、Web上で広く利用可能なAPI、特にカメラアクセス、WebGL、およびWASMを使用します。 ）豊富なエクスペリエンスを簡単に構築し、すべてのプラットフォームにわたって一貫したエクスペリエンスを持つ何十億ものユーザーに到達するために使用できます。 増強はそれが面白くなるところ（そして実際に私がこの記事で紹介したいもの）であり、そしてあなたが今プラットフォームに来ているミドルウェアライブラリを必要とするところで、私達はMASSIVEアプリをインストールせずに楽しいsnapchat-esqueフェイスフィルターアプリを構築できますこれは、ユーザーのデバイスから大量のデータを収集します（システムへの根本的なアクセスがないため）。 楽しいデモ以外では、次のように非常に高度なユースケースをすばやく簡単に解決できます。 *カメラから直接テキスト選択、またはユーザーからの写真 *カメラからの言語のライブ翻訳 *インラインQRコード検出機能なので、WeChatを常時開く必要はありません:) *画像からWebサイトのURLまたはアドレスを自動抽出する *クレジットカードの検出と番号抽出（より早くあなたのサイトにサインアップするユーザーを取得する） あなたの店のウェブアプリで*ビジュアル商品検索。 あなたの店のWebアプリでより多くの製品の詳細については*バーコードルックアップ *プロフィール写真を人の顔にすばやくトリミング。 *シンプルなA11Yは、ユーザーが画像にあるテキストを聞くことができるようにします。 私はたった5分でこれらのユースケースについて考えました - もっとたくさんあることを私は知っています - しかし私達はカメラを利用している多くのサイトやウェブアプリを見ていないことを襲ったユーザーがアプリをダウンロードする必要があります。これ以上行う必要はないと思います。 最新情報私たちのチームのThomas Steinerが私たちのチームチャットで、私は現在のShapeDetection APIが好きではないようにShapeDetection 。このAPIがそれぞれのシステムそれぞれのネイティブ出荷実装へのアクセスを提供するという事実を私は気に入っていますが、 The Lumpy Webで書いたThe Lumpy Web 、Web開発者はプラットフォームの一貫性を切望し、要約すると: APIはChromeにのみあります ChromeのAPIは、基盤となる実装が異なるため、プラットフォームごとに大きく異なります。 Androidには、口や目など、macOSにアウトラインがあるランドマーク用のポイントしかありません。 Androidでは、 TextDetectorは検出されたテキストを返し、MacOSの場合は「テキストの存在」インジケータを返します。これは、Surmaが見つけたすべてのバグについて言及していないことです。 配布のためのプラットフォームとしてのウェブはこれらの経験にとってとても意味があるのでやりたくないと思いますが、上記の2つの問題のグループはすべての機能を長期にわたって実装する必要があることに疑問を投げかけます。 WebGL、WASM、そして将来のWeb GPUなど、今日のプラットフォームの機能を使用して出荷されるパッケージに優れたソリューションを実装することができれば、ネイティブなWebプラットフォーム。 とにかく、私たちがウェブ上でこれを行うことができるという事実が大好きです。

私はあなたを本当に根拠のある状態に保っている一連のローエンド機器でのテストについて良いMarikoで同僚のMarikoによるツイートを見ました。 つぶやきのコンテキストは、これらのクラスのデバイスを日常的に使用しているユーザー向けに構築するときにWeb開発がどのようなものかを検討しているということです。 チームは現在この分野で多くの仕事をしていますが、私はサイトを構築するのに1日を費やしました、そして少しでも合理的なレベルのパフォーマンスで何かを動作させることは信じられないほど困難でした。 *ビューポートの奇妙な点、および300msのクリックディレイの不思議な再導入（回避策）。 *画面全体の巨大な塗り替え、そして遅いです。 *ネットワークが遅い *メモリに制約があり、その後のGCがメインスレッドを数秒間ロックする *非常に遅いJS実行 * DOM操作が遅い 私が構築していたページの多くは、高速のwifi接続でもページのロードに数秒かかり、その後のやりとりは非常に遅いものでした。それは大変でした。メインスレッドからできるだけ多くのことを引き出そうとすることを含みました、しかしそれは私が私の伝統的なすべてのWeb開発のためにしなかったであろうパフォーマンスが大幅に向上しました。 長期的に何をするべきかわからない、私たちがより発展した市場で働いている開発者の巨大な群れが「私は[insert country x]にユーザーのためのサイトを構築していません」という反応を持つと思う。ハイレベルこの声明を議論するのは難しいですが、私は毎年何千万もの新しいユーザーがコンピューティングに来ていて、彼らがこれらのデバイスを使用することになるという事実を無視することはできません。私たちがrise of the meta platform満足しないように、コンテンツとアプリケーションのための選択の選択。 私達はこれからも長い間パフォーマンスを向上させ続ける必要があるでしょう。開発者がすばやくロードし、スムーズなユーザーインターフェースを持つことができるよう、ツールとガイダンスを作成し続けます。

私はちょうどwork our team has doneいくつかをwork our team has doneていました、そして私はRobert NymanとEric Bidelmanが作成した2017年からのプロジェクトを見つけました。 Browser Bug Searcher! ほんの数回キーを押すだけで、すべての主要ブラウザエンジンにわたるお気に入りの機能の概要を把握できます。 Source code available 。 これは実際に私がcrbugとwebkitのバグトラッカーで抱えている問題の1つを強調しています、彼らはRSSのようなフォーマットでデータのフィードを得る簡単な方法を持っていません。私は自分のtopicdeckアグリゲーターをバグカテゴリーなどで使えるようにしたいと思っています。それで私はそれぞれのバグトラッカーからの最新の情報に基づいて興味があることすべてのダッシュボードを持っています。

私はこのブログへの投稿をより簡単にすることができるようにhttps://www.webcomponents.org/上のクイックhttps://www.webcomponents.org/エディタを探していました、そして私はgithubによってきちんとしたコンポーネントのセットにgithub 。 私は彼らが<time-element>を持っていることを知っていましたが、私は彼らがそのような素晴らしく単純な一連の便利な要素を持っていることを知りませんでした。

今日はちょっといいね。

（業界として）私たちがGDPRの同意を実装する方法は、混乱しています。 「必要なCookieのみを使用する」以外のものを選択する理由がわからないのですが、どちらかの選択肢とどちらかの選択とのトレードオフの違いを理解することはできません。必要なクッキーのみを使用する。

歴史はこの混乱について私たち全員を判断するでしょう、そしてそれがナショナリズム、自己利益、植民地時代の傲慢、有名人の崇拝の影響に関するすべての人のためのケーススタディになることを願っています。 ファッカー

SafariチームのRicky Mondelloがつい最近、Twitterが./well-known/change-password仕様をどのように使用しているかについてのメモを共有しました。 I just noticed that Twitter has adopted the Well-Known URL for Changing Passwords! Is anyone aware of other sites that have adopted it? Twitter’s implementation: https://twitter.com/.well-known/change-password; Github’s: https://github.com/.well-known/change-password; Specification :https://github.com/WICG/change-password-url Read full post 。 よく知られた場所にファイルがあれば、ブラウザは複雑なUIをナビゲートする必要なしに素早くパスワードをリセットすることを可能にするUIをユーザに提供できます。 この仕様は一見シンプルです。よく知られているファイルには、アクションを実行したいときにユーザーに指示するURLが含まれているだけです。これは私が考えることを私に導きました、私達はこれらのより多くの機能を提供することができます: GDPRベースの同意モデル（cookie同意）のよく知られた場所 - サイトの所有者は、ユーザーがすべてのcookieおよびその他のデータ同意アイテムを管理し、潜在的に取り消すことができるページへのリンクを提供できます。 *ブラウザの権限管理のためのよく知られた場所 - サイトの所有者は、ユーザーが地理的位置、通知、その他のプリミティブなどのものに対する権限を取り消すことができるようにするための迅速な場所を提供できます。 *アカウントの削除と変更のためのよく知られたパス メーリングリスト購読管理のための*よく知られたパス リストは続きます….私はユーザーが一般的なユーザーの行動を発見するのを手助けするための単純なリダイレクトファイル、そしてブラウザがそれを表面化させる方法のためのアイデアが本当に好きです。 更新: issue to Chrome to see if we can get a similar implementationを追加しissue to Chrome to see if we can get a similar implementation 。

Jakeとチームは、ブラウザ独自のピンチズームのダイナミクス以外のHTMLのセットでピンチズームを管理するための、このかなり素晴らしいカスタム要素を構築しました（モバイルビューポートズームを考えてください）。この要素は、Chrome Dev Summitで構築およびリリースしたsquooshアプリに必要な中心的コンポーネントの1つでした（…「Chrome Dev Summitでリリース」と言いますsquooshは、China Google Developer Dayですべてのユーザーに公開しましたチームの他のメンバーが通商禁止になっていたとしても;）…） install: npm install --save-dev pinch-zoom-element <pinch-zoom> <h1>Hello!</h1> </pinch-zoom> Read full post 。 私はちょうどそれを私のブログに加えました（ほんの数分かかりました）、あなたは私が撮った写真を共有する私の「 life 」セクションでそれをチェックすることができます。タッチ対応デバイスを使用している場合は、複数の指の入力を処理できるトラックパッドを使用している場合は、要素をすばやくピンチズームできます。 この要素は、Webコンポーネントがユーザーインターフェイスコンポーネントを作成するためのモデルとして好きな理由の良い例です。 pinch-zoom要素は、ワイヤ上でわずか3kb（圧縮されていない）で最小限の依存関係にあり、使いにくくなるようなカスタムのアプリケーションレベルのロジックを束縛することなく、1つの仕事を非常にうまく行っています。 vs Squooshアプリから学んだことに基づいて共有するアプリロジックコンポーネント。 たとえば、この要素が多くのコマースサイトで見られる画像ズーム機能を置き換えたり標準化したりして、開発者からその苦痛を永遠に取り去ることができると私は想像できるでしょう。

Pete LePageがオリジントライアルでWeb Share Target APIとChromeの可用性を紹介します Until now, only native apps could register as a share target. The Web Share Target API allows installed web apps to register with the underlying OS as a share target to receive shared content from either the Web Share API or system events, like the OS-level share button. Read full post 。 このAPIはウェブ上のゲームチェンジャーです、それはネイティブのアプリで利用可能であったことがあるものへのウェブを開く:ネイティブの共有。アプリはサイロであり、それらはすべてのデータを吸い込み、プラットフォームを越えてアクセスするのを難しくします。共有ターゲットは、Webが同じゲームで遊ぶことができるように競技場を平準化し始めます。 Twitter Mobileの経験には、Share Target already enabledます。この投稿は私のサイトの管理者パネルのmanifest.json定義した共有ターゲットを使って作成されました - それは非常にうまく機能し、ファイルサポートがあればmanifest.jsonに自分のデバイス上のイメージやブロブをブログに投稿できるようになります。 とてもエキサイティングな時代です。 リンクされた記事を読んで、このAPIがいつ公開されるべきか、およびAPIの使用方法のスケジュールについて詳しく学んでください。

Thomas SteinerによるWeb上の優れたプッシュ通知に関する素晴らしい記事とビデオ、およびサンプルです。 A particularly bad practice is to pop up the permission dialog on page load, without any context at all. Several high traffic sites have been caught doing this. To subscribe people to push notifications, you use the the PushManager interface. Now to be fair, this does not allow the developer to specify the context or the to-be-expected frequency of notifications. So where does this leave us? Read full post 。

私たちのチームの素晴らしい技術ライターであるKayce Basquesは、既存のドキュメンテーションのベストプラクティスが技術的な資料を説明するためにどれほどうまく機能しているかを測定した彼の経験についてかなり驚くべき記事を書きました。この意味でのベストプラクティスは、テクニカルライティングの業界標準としてよく知られている場合もあれば、スタイルガイドを書いているあなた自身の会社の場合もあります。見てみな！ Recently I discovered that a supposed documentation “best practice” may not actually stand up to scrutiny when measured in the wild. I’m now on a mission to get a “was this page helpful?” feedback widget on every documentation page on the web. It’s not the end-all be-all solution, but it’s a start towards a more rigorous understanding of what actually makes our docs more helpful. Read full post 。

私は数週間前にGoogle Developer Dayで中国にいましたが、皆さんに私のQRCode scannerを公開していました。オフラインになるまではうまくいっていました。ユーザーがオフライン（または部分的に接続されている）の場合、カメラは起動せず、QRコードをスナップできませんでした。私は何が起こっているのか分かりませんでした。私は誤って onloadイベントでカメラを起動していました.Googleアナリティクスのリクエストはハングアップし、適時に解決されませんでした。それはそれを修正したこのコミットでした。 Because these types of assets block rendering, the browser will not paint anything to the screen until they have been downloaded (and executed/parsed). If the service that provides the file is offline, then that’s a lot of time that the browser has to spend trying to access the file, and during that period the user is left potentially looking at a blank screen. After a certain period has elapsed, the browser will eventually timeout and display the page without the asset(s) in question.

週末にはBoomerangエフェクトビデオエンコーダを使って遊んでいましたが、ほぼリアルタイムで動作させることができます（後で説明します）。私はそれをデスクトップ上のChromeで動作させましたが、AndroidのChromeでは正常に動作しません。 コードはここにあるを参照してください。 captureStream（）を ` （私の場合は1280x720）、MediaRecorder APIはビデオをエンコードすることができず、エラーもなく、事前にビデオをエンコードできないことを検出できません。 (1) Capture a large res video (from getUM 1280x720) to a buffer for later processing. (2) Create a MediaRecorder with a stream from a canvas element (via captureStream) sized to 1280x720 (3) For each frame captured putImageData on the canvas (4) For each frame call canvasTrack.requestFrame() at 60fps context.putImageData(frame, 0, 0); canvasStreamTrack.requestFrame(); Demo: https://boomerang-video-chrome-on-android-bug.glitch.me/ Code: https://glitch.com/edit/#!/boomerang-video-chrome-on-android-bug?path=script.js:21:42 What is the expected result? For the exact demo, I buffer the frames and then reverse them so you would see the video play forwards and backwards (it works on desktop).

マイク・エルガンのPWAに関する素晴らしい記事。マイクロソフトの目標はPWAではわかりませんが、私たちは非常に単純だと考えています。ユーザーがコンテンツや機能に即座にアクセスできるように、デバイス上で対話できるようにしたいと考えています。ウェブは、接続されたすべてのデバイスのすべての人に届くはずです。ユーザーは、自分の好みのモダリティにアクセスできる必要があります（モバイル、多分）、またはアシスタントなどでの音声 私たちはまだヘッドレスウェブから遠く離れている（0）が、記事では本当に私を驚かせた： Another downside is that PWAs are highly isolated. So it’s hard and unlikely for different PWAs to share resources or data directly. 全文を読む ウェブ上のサイトとアプリは分離されていないと思われますが、ウェブはリンク可能、インデックス可能、一時的です（0）。私たちは、プラットフォームがユーザーに簡単にサイト内外の*データを取得することを許可していないため、意図しないサイロを作成しています（1）。私はRDFやそのようなことについては言及していません。コピー＆ペースト、ドラッグ＆ドロップ、サイトへの共有、サイトからの共有などの基本的な操作は今日のWeb上で壊れています。と窓。

最初の問題は、ウェブ上でビデオエディタを作成するです。 私は複数のビデオストリーム（デスクトップとウェブカム）を持っています。私はワンビデオ要素のビデオストリームを切り替えることができるようにしたいので、Webカメラとデスクトップを素早く切り替えることができ、 MediaRecorderを破ることはできません。 あなたが videoTracksオブジェクトのselectedプロパティを <video>要素が含まれていますが、トラックの配列に含まれる要素は1つだけです（MediaStreamの最初のビデオトラック）。 What steps will reproduce the problem? (1) Get two MediaStreams with video tracks (2) Add them to a new MediaStream and attach as srcObject on a videoElement (3) Check the videoElement.videoTracks object and see there is only one track Demo at https://multiple-tracks-bug.glitch.me/ What is the expected result? I would expect videoElement.videoTracks to have two elements. What happens instead? It only has the first videoTrack that was added to the MediaStream.

私はQRコードの大ファンです。実世界とデジタル世界の間でデータを交換するための非常にシンプルできれいな方法です。数年前から、私はQRSnapperと呼ばれる小さなプロジェクトを持っていました。まあそれはいくつかの名前を持っていますが、これは私が解決したものです＆mdash;これは getUserMedia APIを使用してユーザのカメラからライブデータを取得し、ほぼリアルタイムでQRコードをスキャンすることができます。 このアプリの目標は、UIで60fpsを維持し、QRコードをすぐに検出できるようにすることでした。これは、検出コードをWebワーカー（かなり標準的なもの）に入れなければならないことを意味しました。この記事では、comlinkを使ってワーカーのロジックを大幅に単純化する方法を簡単に共有したいと思っていました。 qrclient.js import * as Comlink from './comlink.js'; const proxy = Comlink.proxy(new Worker('/scripts/qrworker.js')); export const decode = async function (context) { try { let canvas = context.canvas; let width = canvas.width; let height = canvas.height; let imageData = context.getImageData(0, 0, width, height); return await proxy.detectUrl(width, height, imageData); } catch (err) { console.log(err); } }; qrworker.js（ウェブワーカー） import * as Comlink from './comlink.js'; import {qrcode} from './qrcode.js'; // Use the native API's let nativeDetector = async (width, height, imageData) => { try { let barcodeDetector = new BarcodeDetector(); let barcodes = await barcodeDetector.

私はFFMPEG.jsが大好きです。これは、asm.jsでコンパイルされた素敵なツールです。そして、私はビデオをすばやく編集できるJS Webアプリケーションを作成しましょう。 FFMPEG.jsもWebワーカーと連携して、メインスレッドをブロックせずにビデオをエンコードすることができます。 私はComlinkも大好きです。 Comlinkでは、複雑な postMessageステートマシンを扱わなくても、関数やクラスを公開することで、Webワーカーと簡単にやりとりすることができます。 私は最近、この2つを組み合わせる必要があります。私はFFMPEGをWebアセンブリにエクスポートして実験しました（これはうまくいきます）、現在のFFMPEG.jsプロジェクトでpostMessageの作業をすべてクリーンアップしたかったのです。以下は、コードが今のように見えるものです - 私はそれがかなりきちんとしていると思います。私たちにはffmpeg.jsとcomlinkをインポートするワーカーがいて、単にffmpegインターフェイスを公開するだけです。次に、workerを読み込んだ後、comlinkを使ってffmpeg APIへのプロキシを作成するWebページがあります。 きちんとした worker.js importScripts('https://cdn.jsdelivr.net/npm/comlinkjs@3.0.2/umd/comlink.js'); importScripts('../ffmpeg-webm.js'); Comlink.expose(ffmpegjs, self); client.html let ffmpegjs = await Comlink.proxy(worker); let result = await ffmpegjs({ arguments: ['-y','-i', file.name, 'output.webm'], MEMFS: [{name: file.name, data: data}], stdin: Comlink.proxyValue(() => {}), onfilesready: Comlink.proxyValue((e) => { let data = e.MEMFS[0].data; output.src = URL.createObjectURL(new Blob([data])) console.log('ready', e) }), print: Comlink.proxyValue(function(data) { console.log(data); stdout += data + "\n"; }), printErr: Comlink.proxyValue(function(data) { console.

私は最近、Google4Indiaイベント（近いうちに報告）に出席し、多くの企業や開発者と出会うためにインドへの旅行から帰ってきました。議論された最も興味深い変更の1つは、国のユーザーの言語でより多くのコンテンツを求めていたことでした。特に、ユーザーの言語で検索しやすくすること、コンテンツを見つけること、テキストまたは音声形式でユーザにそれを読み戻すことができます。 旅行全体が私に考えさせてくれました。私のブログはHugoで構築されています。 Hugoは現在、複数の言語で書かれたコンテンツをサポートしています。 Hugoは完全に静的なので、新しいコンテンツを作成することは、新しいファイルを作成してビルドシステムに魔法をかけることの問題です。翻訳ツールを使用して静的コンテンツを実行することで、より多くの人がコンテンツを利用できるようにすることができます。なぜなら、コンテンツの翻訳者は非常に高額なためです。 私の飛行前にイギリスに帰国する数時間前に、自分のマークダウンファイルを取得し、Google Cloud Translateで実行してクイック検索を作成するスクリプトを作成しました私はすぐにホストすることができますページの翻訳。ソリューション全体を以下に示します。これは比較的基本的なプロセッサーで、「コード」を無視したHugoプリアンブルを無視し、プル・クォートを無視しています。これらは常に書かれたままにしておくことを前提としていました。 注：翻訳用のラーニングソフトウェアのように見えるので、学習ツールでGoogle Translatedコンテンツをアルゴリズムの入力として使用しないようにページをマークアップすることが重要です（https://cloud.google.com/translate/マークアップ）。 // Imports the Google Cloud client library const Translate = require('@google-cloud/translate'); const program = require('commander'); const fs = require('fs'); const path = require('path'); program .version('0.1.0') .option('-s, --source [path]', 'Add in the source file.') .option('-t, --target [lang]', 'Add target language.') .parse(process.argv); // Creates a client const translate = new Translate({ projectId: 'html5rocks-hrd' }); const options = { to: program.target, }; async function translateLines(text) { if(text === ' ') return ' '; const output = []; let results = await translate.

Web AppsがiPhoneでアプリを使用するために推奨される方法を覚えていますか？ What are web apps? Learn what they are and how to use them. 全文を読む。 2013年頃、Appleは/ webapps /トップレベルのディレクトリを/ iphone / ことは、ディレクトリは実際にはかなり良かった、そこのアプリの多くは今日も動作しています。しかし、AppStoreを見ると、開発者が持っていたより多くの問題が解決されました。 AppStoreはまた、支払いに関してユーザーや開発者から取り除かれた摩擦を具体的に紹介し始めました。

私は初期のモバイルWeb APIに関するブログ記事を書いているし、Alex RussellはGoogle Gearsを思い出させた Gears modules include: LocalServer Cache and serve application resources (HTML, JavaScript, images, etc.) locally Database Store data locally in a fully-searchable relational database WorkerPool Make your web applications more responsive by performing resource-intensive operations asynchronously 全文を読む。 AppCacheとWebSQL、GeolocationとWebWorkersはGoogle Gearsのアイデアから出てきて、実際に生き残ったのは後者の2つだけです。 WebSQLは決して広くサポートされておらず、IndexedDBに置き換えられました。 ServiceWorkerに置き換えられたAppCache

私たちはGoogleチャットを内部的に使用してチーム全体でコミュニケーションを取っています。また、RSSフィードを介してアクセスできる多くのコンテンツを作成し、すべて見ることができるチームフィードを持っています。最近まで、WebHooks（https://developers.google.com/hangouts/chat/how-tos/webhooks）経由で単純なポストオンリーボットを作成することはかなり簡単であることがわかりました。私にはアイデアが与えられました。私はRSSフィードをポーリングして、私たちのチームチャットに直接投稿できるWebhookに送信する簡単なサービスを作成できます。 最後はかなりシンプルで、以下のコードをすべて含めました。私はFirebaseの機能を使用しました - これは他のサービス機能サイトやSuperfeedrと同じように簡単だと思われます。 SuperfeedrはPubsubhubbub ping（現在WebSub）を聞くことができるサービスで、Pubsubが設定されていないRSSフィードもポーリングします。フィードが見つかると、新しく見つかったフィードデータをXMLまたはJSON形式で構成されたURL（私の場合、FirebaseのCloud機能）にpingを実行します。データを解析して何かをするだけです。 const functions = require('firebase-functions'); const express = require('express'); const cors = require('cors'); const fetch = require('node-fetch'); const app = express(); // Automatically allow cross-origin requests app.use(cors({ origin: true })); app.post('/', (req, res) => { const { webhook_url } = req.query; const { body } = req; if (body.items === undefined || body.items.length === 0) { res.send(''); return; } const item = body.items[0]; const actor = (item.

Ruth JohnがChrome OSに移行しました（一時的に）： The first thing, and possibly the thing with the least amount of up to date information out there, was enabling Crostini. This runs Linux in a container on the Chromebook, something you pretty much want straight away after spending 15 minutes on it. I have the most recent Pixel, the 256GB version. Here’s what you do. Go to settings. Click on the hamburger menu (top left) - right at the bottom it says ‘About Chrome OS’ Open this and there’s an option to put your machine into dev mode It’ll restart and you’ll be in dev mode - this is much like running Canary over Chrome and possibly turning on a couple of flags.

ムスタファは次のように書いている。 Tooling is complicated, we are a tooling focused industry, and they change so much. I have used maybe rough eight different tools, from Photoshop to Sketch. That’s before we add prototyping tools to the mix. This may be something we just have to accept. After all, type standards only really started to settle in the 90s, and typography is a 500-year-old discipline. Designers are still finding it difficult to prove the importance of the process.

Philip Walton氏は、ブラウザがタブをアンロードしたときの対応方法をChrome開発者がコントロールするために、Chromeチームが取り組んでいる新しいAPIについて深く掘り下げています。 Application lifecycle is a key way that modern operating systems manage resources. On Android, iOS, and recent Windows versions, apps can be started and stopped at any time by the OS. This allows these platforms to streamline and reallocate resources where they best benefit the user. On the web, there has historically been no such lifecycle, and apps can be kept alive indefinitely. With large numbers of web pages running, critical system resources such as memory, CPU, battery, and network can be oversubscribed, leading to a bad end-user experience.

Pete LePageは、Chromeのホーム画面に追加するという重要な変更について書きます Add to Home Screen changes If your site meets the add to home screen criteria, Chrome will no longer show the add to home screen banner. Instead, you’re in control over when and how to prompt the user. To prompt the user, listen for the beforeinstallprompt event, then, save the event and add a button or other UI element to your app to indicate it can be installed.

PinterestのPWAの概要 The verdict Now for the part you’ve all been waiting for: the numbers. Weekly active users on mobile web have increased 103 percent year-over-year overall, with a 156 percent increase in Brazil and 312 percent increase in India. On the engagement side, session length increased by 296 percent, the number of Pins seen increased by 401 percent and people were 295 percent more likely to save a Pin to a board.

デフォルトでは、Hugoは正しいコンテンツタイプの.mjsファイルを提供しません。実際、最近までhugoはMIMEタイプごとに複数のファイル拡張子を提供することはできませんでした。これは修正されたv0.43のように見えます。 [mediaTypes] [mediaTypes.“text/javascript”] suffixes = [“js”, “mjs”] 全文を読む。 上記のコードでは、正しいMIMEタイプのESモジュール用のmjsファイルを提供できます（メモモジュールは ‘text / javascript’で提供する必要があります）。これはローカルテストにのみ必要です。ホスティングは別の問題です:)

私はESモジュールについて昨日投稿した投稿を考えています I needed a quick way import a simple module get-urls into my project. The module is well tested and it does what I needed … ignore the fact that it’s pretty easy to implement in a couple of lines of JavaScript. The problem I had is that my project is built in ES6, uses modules and I didn’t want to have to bundle up using CommonJS (require). I couldn’t find a lot of guidance on what to do here, so I went to experiement and this solution is the solution I came across:

This DotのTracy Leeは、ブラウザのベンダーの多くが取り組んでいることの概要を示すために、かなりきれいなライブストリームを編成しました。 Browser representatives from Brave, Beaker, Edge, Chrome, & Mozilla get together to talk about recent updates and the state of browsers. Featured Speakers: Brendan Eich -  Creator of Javascript, Co-founder & CEO at Brave Software Paul Frazee - Works on Beaker Browser Matthew Claypotch - Developer Advocate at Mozilla Paul Kinlan - Senior Developer Advocate at Google Patrick Kettner - Edge at Microsoft Amal Hussein - Senior Open Web Engineer at Bocoup Tracy Lee - GDE, RxJs Core Team, This Dot Co-founder 全文を読む

Sam Thorogoodからのメッセージ： You’ve designed a webapp, built its code and service worker, and finally added the Web App Manifest to describe how it should behave when ‘installed’ on a user’s device. This includes things like high-resolution icons to use for e.g. a mobile phone’s launcher or app switcher, or how your webapp should start when opened from the user’s home screen. And while many browsers will respect the Web App Manifest, not every browser will load or respect every value you specify.