Vueでビデオチャットを実装する(ダウンロード可)さてさて、この間「Laravel+Vueでリアルタイム・チャットをつくる」というテキストのチャットを実現する記事を公開しました。(実はこの記事のソースコードはブログ内でダウンロード人気TOP3だったりします。EchoとPusherを連携させる例が紹介されていたりします。Pusherでできることは(テキストの)チャットシステムだけでなく、なんとビデオチャットも開発することだってできるんですね。Vueでビデオチャット・サービスを実装してみたいと思います。皆さんのお役に立てると嬉しいです!最後にソースコード一式をダウンロードすることができます。合わせて読みたいビデオチャットを実現する仕組み今回は、ブラウザ間で直接データのやりとりをする「WebRTC」という技術を使って実装します。本格的には難しいので、WebRTCを簡単に説明すると、次のようにマッチングサービスのようになっています。make:authでLaravelのログイン機能がインストール済みであるものとします。方は以下の記事を参考にして準備しておいてください。【Laravel5.6】インストール直後にやること3点また、ビデオチャットをテストするために2人以上のユーザーを用意しおいてください。以下のページにある「テストデータをつくる」が参考になると思います。Chromeはカメラや音声にアクセスする場合は必ずHTTPS環境であることが必要になってきます。ローカルにHTTPSを導入していない場合は以下を参照してみてください。いうパッケージを使ってビデオチャットを実装するので、はじめにこれらの提供するパッケージをインストールしておきましょう。JavaScript側です。installを実行してから実行してください)Laravelのルートフォルダに移動して以下のコマンドを実行してください。--save-devパッケージがインストールされたらビルドJavaScriptコードから利用できるようにします。resources/js/bootstrap.jsを開いて以下のように変更してください。window.Pusherは最初から記述されていますが、コメントアウトされているので、外して有効にしておいてください。今回はVueは独自にインスタンスを作りますので、resources/js/app.js内の以下の部分はコメントアウトしておきましょう。});では、以下のコマンドでビルドします。production完了したら、/js/app.jsと/css/app.cssに全てのコードがまとまってます。最後にcomposerでLaravel側に必要なパッケージをインストールして準備は完了です。pusher/pusher-php-serverPusherに登録するもちろんPusherが利用できないと今回のビデオチャットは実装できませんので、アカウントを持っていない人は以下のページを参考にして作っておいてください。app」ボタンをクリックします。すると、新しいアプリの登録フォームが表示されるので次のように適当な情報で登録します。登録が完了したらPusherへのアクセスに必要な情報が表示されるので、.envにそれぞれ登録しておきましょう。(.envの内容)PUSHER_APP_ID=******PUSHER_APP_KEY=********************PUSHER_APP_SECRET=********************PUSHER_APP_CLUSTER=ap3さらに、クライアントからのイベントを実行するには、設定でクライアント・イベントを有効にする必要があります。events」にチェックを入れて「Update」ボタンをクリックします。これでPusherの準備は完了です。ビデオチャットするページを作るでは、Laravelでビデオチャットをするための専用ページを作っていきましょう。ルートをつくるまずはroutes/web.phpにルートを追加します。ユーザー情報が必要なので、「authミドルウェア」でログインが必須なページにしています。コントローラーをつくる続いてはコントローラーです。以下のコマンドでVideoChatControllerを作成してください。VideoChatControllerapp\Http/Controllers/VideoChatController.phpが作成されるので、中に2つのメソッドを追加してください。}}1つめのindex()はビデオチャットが表示されるページになるので、次のデータをビューに送っています。ログイン中のユーザー情報ログインしているユーザー以外のデータ(これから通話する人たち)そして、2つ目のauth()はPusherの認証を実行するメソッドで、これから作るJavaScriptが送信してくる以下のデータで認証することになります。チャンネル名ビューをつくる最後にresources/views/video_chat/index.blade.phpを作って中身を以下のように変更しましょう。</script></body></html>では、この中でやっていることを順を追って説明します。HTML部分まず、以下の部分では自分「以外」のユーザー名のリンクが作成されて、クリックするとビデオ通話を試みます。}}」さんと通話を開始する</a></div>また、その下ではHTML5の<video></video>タグを2つ作りそれぞれ以下の内容で設定しています。相手の映像を表示するvideoタグカメラ、マイクへのアクセス部分mounted()はページが読み込まれたらすぐに実行されるメソッドなので、まずカメラ&マイクへアクセスします。(実際には、ユーザーが許可を出したらアクセスができるようになります)カメラ&マイクへのアクセス権限が取得できたら、video-hereのvideoタグへ映像&音声を流します。次にPusherを起動します。Pusherの設定内容は以下のとおりです。内から呼び出していますが、元々は.envを参照したものです。トークンを追加しています。Pusherの認証に成功したらシグナルを実行するイベントをバインディングすることになります。simple-peer部分simple-peerはgetPeer()メソッドの中で記述されています。やっていることは、まずインスタンスを作成し(自分側と相手側の2パターンがあります)、後はそれぞれ「シグナル」「ストリーム」「閉じる」イベントを作成しているだけです。(ストリームは相手側の映像&音声なので、video-thereのvideoタグにデータを流しています)ちなみに元々は、ブロックごとに説明しようと考えていたのですが、なにせ結構複雑な内容なので分けてしまうと逆にわかりにくくなると思い、一気にコードを紹介することにしました。これでもわかりにくかったらゴメンナサイ😅そして、ブラウザで見るとこうなります。(まだ通話していないので自分の映像しか写っていません。ウェブカメラにはシールを貼ってるので灰色ですが。)テストしてみるでは、実際にPCとスマホのブラウザでアクセスして両者でビデオ通話をしてみましょう。ちなみに、今回はテストとして昔UFOキャッチャーでとった「ぼのぼの」のシマリス君を使ってみたいと思います。準備としては、まずPCとスマホどちら側からも別のユーザーでログインしておく必要があります。どちらか片方から名前の書かれたリンクをクリックすると自動的に通話が開始されます。↓↓はい!ちょっと分かりにくいかもしれませんが、うまく2方向からのビデオ通話を実現することができました。お疲れ様でした![参考URL]:https://www.youtube.com/watch?v=5pnsloZzYQMソースコードをダウンロードする今回実際に開発したソースコード一式を以下からダウンロードすることができます。パッケージのインストールやPusherの作業、事前設定等はご自身で行っていただく必要があります。今回はテストなのでエラー処理は全く行っていません。テストのときの音声には気をつけてください。Vueでビデオチャットおわりにということで、今回はPusherを使ってビデオチャットを実装してみました。近年のブラウザはできることが増えてきて、今やスカイプがなくてもこんなことができるようになっているなんて、ちょっとテンションが上がってしまいました。WebRTCはブラウザ間だけでなくスマホのアプリやネイティブアプリとも通信ができるので、より可能性が大きいテクノロジーといっていいでしょう。みなさんもぜひ取り入れてみてはいかがでしょうか。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。