【初心者向け】STUN/TURNサーバをざっくり解説してみた - Qiita
1 概要 サーバ & AWS 初めましてな初心者がAWS上にTURNサーバを構築することになりました。 ここでは、一から学んだSTUN/TURNサーバ周りの知識をわかりやすい言葉で解説します。 （ちなみにQiita記事作成も初めてです。それも含めて間違いなど見つけたらご指摘いただけると嬉しいです。） 2 STUNサーバ・TURNサーバはなぜ必要なのか？ STUNサーバとTURNサーバはどちらも「NAT越え」を可能にするために必要です。 「NAT越え」はP2PしたいPCが異なるネットワークにある場合に必要になります。 いろんな言葉が出たので、順番に整理します。 2.1 NATとは？ NATは対応するプライベートIPアドレスとグローバルIPアドレスを双方向に変換するもの。 この図だと、NATでは以下のような変換が行われる。 PC1のグローバルIPアドレス(111.111.111.111) →
OSSを使って独自のWeb会議アプリ(SkyWay Conf)を立てる方法 - Qiita
今日はWebRTCプラットフォームSkyWay(以下、SkyWay)の中の人として記事を書きます。 SkyWayのデモアプリとして公開していた、 SkyWay Conference (以下、SkyWay Conf)というWeb会議アプリのソースコードを、オープンソースソフトウェア(以下、OSS)として公開しました。 https://github.com/skyway/skyway-conf 新型コロナウイルス感染症の影響で、様々なコミュニケーションがオンラインで行われるようになりました。誰もが、オンラインで、取りたい時に自由にコミュニケーションが取れるように、SkyWayとして出来ることを考えた結果、今回のOSS公開に至りました。詳しくは、 SkyWay公式のお知らせをご覧下さい。 この記事では SkyWay Community Editionと組み合わせたSkyWay Confの動かし方
手動でWebRTCの通信をつなげよう ーWebRTC入門2016
こんにちは！ がねこまさしです。2014年に連載した「WebRTCを使ってみよう！」シリーズを、2016年6月の最新情報に基づき、内容をアップデートして改めてお届けしています。1回目はカメラにアクセスしてみました。2回目となる今回は、WebRTCの通信の仕組みを実感するために、「手動」でP2P通信をつなげてみましょう。 WebRTCの通信はどうなっているの？ WebRTCでは、映像/音声/アプリケーションデータなどをリアルタイムにブラウザ間で送受信することができます。それをつかさどるのが「RTCPeerConnection」です。 RTCPeerConnectionには3つの特徴があります。 Peer-to-Peer(P2P)の通信 → ブラウザとブラウザの間で直接通信する UDP/IPを使用 → TCP/IPのようにパケットの到着は保障しないが、オーバーヘッドが少ない PeerとPeer
WebRTCを試すときにオッサンが映り続ける問題に対処する - Qiita
はじめに WebRTCを使ったアプリを作る際に、切っても切れないのがカメラ映像の取得です。ノート型のPCで作業したりすると、延々と自分の顔を見続けなければなりません。そこで、自分の顔の替わりに好きな動画をメディアストリームとして流すサンプルを作って見ました。 仕組み 動画ファイルの変換 ユーザにローカルの動画ファイルを指定してもらう（ファイル選択 or ドラッグ＆ドロップ） FileオブジェクトからURLを生成 (window.URL.createObjectURLを利用） それをVideoタグで再生 継続的にCanvasタグに転写 (window.requestAnimationFrameを利用） CanvasタグからMediaStreamを取り出す (Canvas.captureStreamを利用） 音声ファイルの変換 ユーザにローカルの音声ファイルを指定してもらう（ファイル選択 or
SENSEI NOTEのWebRTC導入事例─Opentokで安定したビデオチャットを提供する
はじめまして、LOUPEの末永です。本記事では、私たちが運営している先生専用SNS「SENSEI NOTE」でのWebRTC導入事例について、ご紹介させていただきます。 全国の先生がつながるSENSEI NOTE SENSEI NOTEは「全国の先生がつながる」をコンセプトにした先生専用SNSです。招待もしくは申請制で、小学校から高校までの学校の先生が、ご利用いただけます。サイトの中では先生が他の先生とのつながりを作れたり、学校で起きている課題の相談や、授業のTips共有をすることができます。 SENSEI NOTEでは、テキストやファイルベースのナレッジ共有が主たるものでした。しかし、悩みや課題は誰かと話をすることで本当の課題や解決策は見えてくるものですし、全国には小規模学校で同じ科目を教える先生が一人だけだったり、地理的に他の学校との隔たりが多い学校もあります。そのような状況で、ビデオ
Slackにおける音声通話機能のWebRTC観点からの解析
はじめに 2016/3/3より、Slackに音声通話機能が搭載された。 試しに使ってみたSlackユーザもそれなりにいると思う。 Slack音声通話機能の対応クライアントは、現時点では限定的だ。Slackの設定画面の一文を引用すると Currently on Mac and Windows desktop apps and in Chrome; coming soon to mobile! の通りで、Chromeまたはデスクトップのネイティブアプリとなる。 音声機能が実装されていてこの種類の対応状況なら、もちろん利用技術はWebRTCと考えるのが素直だ。(しかもWebRTCベースのスタートアップであるScreenHeroを買収していることもあり) ここで、最も気になるのは内部でWebRTCをどのように利用しているか、という点だ。 すでに、WebRTCエンジニア御用達のWebRTCHacks
Electron で desktopCapturer と WebRTC を使ってリアルタイム配信するアプリを書いた - Qiita
Electron v0.36.0 から使えるようになった desktopCapturer モジュールと WebRTC を使ってリアルタイムに配信するアプリを書いていたのですが、 最低限動くものができたので公開しました。 https://github.com/yuitowest/decap 追記(2016/1/20) パッケージングしたものを公開しました。 https://github.com/yuitowest/decap/releases/tag/1.0.0 右上の歯車アイコンからチャンネルIDと配信用トークンを設定できるようにしてあります。 チャンネルIDと配信用トークンを設定していない場合は配信開始できないようになっています。 使用した技術
Electronで次世代キ○タマを作った - Qiita
どうも、Electronを触っているけど頑なにAtomエディタは使わない @Quramy です(Vim好きだからね！). 何年も前に一世を風靡したAntinnyよろしく、5分毎にデスクトップのキャプチャを取得し、画像をTwitterにuploadするアプリケーションを作成しました. Quramy/electron-disclosure このアプリを使って、作成されたツイートが下記です： Captured by https://t.co/Iiwtinz3f7 at Sun, 31 May 2015 08:46:49 GMT pic.twitter.com/jS09qh8cqs — quramy_dev (@Quramy_dev) 2015, 5月 31 このエントリでは, electron-disclosureを作成する上で利用したElectronのちょっとしたTipsを紹介したいと思います
WebRTCセキュリティレポート · A Study of WebRTC Security
WebRTCセキュリティレポート あらまし WebRTC(Web Real-Time Communication)は、Webアプリケーション技術の昨今のトレンドの一つだ。WebRTCを利用すると、プラグイン無しで、また他の条件も無しでリアルタイムコミュニケーションを実現できる。だが、そのオープンソースとして性質から、WebRTCを採用しようとする人がセキュリティ上の不安を覚えることもあるだろう。本レポートはWebRTCのセキュリティについて明らかにし、他の技術と比較してWebRTCのセキュリティが優れていることを解説する。 1. 導入 WebRTCはオープンソースのWebベースの技術であり、ユーザがリアルタイムメディア通信を、プラグイン無しで実現可能な技術だ。適切なブラウザを利用すれば、ウェブサイトをブラウズするだけで、他者に発信して通話することができる。 WebRTCの主なユースケースは
WebRTCによるビデオチャットサービスの開発 - Qiita
はじめに Webで使えるビデオチャットサービスを開発しましたので、システム構成や使用したフレームワークやサービス、開発のポイントなどまとめてみました。 (去年にはQiitaの投稿を作っていたのですが、下書き保存したまま忘れて今頃の投稿になってしました。。) 月々のランニングコストは1000円以内、開発工数は1人月以内で作成しています。 WebRTCが出てきたおかげで、かなり容易にビデオチャットサービスが開発できるようになっていますので、よければ参考にしてください。 開発のポイント、コードだけでなく、開発の動機から、システム構成を決める為、開発前後に行ったビデオチャット関連の技術調査なども載せています。必要最小限の事だけ把握したい方はその辺りは読み飛ばしてください。 開発ビデオチャットサービス: ビデオチャッターズ (http://videochatters.net/) 開発動機 5～6年ぐ
スプラトゥーン用のボイスチャット作った – mzsm.me
皆さん、スプラトゥーンやってますか!? お気に入りのブキはデュアルスイーパー、シオカラーズはホタルちゃん派のmzsmです。こんにちは。 スプラトゥーンは去年のE3のNintendo Digital Eventで初めて披露された紹介映像を見た瞬間に心をわしづかみにされて、それからずーーーーっと楽しみにしてたタイトルなので、今遊べているのがほんと嬉しいですね。 ちょうどいま、今年のE3が開催中なわけですから、あれからもう1年経ったんですねぇ…早いなぁ…。 Twitterの僕のTL上では、主にIT系のエンジニアを中心に、スプラトゥーンを遊ぶためにWii Uごと買ったという人を少なくとも10人は観測しています。 少々金銭に余裕のある大人は「スプラトゥーンのためだけにWii U買うのはなぁ…」だなんてケチくさいことは言わないで、楽しいゲームを遊ぶためならハードくらいとっとと買うみたいです。 僕はとい
MediaRecorder と WebM で、オレオレ Live Streaming
2019/9/25-6に開催されたUnite Tokyo 2019の講演スライドです。 小端 みより（株式会社ミクシィ） こんな人におすすめ ・Unityでより本格的なマルチプレイのゲームを作りたい方 ・そもそも通信や同期処理ってどうやって実装するの？という方 受講者が得られる知見 ・Unityで専用サーバを開発するメリットやその方法 ・Unityでサーバとクライアントを同時に開発するテクニック ・通信に関する知識、専用サーバを運用する方法 Unityのイベント資料はこちらから： https://www.slideshare.net/UnityTechnologiesJapan/clipboards
WebRTCを仕組みから実装までやってみる - blog::wnotes.net
このエントリはFrontrend Advent Calendar 2013 23日目の記事です。 2014/03/16追記 WebRTC-DataChannelについてもエントリ書きました。↓からどうぞ。 WebRTC-DataChannel使ってみたよ WebRTCを仕組みの理解から実装まで Advent Calendarを書くということでなんか新しいことやったほうがいいかなーって思ってたので、今回はWebRTCを調べてみました。 調べながらだったので間違っている箇所もあるかもですが、専門家の方のツッコミあれば歓迎です。 先に作ったサンプルデモを触りたい方は以下のアドレスからどうぞ。 WebRTC Video Chat Sample ※接続名は同時にアクセスしている方全員から見えますのでご注意ください！接続依頼が来た際にはダイアログが出るようにしてますが、安易に応答すると知らない人とつな
ニュース 2013年12月5日：ブラウザ間でリアルタイム通信を実現するWebRTCのプラットフォーム「SkyWay」の提供開始およびライブラリ・ソースコードの公開について | NTT Com 企業情報
ブラウザ間でリアルタイム通信を実現する WebRTCのプラットフォーム「SkyWay」の提供開始 およびライブラリ・ソースコードの公開について ～国内初の公開トライアルで、WebRTCの普及を促進～ NTTコミュニケーションズ(略称：NTT Com)は、ブラウザ間でリアルタイム通信を実現するWebRTC(Web Real-Time Communications)技術を活用するために開発したプラットフォーム「SkyWay」の無償提供と、ソフトウェア開発支援サービスGitHub*1上における「SkyWay」のライブラリ・ソースコードの公開を開始します。「SkyWay」のプラットフォームやライブラリの利用によって、WebRTC技術を利用したWebアプリケーション(音声や映像を使ってコミュニケーションできるアプリケーションなど)の開発を簡単にすることができます。 1.背景・目的 (1) WebRT
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
IIJ社内で行われている新人向けハンズオン勉強会「IIJ Bootcamp」で行われた "HTTP Overview" です。 HTTPの各バージョン(0.9、1.0、1.1、2、3)を紹介します。 ▼IIJ Bootcampについて IIJ Bootcampとは、様々な技術に触れることを目的としたIIJ社内で行われている新人向けハンズオン勉強会です。 https://iij.github.io/bootcamp/ 各技術が誕生した経緯・歴史、ほかの技術と比較といった知識を得るためのきっかけとして、さまざまな言語・フレームワーク・ツールに触れて実際に動かすハンズオンを行っています。 カリキュラムにはハンズオンだけでなく、「overview」として技術ジャンルの全体像や歴史などを紹介する回も設けています。
JavaScriptの顔認識ライブラリをチューニングしたら実用レベルになったという話 (Kanasansoft Web Lab.)
ただ、WebRTCで顔認識させようとすると遅くてしかたがなかった。 最初は速いこともあるが、10回ぐらい認識をさせるとすぐに遅くなる。 とりあえず、デモ。 そこで、チューニングをしてみることにした。 まず、JavaScriptの定番の高速化を試してみた。 例えば、正の数で使える「Math.floor(x)」を「(x | 0)」に、整数で使える「x * Math.pow(2, y)」を「x << y」にする等。 これで、10~30%高速化できた。 次に、遅くなっている部分を調べたら、Web Workersで分散するための仕組みが遅くなる原因だとわかった。 これは、Web Workersを使わない場合にも影響が出ていた。 じゃあ、Web Workersを使えば速くなるのかといえばその逆で、20倍遅くなっていた。 詳しくは調べてないけど、多分Workerスレッドに処理データを渡す時にJSON化が
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
仕事で WebRTC
GitHub - cordova-rtc/cordova-plugin-iosrtc: Cordova iOS plugin exposing the WebRTC W3C API
WebRTC入門+最新動向