Help us understand the problem. What is going on with this article?

WebRTCでビデオチャット

More than 3 years have passed since last update.

WebRTCでビデオチャット

by ngmt83
1 / 13

テーマ

WebRTC

取り組んだ理由

知り合いに勧められたから


WebRTCとは

WebRTC (Web Real-Time Communication)とはWorld Wide Web Consortium (W3C)が提唱するリアルタイムコミュニケーション用のAPIの定義で、プラグイン無しでウェブブラウザ間のボイスチャット、ビデオチャット、ファイル共有ができる。
wikipediaより


WebRTCのおかげで非常に簡単にビデオチャットなどを実現できる

P2P通信であり、ブラウザ同士がデータのやり取りをする
ただその通信を確立するための、シグナリングサーバは必要


実践

偉大な先人を多数確認
パクる全面的に参考にする方針に決定

WebRTC入門2016


結果

ブラウザからwebカメラにアクセスするのは非常に簡単
WebRTCでのデータやり取りも非常に簡単

シグナリングサーバは少し難しい・・・頑張りどころだ!


もう少し調査

あっ・・・
【PeerJS】HTMLファイルだけでリアルタイムなビデオチャットを作る | KRAY ...
パクる全面的に参考にする方針続行


結局シグナリングサーバはどうしたか

Sky Wayというサービスを利用

ドキュメントもわかりやすいし、無料だし、いい時代です。


成果

ビデオチャット

スクリーンショット 2016-08-19 12.49.32.png


使い方

  1. 通話相手のIDを聞くor自身のIDを教える
  2. IDを入力し、コールボタンを押すorコールされるのを待つ

動作確認ブラウザ

Chrome, Firefox


まとめ

WebRTCは非常に簡単
とりあえず実装するだけなら、通信の知識もさほど必要ではない

先人達は偉大


副産物

WEBカメラからの映像を扱うのがとても簡単で驚いた勢いで作りました

万華鏡
※個人差はありますが、衝撃的な映像が流れることがあります


参考URLに詳しく記載されているので、このページでコードには触れていません
わかりやすく非常にありがたかったですm(__)m

一応こちらからソースコード確認できます

ngmt83
投稿は自身がハマったところを備忘録的に書いていることが多いです。 よくあるハマりポイントでも、自分がスルーした箇所は投稿に含まれないでしょう。
https://ngmt83.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした