Stockmark ( https://stockmark.co.jp ) 社内勉強会の資料公開です。

データプラットフォームサービス部の花川です。 普段はSDPFのメニュー開発をしていたり、社内のイベントとかに趣味で首を突っ込んでいます。 最近では Software Design 7月号のISUCON特集に社内メンバーと寄稿したりしました。 NTTコミュニケーションズの開発者ブログはこのたび NTT Communications Engineers' Blog としてリニューアルしました。 今日は「開発者ブログ」を「Engineers' Blog」としてリニューアルするきっかけについてのお話です。 開発者ブログのこれまで もともとdeveloper.ntt.comで運営されていた開発者ブログは、2015年6月頃に開始されました。 最初の記事は "開発者ブログはじめました" でした。 当時はNTT ComでAPIゲートウェイを提供し始めた頃であり、実はこの開発者ブログは弊社のAPIドキュメン

フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5

最近ちまたでは、リモート会議や飲み会で、自分のカメラ映像をsnapCameraで面白おかしく加工するのが流行っています。 映像だけでなく、声も加工したくなるとき、ありますよね？ ・・・ありますよね？（・・・きっとあるから読んで頂けているはず。） 自分の声を加工するためには「バ美声」などのボイスチェンジャーアプリと仮想オーディオデバイスが必要です。しかし、これらを用意するには手間がかかるし、仮想オーディオデバイスは割とトラブルがつきものです。。。 そこで、手間無しで、トラブルに悩まされることも無く、誰でも簡単にボイスチェンジ出来る、ボイスチェンジャー付きボイスチャットアプリを作ってみることにしました！！ 必要な材料 SkyWay ボイスチャットアプリを簡単に実装できるSDK & API Tone.js Web Audio APIを簡易に扱うことができるフレームワーク。音の生成や加工が簡単にで

SkyWay ConferenceはSkyWayを利用したのブラウザ上で動作するWeb会議デモアプリです。OSSとして公開されています。 今回はSkyWay Confを改造して文字起こし機能をつけてみました！ Web会議アプリに文字起こし機能がついてると、出先でイヤホンを忘れてもなんとかなるかもしれません。　議事録も自動で出来て素晴らしいですね。 左上の窓で文字起こし関連の操作が出来て、画面中央下部に書き起こされた文字が表示されるようにしました。 できたもの まずデモアプリはこちら。Chromeで開いてください！ 文字起こし機能つきSkyWay Confのデモページ https://shinyoshiaki.github.io/skyway-conf ソースコードなど 文字起こし機能つきSkyWay Confのソースコード https://github.com/shinyoshiaki/s

概要 ビデオチャットのSkyWayに物体検出をいれて、リアルタイムで物体検出しながら ビデオチャットをする謎のビデオチャットです。 できたもの https://yolo-videochat.ga #ProtoOut pic.twitter.com/bjZZPddXEY — 3yaka (@3yaka4) June 11, 2020 概要 SkyWayで作ったビデオチャットに機械学習のTensorFlow.jsを優しーく包んでくれたml5.jsのYOLOを使って物体検出をさせ、PoseNetを使ってプライバシーを配慮した目線をかくすものをつけました。 人物に四角がついてその上にPersonと出て、左目から右目にかけて線が入ります。 1. SkyWayを使って webRTC Javascript SDK | API Reference | SkyWay(アプリやWebサービスに、ビデオ・音声通

なんとなくアテはついてたけど、中身が気になるという話を聞いたので調べてみた。 WebRTCやってるみなさんならお馴染みのあのページです。 chrome://webrtc-internals WebRTCのデバッグといえばこのページ。 特に何も仕込んでないのに、見てるページで`getUserMedia()`したり`RTCPeerConnection`が作られればその様子が見えるし、実際に流れてるメディアやデータのことまでわかる。 あれってどういうしくみ？っていうのを調べていきます。 ただのWebページ URLが`chrome://`になってるけど、れっきとしたWebページです。 なのでDevToolsでNetworkタブ見ればだいたいわかる！というわけで。 構成要素はこんな感じ。 webrtc-internals.html ただのHTML/CSS 以下の2つのJSを読み込んでる util.j

Presented by Yoshiya Ito and me, Takeshi Matsuda at "ServerlessDays Tokyo 2019"

トピックとしてはまったく目新しくないけど、そういやまとめてないなと思ったのでメモ。 TURN RFC 5766 - Traversal Using Relays around NAT (TURN): Relay Extensions to Session Traversal Utilities for NAT (STUN) `Traversal Using Relays around NAT`ってやつ。 P2Pの場合、各エンドポイントにはそれぞれの都合があって、簡単につなげないこともある。 ざっくり言うと、たとえば特定のプロトコルが使えないとか、ポートが空いてないとか、変なプロキシがいるとか。 そんなときにいったんグローバルにいるTURNサーバーを中継することで、厳密なP2Pではなくなるけど、接続成功率が上がったり、通信経路を固定化できたり、場合によっては通信の品質も安定したりする・・スル

はじめに 9月4日から18日の2週間、NTTコミュニケーションズでインターンシップをさせていただきました。この記事では、インターンシップの体験記として、どのようなことをしたのか、職場の環境はどんな感じなのかを紹介したいと思います。 概要 今回私は、NTTコミュニケーションズ技術開発部　WebCoreチームでWebRTCプラットフォームSkyWayの開発・運用に関する仕事をしました。勤務先は浜松町にあるLAB(Lean Agile Base)でした。NTTコミュニケーションズのオフィスは、他に大手町や田町にもあります。 developer.ntt.com インターンのきっかけ SkyWayチームでインターンシップとかあったりするんだろうか… WebRTCガッツリできるインターンシップって見たことないかも…— sublimer (@lz650sss) 2019年5月15日 「できたら嬉しいな」

rtcstats-wrapperとは？ WebRTC統計情報のブラウザ標準化 WebRTC統計情報の瞬間値計測 WebRTC統計値の定期監視 を実現したRTCStatsのラッパーです。 リポジトリ: https://github.com/skyway-lab/rtcstats-wrapper ドキュメント: https://skyway-lab.github.io/rtcstats-wrapper/index.html 背景 WebRTCでは、送受信されているメディアのパフォーマンスやネットワーク環境を監視するための統計情報を規定しています。 WebRTCを使用しているWebアプリ開発者なら、 1. ブラウザからWebRTC統計情報（Chromeならchrome://webrtc-internals）を確認して 2. dumpファイルをダウンロードして 3. https://fippo.g

こんにちは、ものづくり担当のうこ(@harmoniko)です。 連日猛暑が続きますが、暑さに負けず、ものづくりやってますかー？ 今回は、WebRTCを用いたサービスの1つであるSkyWayを利用した、遠隔操作可能でカメラの映像も見れちゃうロボットの作り方を解説します。 また、実際のラジコンは、Maker Faire Tokyo 2019のSkyWayブースにてデモ展示されます。 少し難しいところもありますが、ぜひチャレンジしてみてください！ 必要な部品

使いたかったので、ライブラリを書きました。 `enhanced-datachannel`という名前でnpmからインストールできます。 リポジトリはこちら。 GitHub - leader22/enhanced-datachannel: Wanna `enhance(RTCDataChannel)` for general usage. 以下、ざっくり紹介と、DataChannelそのものについて書きます。 enhanced-datachannel 3つの関数をエクスポートしてます。 `based()` `promised()` `chunked()` 型はこの通り。 export declare function based(dc: RTCDataChannel): BasedDataChannel; export declare function promised(dc: RTCData

6/3、サービス公開後の顛末を記事にしました 【コチラ】 タイトルはアオリです。ツイート内容を言語処理して年代・性別・収入などを推測するアプリを簡単に作るお話です。 作ったもの Nuxt.js + Express + COTOHAのユーザ属性推定API(β)で作ったお手軽Twitter分析アプリです Google App Engineに載せて誰でも使えるようにしてます。 ↓↓↓作ったものはこちら↓↓↓ https://tweet-analytics.com/ ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 5/21 16:00 追記: 基盤費用が一日60$を超えてしまっているため、投げ銭窓口をつけました。もし楽しんでいただけたら投げ銭頂けると大変助かります・・・ PWAにも対応しているので、例えばiPhoneのSafariで開き「ホーム画面に追加」というボタンを押すと、ネイティブアプリのように使うことが

JavaScriptでWebRTCやるための基礎知識 - console.lealog(); 春なので書きました。 言うなれば、これの2019年度版です。 はじめに 最低限のJavaScriptでWebRTCを扱うにあたり、どういうクラスがあって、どういうAPIを、どう使うのかについての記事です。 いわゆるフロントエンドのエンジニアがWebRTCを使ったサービスを作るなどの場合は、だいたい何かしらのSDKを使うと思います。 その場合はそのSDKのDocsを読めばそれで十分で、その先の仕組みを知る必要はないかなーと思います。 ただし、 SDKの中で何が行われてるか知っておきたい WebRTCのSDKを作る側である みたいな場合は、一読の価値ありかもです。 ようするに、弊社の新入社員のような人材のための記事です！ 基本的なWebRTCの仕組みみたいなパートはざっくり軽めにして、JavaScri

作ったもの 紙の書類などスキャンして管理してると ↓こんな感じでファイル名がカオスになりがち… そこで、今回のツールを一発たたくとこうなります。 何となく中身が推測できるようになりました。 このツールは何？ 請求書・名刺・Webページなどのpdf・画像ファイルの中身を読み取り、重要(っぽい)ワードで自動リネームするツールです。 内部では以下を行ってます。 ファイルをGoogle Driveにアップロード (G Suiteが理想) OCRされたテキストを抽出 重要部分をNTTコミュニケーションズの固有表現抽出APIで抽出 (企業名とかの専門用語辞書使うと精度上がるっぽいけど無料版だと使えない…) 日付、会社名、人名を結合したファイル名を作りリネーム 動作確認環境 Mac 10.14.3 Python 3.7.2 動かし方手順 1.ファイルをGoogle Drive APIでアップロードできる