WebRTCを仕組みから実装までやってみる - blog::wnotes.net
このエントリはFrontrend Advent Calendar 2013 23日目の記事です。 2014/03/16追記 WebRTC-DataChannelについてもエントリ書きました。↓からどうぞ。 WebRTC-DataChannel使ってみたよ WebRTCを仕組みの理解から実装まで Advent Calendarを書くということでなんか新しいことやったほうがいいかなーって思ってたので、今回はWebRTCを調べてみました。 調べながらだったので間違っている箇所もあるかもですが、専門家の方のツッコミあれば歓迎です。 先に作ったサンプルデモを触りたい方は以下のアドレスからどうぞ。 WebRTC Video Chat Sample ※接続名は同時にアクセスしている方全員から見えますのでご注意ください！接続依頼が来た際にはダイアログが出るようにしてますが、安易に応答すると知らない人とつな
WebRTCシグナリング over milkcocoa - Qiita
はじめに この記事は WebRTC Advent Calendar 2014 の記事です。無謀なことに同時に milkcocoa Advent Calender 2014 にもクロスポストしてみました。milkcocoaから来たかたには「WebRTC とはなんぞや？」という感じだと思います。そんな場合は、1日目の記事をまずはご覧ください。 WebRTCコトハジメ http://qiita.com/Tukimikage/items/286f569d110daede721e シグナリング、シグナリング、シグナリング しつこく、WebRTCのシグナリングねたを続けます。 「そこにメッセージングの仕組みがある」ならば、シグナリングをやりたくなるのが人情です。 milkcocoa 登場 milkcocoa は、リアルタイムメッセージングのためのBaaSです。Socket.IOを使っていて、docke
WebRTCで複数人接続してみる
WebRTCをさわってみる＆手動シグナリングしてみるの続きです。 今回は、WebRTCを使って複数人接続してみたいと思います。 １対１で接続するときとの違いは？ 前回のおさらいですが、１対１で接続するとこんな感じになる。 図1. 1on1の接続 そして、こういう手順でPeer to Peerさせることができます。 No端末A端末B 1video要素を作っておくvideo要素を作っておく 2Peerを生成Peerを生成 3メディアに接続(カメラの起動を許可すること) ・Peerにストリームを接続し、自身の端末の状態をvideo要素で閲覧できる状態になるメディアに接続(カメラの起動を許可すること) ・Peerにストリームを接続し、自身の端末の状態をvideo要素で閲覧できる状態になる 4端末Bへ送信するOfferを生成 5端末Aで生成したOfferを受信 6端末Aへ送信するAnswerを生成
シグナリングサーバーを応用！ 「WebRTCを使って複数人で話してみよう」
こんにちは！ 前回はシグナリングサーバーを動かして、WebRTCでPeer-to-Peer通信をつなぐ処理を作りました。最後に書いた通り、前回の実装ではサーバーあたり2人だけしか同時に通知できません。今回はこれをもっと実用的にしていきましょう。 ※今回もNode学園祭2013で発表した内容と共通の部分が多いです。その時の資料も併せてご参照ください。 ※こちらの記事は2014年に書かれました。2016年8月のアップデート記事がありますので、そちらもご参照ください。 複数会議室を作ろう 前回作ったのは、いわばカップル1組限定サイトのシングルテナントアプリでした（左）。これを複数組が共存できる、マルチテナント（複数会議室）のアプリに改造します（右）。 複数組が共存できない理由は、シグナリングの通信が同じシグナリングサーバーに接続している全員に飛んでしまうからです。これを混線しないように分離してあ
Webページを監視して表示崩れが起きていないか検出できるE2Eテストを実装しました | Recruit Tech Blog
お世話になります、フロントエンド担当をしている小原正大です。Webページの表示を監視して差異があった場合、どのページで表示の変化が起きているかを知ることが出来るプログラムを実装したのでそのことについて書こうと思います。 何につかったの？ 僕がフロントエンドを担当しているサービス『料理サプリ』で大規模なフロントエンドコードのリファクタリング行う際に表示テストを自動化するために作成しました。『料理サプリ』はPC・スマホ合わせて大体350-400ページの表示パターンが存在する比較的規模の大きいサイトです。全ページに影響を与えるような作業は大規模な回収となり、今回のリファクタリングでは表示テストの計画などの段取りが必要でした。従来の人手によるQAでは細かいバグを見過ごしたり時間がかかり効率が悪いので、可能な限り自動化しようと考え実装しました。 実装の概要 この監視のシステムは以下の２つ実装を組合わ
Ruby on RailsでMySQLとMroongaを使って日本語全文検索を実現する方法 - 2015-11-10 - ククログ
MySQLは先日リリースされたMySQL 5.7から標準機能で日本語のテキストを全文検索できるようになりました。逆に言うと、現在広く使われているMySQL 5.6以前では日本語のテキストを全文検索できません。MySQLにMroonga（むるんが）というストレージエンジンを導入することで日本語のテキストを全文検索できるようになります。しかもMroongaは高速です。MySQL 5.7で導入された日本語全文検索機能よりも高速です。 MySQLと全文検索エンジンサーバーを組み合わせて日本語全文検索を実現することもできますが、管理するサーバーが増える・SQL以外に全文検索エンジンサーバーのことを覚える必要があるなど開発・運用時のコストが高くなります。MySQLだけで完結できた方が開発時も運用時も楽になります。 この記事ではRuby on Railsで作ったアプリケーションからMroongaを使って
社内JavaScript勉強会で作ったコンテンツまとめ - Qiita
はじめに 弊社で実施している社内向けJavaScriptの勉強会のコンテンツまとめです(最近はやってないのも上げてる)。対象は独学でJavaScriptを少し触ったことがあるけど企業でやったことはない、くらいのレベルの人です。このコンテンツを作っている筆者も1年くらいしかJavaScriptを触ってないので怪しい所もあると思いますが、社内でのJavaScript教育に困っている方の参考になればと思います。 ちょっと一部古かったりするので、Issueでも立てて下さい。気が向いたら直します。 ES2015(ES6) JavaScriptを書く上でスタンダードになりつつあるトランスパイラBabelを使用したコーディングについて学びます。ES2015の記法について全て網羅しているわけでなく、今すぐ使える簡単なものを優先して開設しています。ES2015の構文を使うことで何が楽になるのか、という点を重
テーブルのソート・フィルタ機能等、超多機能テーブルに変形させられる「jQuery-KingTable」:phpspot開発日誌
RobertoPrevato/jQuery-KingTable GitHub テーブルのソート・フィルタ機能等、超多機能テーブルに変形させられる「jQuery-KingTable」 テーブルを次のように超リッチにしてくれます。ページング、フィルタ、ソート等便利に使えます テーマも色々えらべます 関連エントリ テーブル内容の編集がその場で出来て便利になる「jQuery-Tabledit」 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ヘッダ、フッタを固定したテーブルを実装できるjQueryプラグイン「jTableScroll」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」
WebRTCセキュリティレポート · A Study of WebRTC Security
WebRTCセキュリティレポート あらまし WebRTC(Web Real-Time Communication)は、Webアプリケーション技術の昨今のトレンドの一つだ。WebRTCを利用すると、プラグイン無しで、また他の条件も無しでリアルタイムコミュニケーションを実現できる。だが、そのオープンソースとして性質から、WebRTCを採用しようとする人がセキュリティ上の不安を覚えることもあるだろう。本レポートはWebRTCのセキュリティについて明らかにし、他の技術と比較してWebRTCのセキュリティが優れていることを解説する。 1. 導入 WebRTCはオープンソースのWebベースの技術であり、ユーザがリアルタイムメディア通信を、プラグイン無しで実現可能な技術だ。適切なブラウザを利用すれば、ウェブサイトをブラウズするだけで、他者に発信して通話することができる。 WebRTCの主なユースケースは
WebRTCのデータチャネル解説 - Qiita
データチャネルによって従来では成し得なかったP2Pのブラウザアプリケーションの実現が可能となります。WebRTCといえば、多くの人がブラウザ上での音声映像チャットを思い浮かべるでしょう。しかし、WebRTCではP2Pでのデータ通信を提供するデータチャネルも含んでいます。 この記事では、データチャネルの特徴とAPIやプロトコルについて解説し、最後にその活用方法に触れたいと思います。 なおこの記事は、WebRTCについてある程度理解が進んでいる方に向けて書かれています。WebRTC Advent Calendar 2014の1日目の記事であるWebRTCコトハジメ - Qiitaが、この記事の理解の役に立つかもしれません。 なぜデータチャネルか？ データチャネルはWebRTC仕様のピアコネクションに含まれており、ブラウザ間でリアルタイムにデータをやりとりする能力を提供します。旧来より、ブラウザ
SENSEI NOTEのWebRTC導入事例─Opentokで安定したビデオチャットを提供する
はじめまして、LOUPEの末永です。本記事では、私たちが運営している先生専用SNS「SENSEI NOTE」でのWebRTC導入事例について、ご紹介させていただきます。 全国の先生がつながるSENSEI NOTE SENSEI NOTEは「全国の先生がつながる」をコンセプトにした先生専用SNSです。招待もしくは申請制で、小学校から高校までの学校の先生が、ご利用いただけます。サイトの中では先生が他の先生とのつながりを作れたり、学校で起きている課題の相談や、授業のTips共有をすることができます。 SENSEI NOTEでは、テキストやファイルベースのナレッジ共有が主たるものでした。しかし、悩みや課題は誰かと話をすることで本当の課題や解決策は見えてくるものですし、全国には小規模学校で同じ科目を教える先生が一人だけだったり、地理的に他の学校との隔たりが多い学校もあります。そのような状況で、ビデオ
WebRTC スタックコトハジメ
この資料は古く、更新を終了しています 是非 好奇心旺盛な人のためのWebRTC をご覧ください。 2015 年 3 月 11 日に行われる WebRTC Meetup Tokyo #7 : ATND 向けの発表資料です。 注意 High Performance Browser Networking ここを読めば一通り学べます。 O'Reilly Japan - ハイパフォーマンス ブラウザネットワーキング 日本語もあるので是非、まずはこちらを読みましょう。とても良い本です。むしろ読め。 概要 WebRTC はブラウザに実装されている技術ですが、それだけでは色々やりたいことができません。 ブラウザ以外で WebRTC の技術がどう使われて、どう使っていけるのかという話をしていきます。 データチャネルのスタックはあまり個人的に興味が持てないので、メディアチャネルだけに焦点を当てます。 ただ、自
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebRTC の未来