はてなブックマーク

はじめに 最近色々なWeb会議システムを使うことが増えました。未経験だったZoomや、久しぶりにSkypeも使ってます。 Zoomのバーチャル背景が人気ですが、確かに便利です。が、残念ながら私の仕事で標準のGoogle Meetでは、まだ使うことはできません。 Snap Cameraや、OBSなどOSで仮想カメラとして認識されるアプリを使えば可能ですが、そこはWebシステムなのでJavaScriptでなんとかしたいですよね。そこで無理やりやってみた、という話です。(Chrome限定です） Chrome ウェブストアで公開しました こちらの拡張機能を公開しました(2020.06.03) Chrome Virtual Camera ※種類やファイルを指定してから、映像を取得してください。Google Meetの場合はカメラを一旦オフにして、再度オンにしてください 使える材料 tensorflo

はじめに Web上でリアルタイム通信するためのWebRTCは基本的な仕様は揃って来ていますが、今もより低レイヤーな部分を触るための仕様やAPIが提案されています。 今回はその1つである、Insertable Streamsについて体験してみました。 参考： https://webrtchacks.com/true-end-to-end-encryption-with-webrtc-insertable-streams/ 仕様のEditor's Draft: https://w3c.github.io/webrtc-insertable-streams/ ※2020.08.31 最新仕様に合わせて更新 Insertable Streams とは データに触れるタイミング メディアをWebRTCで送信するまでには、おおざっぱに言って次のステップがあります。（映像の場合） (S1) メディアから

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 最近Microsoft Graph APIについて調べる機会がありました。この記事はその中から一般的な範囲についてまとめたものです。 AzureもAD(Aictive Directory)もGraph APIも詳しくないので誤りがあるかもしれません。間違いを発見されたらコメントや編集リクエストをお待ちしています。 Microsoft Graph APIとは ざっくり言うと、Officie 365 や Azure ADなどの情報を検索、更新できるWeb API。例えば次のようなリソースにアクセス可能（許可を与えれば） ユーザー

はじめに 2019年のre:Inventで、Amazon Kinesis Video Streams （以後KVSと表記) に WebRTCを使ったリアルタイム通信が加わりました。 ブラウザ(JavaScript)向けのSDKだけでなく、組み込み用途のC言語SDKや、iOS/Androidといったモバイルアプリ向けのSDKがあるのが特徴です。 Web用SDK ... https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-js 組み込みC用SDK ... https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-c iOS用SDK ... https://github.com/awslabs/amazon-kinesis-video-st

はじめに 先日 Google Cloud Next で発表された Cloud Run を動かしてみました。実際にやってみて、想像と違ったところもあるのでまとめておきます。 参考にしたサイト Cloud Run を最速で触ってみる Cloud Run documentation Cloud Run とは Cloud Run は自分で作ったコンテナを、Googleが用意したサーバー環境上で動かすことができます。http(s) の口を持ったWebサイト/Web APIサーバーを手軽に作れて、スケーリングも勝手に面倒見てくれます。 一方、コンテナを使っているからと言っても何でもできるのでなく、Webサーバー以外のサービス（RDBや、ストレージサービスなど）を動かすのには適していません。 Cloud Run を使うには、次のステップを踏む必要があります。 準備 コンテナのビルド コンテナのデプロイ

はじめに 「RubyでつくるRuby ゼロから学びなおすプログラミング言語入門」(ラムダノート, Amazon) という本に感銘を受けて、自分でもNode.jsで小さなプログラミング言語を作ってみるシリーズをやってみました。「ミニインタープリター」「ミニコンパイラー」ときて、三部作(?)の最後はミニNode.jsからWASMを生成する小さなコンパイラーに取り組んでいます。 前提環境 今回は私の環境である macOS 10.14 Mojave を前提にしています。また Node.js v10.13 で動作を確認しています。 Node.js-WASM コンパイラー目次 WASM コンパイラー - 01：WASMで定数戻り値を返す ... シンプルに整数値を返す実装と、WASMをNode.jsから実行 WASM コンパイラー - 02：四則演算を実装する ... 四則演算と、余りを実装 WASM

この記事は WebAudio Web MIDI API Advent Calendar 2016 の21日目です。 ※ μ-Lawの表記など誤りがあったので訂正しました（2017.03.14） あらすじ WebAudio の ScriptProcesser を使って原始的な手法で音声の圧縮を実験してみたところ、現代の音声圧縮コーデックのMP3やAACの凄さを思い知りました。 WebAudioのデータ量 WebAudioで音声をデータとして取得するには、ScriptProcessorを使いますよね。その時の1秒当たりのデータ量はどれくらいでしょうか？ サンプルリングレート まずサンプリングレートを確認してみましょう。 var ctx = new window.AudioContext(); console.log(ctx.sampleRate); 実行してみたところ、環境によって異なることが

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

はじめに 「PythonのWebRTC実装aiortcと、物体検出のYOLO v3の連携を試みる」では、PythonのWebRTC実装であるaiortcとdarknetのYOLOv3を無理やり連携させました。フレームごとにYOLOv3を呼び出していますが、処理に1秒以上かあるため映像が止まってしまうという致命的な問題がありました。 今回は検出頻度を落としてYOLOv3をワーカースレッドで動かすことで、映像を止めないことを目指してみました。 Pythonでのスレッド処理、非同期処理 Pythonでスレッド処理はどうしたらよいのか途方に暮れていたところ、こちらの書籍を発見しました。さまざまな方法を紹介していてとても参考になりました。 エキスパートPythonプログラミング 改訂2版 この本によるとPythonによる並行処理は複数のモデルがあり、それぞれ特徴がことなるようです。 マルチスレッド

はじめに 「RubyでつくるRuby ゼロから学びなおすプログラミング言語入門」(ラムダノート, Amazon) という本を手を動かしながら読んで、非常に感銘を受けました。そんなおりに PythonでつくるPythonという記事を読み、自分でもNode.jsでミニNode.js作りにチャンレンジすることにしました。 予想以上に手間取り端折った部分もありますが、なんとか最後はブートストラップまで行くことができました。 目次 ミニインタープリター編 Step1：ソースのパース ... 初めての esprima Step2：単純化 ... 抽象構文木(AST)を単純化 Step 3: +演算子を評価する ... 足し算を実行 Step 4: 四則演算で電卓を作る ... 電卓を作るところまでと、比較演算子の実装 Step 5: 変数を使う ... 変数の宣言、代入、参照 Step 6: 条件分岐

はじめに Oculus Goを入手してからWebVR開発を始める過程で、調べたことをまとめます。 前提 私はAndroid 開発はまともにしたことはありません。またWebVR(HTML/JavaScript)の開発を目的としていて自分のマシンのディスクの空き容量も少ないので、できればAndroidの開発環境(Android Studio)は導入せずに済ませたいと思い試行錯誤しました。 Oculus GoをMACアドレス制限をかけたWiFiに繋げたい Oculus GoのMACアドレスを調べたい 私が普段使っているWiFiは、MACアドレスに制限をかけています。新しいガジェットを手に入れるたびにMACアドレスを調べて登録するところが一仕事です。Oculus Goの場合は次のステップが必要ということがわかりました。（[OculusGo] Wi-FiのIPアドレスとMACアドレスを確認するより）

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Oculus Go のブラウザはChromiumをベースにしていてWebGLに対応しています。WebVRのライブラリであるA-FRAMEを使うことで、WebVRを利用することができます。 参考： Oculus GoのブラウザについてのWeb開発者目線からのまとめ また、リアルタイム通信のWebRTCが使えることも、@gtk2k氏たちの実験で判明しています。 Oculus Go お持ちの方、Oculus GoのブラウザーがWebRTC及びgetUserMediaをサポートしているか調べたいですので、Oculus Goのブラウザー

これは2017年WebRTCアドベントカレンダーの22日目の記事です。 はじめに WebRTCで映像配信をする際に、映像から自分の姿を消し去りたいというニーズがあります（私には）。特にTHETA Vなどの360度カメラの場合、どこに居ても自分が写り込んでしまいます。これを、居なかったことにしようというのが、今回の取り組みです。 厳密に言うと今回はP2P通信の手前までの話なので「WebRTCじゃない」とツッコミたくなると思いますが、そこはWebRTC通信を前提とした話として、多めに見ていただけるとありがたいです。 やりたいこと 基本的な流れ (1) カメラ映像を取得、video要素に表示 (2) いったん横に避けた状態で、video要素からスナップショットを静止画として取得 (3) Canvasで合成 Canvasに(1)の映像を転写 そこに領域を指定して(2)の静止画の一部を合成し、自分の

（私の考える）WebRTCの範囲 WebRTCって何を指すのか？というのが時々話題になります。そこで私が考えるWebRTCの範囲をAPIと通信仕様に分けて整理してみました。 間違っているところを見つけたら、ぜひコメントにてご指摘ください！ API プラウザ用API ブラウザ用APIはW3CのWeb Real-Time Communications Working Groupで策定中です。その一覧と、私の解釈を書き出してみます。 WebRTC 1.0: Real-time Communication Between Browsers ... 狭義のWebRTCで、このファミリーの主役。いわゆるPeerConnectionのことで、堂々のNo.1のポジション Media Capture and Streams (getUserMedia) ... ファミリーのNo.2。いわゆるgetUserM

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

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? WebRTC が iOS 11 にやってくる 先日のWWDC2017のキーノートで、こっそり重要な発表がありました。次のiOS 11で登場するSafari 11で、ついにWebRTCがサポートされます。こちらのキーノートの動画の92:46のあたりです。 正確には背景に文字が書かれていただけですが、WebRTCに関心があるみなさんの間で盛り上がりました。 その後、公式にもアナウンスが出ています。 Safari 11.0 リリースノート Media New in Safari 11.0 – Support for real-time com

はじめに この資料は、WebRTC入門者の会(2016.11.01)の発表資料です。 WebRTCについては、前回のハンズオンの資料をごらんください。 WebRTCハンズオン資料 INDEX - Qiita 自己紹介 がねこまさし（@massie_g） 仕事: インフォコム(株)の調査研究チーム Webの新しい技術担当 WebRTC, WebGL, WebVR とか コミュニティ WebRTC Meetup Tokyo 開催協力者 HTML5Experts.jp エキスパート デバイス一覧の取得 利用可能な映像/音声デバイスの情報が取得できる navigator.mediaDevices.enumerateDevices() を利用 Promiseを返す 成功すると、デバイス情報のアレイが渡される 取得できるデバイス オーディオ入力デバイス（マイク） ビデオ入力デバイス（カメラ） オーディ

※ Mac OS X / iOS のSafariは、2017秋のSafari 11から対応(H.264のみ)。(What's new in Safari) promiseベースの新しいAPIのみ対応 カメラ/マイクへのアクセスにはhttps:// 必須。Mac OS X の場合は開発者メニューから http://を使えるようにできる Edge：ORTCに対応、WebRTCにCreators Update(2017.04.11)で対応（参考記事)。STUN利用やDataChannelには未対応 ？：iOS / Android 向けEdgeのリリース予告あり。対応状況未確認 ×: IEはサードパーティプラグイン有 誰が決めているの？ API ... W3C ブラウザからどうやって使うか アーキテクチャ、通信の仕様 ... IETF 映像、音声のコーデック（圧縮方式） 実際のデータの送り方（プロ

はじめに WebRTCを使ったアプリを作る際に、切っても切れないのがカメラ映像の取得です。ノート型のPCで作業したりすると、延々と自分の顔を見続けなければなりません。そこで、自分の顔の替わりに好きな動画をメディアストリームとして流すサンプルを作って見ました。 仕組み 動画ファイルの変換 ユーザにローカルの動画ファイルを指定してもらう（ファイル選択 or ドラッグ＆ドロップ） FileオブジェクトからURLを生成 (window.URL.createObjectURLを利用） それをVideoタグで再生 継続的にCanvasタグに転写 (window.requestAnimationFrameを利用） CanvasタグからMediaStreamを取り出す (Canvas.captureStreamを利用） 音声ファイルの変換 ユーザにローカルの音声ファイルを指定してもらう（ファイル選択 or

はじめに WebRTCを使うと、ブラウザで手軽に映像、音声通信が始めることができます。そのために準備する必要があるものを、整理してみます。 （大規模なシステムを作るためには様々な困難が待ち受けていますが、それはまた別のお話） 1. Webブラウザ 何はともあれ、Webブラウザが無いと始まりません。 PCの場合 Chrome... Windows, Mac, Linux Firefox... Windows, Mac, Linux が試しやすいです。こだわり派はOperaでもOKです。 ※EdgeでもORTCが使えますが、ややこしいので今回は触れません。また、各種プラグインも出ていますが、それも今回は置いておきます。 モバイルの場合 モバイルでやりたい場合はAndroid版なら利用できます。残念ながらiOS版では利用できません。 Chrome... Android Firefox... An

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? #始めに 最近のHTML/JavaScriptの新機能を使うには、ファイルをブラウザで直接開くのではなく(file://～)、Webサーバーを立てて http://～ にブラウザでアクセスしなければならないケースが増えてきました。 そんな時にApacheやnginxを自分でセットアップできる人は問題ないのですが、そうでない人向けに「お手軽なWebサーバーの立て方」を整理してみました。 Visual Studio Code 拡張機能編 (2018.07.03追加) Chrome アプリ編 Windows アプリ編 Mac コマンドライン編

最終回では 最終回となる今回は、実際にJavaScriptクライアントライブラリを使ってみて気が付いた、小ネタについて書いてみます。 ライブラリ/SDKの使い方については、公式ドキュメントやGitHubのサンプルがあるので、そちらをご覧ください。 OpenTok WebRTC Client Libraries OpenTok Server SDKs GitHub上のサンプル 一般的なビデオチャットの場合 PeerConnectionの使い方 WebRTCの通信を司るPeerConnectionは、映像/音声を双方向にやりとりできます。したがって、1ペアにつき1つのPeerConnectionオブジェクトを使います。 内側を覗いてみると この時、Chromeのツール chrome://webrtc-internals で見ると、次のようにsend/recv(送信/受信)が2つずつ(映像と音声

はじめに WebRTCを実際にサービスで使おうとすると、シグナリングやNAT越え、さらにiOS対応や複数人での通話の負荷など、考えなければならないことが多々出てきます。それを解決するプラットフォームやサービスとして、例えば次のようなものがあります。 Skyway (by NTTコミュニケーションズ) opentok (by tokbox) Skylink (by Temasys) この中で最も利用事例が多い有償サービスであるopentokについて、今更ながら調べてみました。今回は基礎編として、公開情報から基本的な内容をまとめます。 対応しているクライアント環境 出典：　tokbox.com/platform Windows/Macの Chrome, Firefox WindowsのIEはプラグインを提供 AndroidのChrome, Firefox iOSネイティブ向けSDK (iOS

はじめに この記事は milkcocoa Advent Calender 2014 の記事です。同時に WebRTC Advent Calendar 2014 の記事でもあります。milkcocoaから来た人には「WebRTC とはなんぞや？」という感じだと思います。そんな場合は、WebRTCぼ1日目の記事を先ずご覧ください。 WebRTCコトハジメ http://qiita.com/Tukimikage/items/286f569d110daede721e シグナリング、シグナリング、シグナリング しつこく、WebRTCのシグナリングねたを続けます。 「そこにメッセージングの仕組みがある」ならば、シグナリングをやりたくなるのが人情です。 milkcocoa 登場 milkcocoa は、リアルタイムメッセージングのためのBaaSです。Socket.IOを使っていて、docker上に構築さ

はじめに WebRTCでFirewall/NATを越えて通信するために、TURNと呼ばれる仕組みを使います。80/TCPや443/TCPしか通さないFirewall越しでも、TURN over TCP を使えば、壁を越えて通信することができます。 これでめでたしめでたし、だと思っていたのですが、自社内でFirewallを越えられないケースがありました。その1つケースでどうやら原因が判明したので、ここにまとめておきます。 TURN over TCP を利用するには TURN over TCP が利用できるのは、今のところ Chrome だけのようです。Firefoxでは（私の知る限り）まだ利用できません。こちらのNYのイベントの資料の22,23ページでも、Firefoxでは上手く動かないと記述されています。 TURN over TCP を使うためには、PeerConnectionを生成する際

< m=audio 1 RTP/SAVPF 111 103 104 0 8 106 105 13 126 --- > m=audio 64980 RTP/SAVPF 111 103 104 0 8 106 105 13 126 > a=candidate:2999745851 1 udp 2122260223 192.xxx.xxx.xxx 64980 typ host generation 0 > a=candidate:2999745851 2 udp 2122260223 192.xxx.xxx.xxx 64980 typ host generation 0 > a=candidate:2747735740 1 udp 2122194687 192.xxx.xxx.xxx 64981 typ host generation 0 > a=candidate:2747735740 2 u