やってみたらなんとかなる

プログラミングをする上で調べたこととかやったこととか

WebRTC

[React] WebRTC x React でP2Pビデオ電話アプリを作ってみる 番外編#2 ~別ブラウザにも対応させる~

概要 WebRTCとReactを使ったビデオ電話アプリ制作の番外編第2回です。今回はブラウザの対応範囲を増やしたいと思います。 これまでのコードは基本的にChrome向けのコードだったのでMacユーザーの方はもしかしたら途中で意味不明エラー(これは関数じゃないよ…

[React] WebRTC x React でP2Pビデオ電話アプリを作ってみる 番外編#1 ~Herokuにデプロイ~

概要 WebRTCとReactを使ったビデオ通話アプリケーションの番外編第1回です。これまでとりあえずうまく通話ができた(localhost内)ので今度はインターネットに公開してみます。 無料で使用できるHerokuというサービスで公開します。 Heroku Herokuは基本料金無…

[React] WebRTC x React でP2Pビデオ電話アプリを作ってみる #5 ~データ通信・交換編~

概要 WebRTCとReactを使用したビデオ電話アプリ製作の第5回です。今回は、別のブラウザ間でのアクセスを可能にします。 今回もだいぶ重いです... 追加の準備 今回はサーバーにexpress、WebSocketを使用するためにsocket.ioを使用します。そのために追加で…

[React] WebRTC x React でP2Pビデオ電話アプリを作ってみる #4 ~データ交換編~

概要 WebRTC と React を使ってビデオ電話アプリを作成する第4回です。今回は前回取得したデータを交換します。 今回は割と重かったりします。 今回のコード 今回のコードは長くなってしまったのでここに載せてあります。 変更したのはsrc/VideoConnect.jsと…

[React] WebRTC x React でP2Pビデオ電話アプリを作ってみる #3 ~映像・音声取得編~

概要 WebRTCとReactを使った簡単なビデオ通話アプリ作成の第3回です。 今回は、映像の取得まで行います。 今回行うこと getUserMedia()を使った映像と音声の取得 今回使用するコード 次の①、②のコードを書いた後にnpm startでカメラに映った自分が表示される…

[React] WebRTC x React でP2Pビデオ電話アプリを作ってみる #2 ~準備編~

# 概要 第2回は準備編です。環境構築などを進めます。 今回やること node.jsのインストール 作業ディレクトリの作成 Reactのインストール node.jsのインストール Reactを使用するのにはnode.jsが必要です。このインストールはOSごとにやり方が違うので公式と…

[React] WebRTC x React でP2Pビデオ通話アプリを作ってみる #1

概要 最近見つけたWebRTCという技術と最近勉強したかったReactを使ってP2Pビデオ通話アプリを作ってみたいと思います。 今回すること そもそもWebRTCって何? どんなものを作るのか? ここらへんをはっきりさせておきたいと思います。 そもそもWebRTCって何…