概要 この記事では、サーバーコストを一切かけずにブラウザだけで動作するリアルタイム対戦ゲームを開発した際の、技術的な裏側をご紹介します。WebRTC (PeerJS) によるP2P通信を主軸に、マッチングを仲介するシグナリングサーバーをRender、フロントエンドをGitHub Pagesにデプロイすることで、完全無料で遊べるブラウザオセロゲームを実現しました。 ゲームをプレイする: https://kinn00kinn.github.io/osero_p2p_front.github.io/ フロントエンド (GitHub): https://github.com/kinn00kinn/osero_p2p_front.github.io マッチングサーバー (GitHub): https://github.com/kinn00kinn/osero_p2p_render はじめに 皆さんは
オンラインイベントで聞かれて、ツイッターにつぶやいたら思った以上に反響があったので、もう少し詳細に書いてみます。 思ったより反響があったまとめ信頼できる暗号ライブラリがある自分が TypeScript より Go のほうが書けるGo の Wasm バイナリサイズを気にする必要がないWebCrypto にない暗号が必要自社の WebRTC SFU において End to End Encryption (E2EE) をブラウザ上で実現するためにはいくつかの壁がありました。 一つは WebCrypto が提供していない暗号を利用したいというものです。 今回 E2EE を実装するにあたり採用した Signal プロトコルでは公開鍵暗号に Curve25519 を採用しています。残念ながら WebCrypto では Curve25519 に対応していません。この時点で「暗号ライブラリをどこからもって
I try to keep a vague list of "technologies to try out" handy at all times. Usually things come and go from the list pretty quickly, but I've had a few that have been stubbornly persistent for quite a while now: Rust (at least for a big project)The Raft algorithmWebAssemblyWebRTCAt some point, I had a bright idea: "Why not knock out a bunch of them at once?" And thus WRaft was born. It's a Raft im
Intro ブラウザの持つ Video/Audio コーデック実装へアクセスする API として WebCodecs の仕様策定と実装が進んでいる。 これにより、映像や音声の変換などといったユースケースへの応用も可能だ。 本来なら WebCodecs 単体の API について解説するところだが、筆者がこの API を待っていた理由であるところの「WebRTC の代替」としての WebCodecs/WebTransport の応用に注目し、背景も踏まえて解説する。 WebRTC WebRTC は UDP 上に DTLS で交換した鍵を用いて、RTP を SRTP で流し、そのシグナリングに SDP を、ホールパンチに ICE(STUN/TURN) を用いることで、P2P ビデオチャットといったユースケースを可能にした API だ。 しかし、最初から「P2P ビデオチャット」というユースケース
Alternatives 結局 WebSocket が TCP に縛られていなければ良いのではという点に注目すると、WebSocket over HTTP/3 が実現できれば HoLB などの問題は解決しそうだ。 しかし、仮にそこに複数のストリームを束ねようとしても、WS の特徴上ストリームごとに 1RTT のハンドシェイクが必要となる。また、サーバから Stream を開始することができない(本当にそれが必要なのかは疑問だが)という問題があげられている。 また、WebRTC の文脈で進んでいる RTCQuicTransport が、非常にというかあるケースではほぼ同じことを提供することになる点が指摘される。(策定者も同じ) これもやはり、WebRTC が P2P 前提の仕様でスタートした点と Client-Server ユースケースとの乖離をベースに説明されており、すでに RTCQuic
WebRTC の機能でローカル IP アドレスを含んで IP アドレスを収集するという機能がある。それを悪用することでローカル IP アドレスを知ろうとするウェブサイトがある。 最近見つけたサイトだと、えきネットがやっている。えきネットは早めにこの仕組を撤廃したほうがいい。 JavaScript を見たところ見事に IP アドレスを収集している部分でなにかしようとしている。 WebRTC を悪用するのを本当にやめてほしいのだが、どうせ悪用するサイトは減らないだろうし、その絶対的な対抗策を書いていきたい。 技術的な話は一番下にリンクを張ってあるので興味がある人は読んでもらいたい。 mDNS 機能を利用して防ぐChrome M73 から入った機能で mDNS 対応というのが WebRTC の機能として入る。これはローカル IP アドレスはすべて UUID.local と変換してしまう機能だ。
Intro Apple が Alliance for Open Media に加盟したという報道があった。 もし、このまま Safari が AV1 をサポートするまで至れば、WebRTC のコーデック戦争に一旦の落ち着きが出ると思われる。 Apple joins alliance to shrink your online videos - CNET この動向について解説する。 WebRTC Codec WAR WebRTC によって、動画/音声をやり取りする際に、ブラウザはどのコーデックをサポートするべきかという問題があった。 特に動画については以下のような要件が求められる パテントフリー 圧縮効率率/計算速度 etc ハードウェアエンコーダサポート 普及率 パフォーマンス要件は確かに無視できないが、Web において最も重要なのはやはりパテントの問題である。 そこで、パテントフリーを謳
Intro 新年早々、Blink Dev で Unified Plan の Intent to Implement という嬉しい知らせが届いた。 Intent to Implement: WebRTC Unified Plan SDP SDP の互換性についてインパクトの大きいこの変更について簡単に解説する。 Update 実装が進み SdpFormat は sdpSemantics に変わったため、記事を修正。 PSA: Unified Plan SDP testing flag is now available on Canary PSA: RTCRtpTransceiver shipping in M69 behind sdpSemantics:'unified-plan' なお、以下のフラグを付けて起動するとデフォルトで有効にできる。 --enable-blink-features
SkyWayはビデオ・音声通話が簡単に実装できる、マルチプラットフォームなSDKです。
WebRTC開発者にはたまらない！徹頭徹尾、デベロッパーファーストだった「SkyWay Developer Meetup#1」 白石 俊平（HTML5 Experts.jp編集長） 9月29日に開催された、SkyWay初の開発者向けミートアップ「SkyWay Developer Meetup#1」。 2013年12月からトライアルサービスとして提供されてきたWebRTC Platform SkyWayのビジョンとミッション、基本的な使い方からハックな使い方などが紹介された同イベントの模様を紹介する。 SkyWayのビジョン＆ミッション 2013年12月から、無償のトライアルサービスとして提供されてきたWebRTC Platform SkyWay（以下、SkyWay）。 一部では「WebRTCでサービス開発を行うならSkyWayが必須」と認識されつつある昨今、ついに2017年9月7日、商用サ
すべての始まり スマホの方がキーボードより入力しやすいからスマホでPCにテキスト打ち込めるツールがほしいというリプを、おそらく学生のフォロワーさんからいただき、朝から戦慄してる — SHARP シャープ株式会社 (@SHARP_JP) September 20, 2017 この問題は、学生である私が対応しなければならないと思い、１時間で作ることにしました。 フリック入力くん http://axis06.main.jp/key/ スマホからパソコンへフリック入力でレポートがかけるサービスを作りました。今回はこれを作成しました。 iOS11からSafariにて公式にWebRTCが対応なる。 IE以外の対応は終わっていきましたね。WebRTCの時代は始まりそうです。 WebRTCとは WebRTCはWeb上でも端末同士でのP2Pを行うことができるAPIの定義です。 音声、映像、テキストデータなど
Slack is gunning for Skype and Google Hangouts with the 2016 product roadmap it revealed today. The biggest change coming: the ability to seamlessly turn a text chat into a voice or video chat will begin testing “very soon”. This builds on Slack’s January 2015 acquisition of Screenhero, when it said these features would eventually be released. Slack Calling Is Here – Check Out The Full Article [Up
Intro 個人的には HTTP2 と ORTC/WebRTC と Service Worker 周りさわって、 JS と Go を書いてる一年だった。 Extensible Web - Progressive Web APP Extensible Web で始まった話が、様々な API の設計に適用された。 結果手に入った Service Worker を始めとする Low Level API を組み合わせて、もう一度モバイルと Web の関係を見直す Progressive Web App まで進み、 Web の形が見直された年だった。 Extensible Web の夜明けと開発者が得た可能性の話 - Block Rockin’ Codes HTTPS また、 HTTPS の重要性の認識が、啓蒙からデプロイまで降りたという印象。そして、待望だった Let's Encrypt がついに
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます いま、ウェブブラウザ上でビデオ通話などを実現する技術「WebRTC」を取り巻く環境が、今静かに熱くなっているのをご存知だろうか。 例えばAppleは、10月20日にWebRTCエンジニアの求人を開始し、その事実をブログ「THE NEW DIAL TONE」が記事として取り上げている。 Microsoftも大きな動きを見せている。Microsoftは、（従来提供してきたInternet Explorerに代わる）ウェブブラウザ「Microsoft Edge」の最新版で、WebRTCと非常に関連の深いORTC（Object RTC）を搭載した。また、同社が提供するSkypeについても、同技術を採用したSDK（Software Develop
サイマルキャストはWebRTCになぜ必要なのか？W3C TPACで交わされたもっとも重要な議論を解説する 岩瀬 義昌（HTML5 Experts.jp編集部） 2015年10月26日から30日にかけて、札幌で「TPAC2015」が開催されました。本記事はその中でも、29日と30日に開催されたWebRTCワーキンググループの議論をレポートします。 TPACとは? TPACとは、Webの標準化団体であるW3C(World Wide Web Consortium)が開催する1週間のイベントのことです。様々な国、様々な企業からメンバーが集まり、現在のWeb標準・将来的なWebの機能(例えば、cryptoやaudio)について議論します。今回は、札幌開催であり主要なWebRTC仕様策定者が一同に日本に集結しました。 最大の議論の焦点となったサイマルキャスト WebRTCのW3C側の仕様は、まだCR(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く