Janus + Vue.jsで自前のWebRTCフロントエンドを作ろう！～その１：準備編 - みかんのゆるふわ技術ブログ
JanusというオープンソースのWebRTCサーバーがあり、ビデオチャットやストリーミングのサーバーを自前で構築できます。以前の記事で紹介しました。 www.mikan-tech.net 前回はJanusをサーバーにインストールして、デモ画面を動かしてみました。 でもやっぱり独自画面を作りたいですよね。 デモ画面をカスタマイズすることでも作れますが、素のJavaScriptでDOMを直接操作していたり、コールバックのネストが深かったりで、 なかなかカスタマイズも手間がかかります。 そこで今回は、Vue.jsで一から独自画面を作ってみました。 まずは手頃そうなストリーミングの画面を作ってみます。 Vue.jsのプロジェクト作成 まずはVue.jsのプロジェクトを作成してみましょう。Node.jsがインストールしてあるものとします。 Vue CLIというものをインストールすると、簡単にVue.
Janusで自前のWebRTCビデオチャットサーバー - みかんのゆるふわ技術ブログ
最近、Microsoft TeamsやZoomなどのビデオ会議🖥がよく使われるようになってきていますね。 そんなビデオ会議システムを自前で用意したい！と思ったときに使えるオープンソースのソフトウェアに、Janusというものがあります。 janus.conf.meetecho.com JanusはGPLv3でライセンスされる、オープンソースのWebRTCサーバーです。 WebRTCは、ブラウザなどで利用できるリアルタイム通信技術で、今時のChromeやEdgeなど多くのブラウザで利用できます。 ビデオチャットや、普通のテキストチャット、ファイル転送などの通信がブラウザだけで利用できるので便利です🥰 今回は、そのJanusをUbuntu 20.04 LTSサーバーにインストールしてみました。 2020/10/08更新 本家のインストール手順がアップデートされていたので、現時点での最新の手順
TURNサーバーを構築したときにちょっとハマった | GROUP DEV BLOG | TECHNO DIGITAL
坂東です。 WebRTCでP2P(STUNだけ)で疎通できない回線を見つけたのでTURNサーバーを立てることにしました。 手順とかハマった点を共有します。 １．TURNサーバーの選択とインストール 「rfc5766-turn-server」というのは更新が終わり、今は「Coturn」というのが主流のようでした。 以下のサイトあたりを参考に、Coturnをインストールしました。 https://gist.github.com/uemuraj/1909514059a056f3a024 http://qiita.com/okyk/items/2d7db6b148a43bc3b405 10分もあればサービス起動までいけると思います。 ためしにrfc5766も入れてみましたが、挙動も設定ファイルもほぼ同じでした。 ２．動作確認の手順 立てたTURNを早速自分のサービスに組み込んで見る。 でも、うまく
WebRTCで必要になるもの
WebRTCを利用するために何が必要となるのか調査した。 個人的なモチベーションとしては、1対１のボイスチャットを想定してた場合に自分で構築・運用できるようなものなのか知りたかったので、調査範囲としては ほどほど。 TL;DR 必須 シグナリングサーバー は必須 LAN内のP2P用途ならサーバーとしてはこれだけでOK クライアント同士が異なるLANにある場合 加えてSTUNサーバーを使う (全部ではないけれど) NATを超えてP2Pできるようになる とりあえずここまで用意すれば70%くらいのケースで繋がるらしい クライアント同士が異なるLANにある場合で、カバーできる環境を広げたい場合 加えてTURNサーバーを使う Symmetric NAT や ファイアーウォールを超える必要があるケース P2Pではなくなり、TURNサーバーがパケットをリレーする 転送量に注意 STUN と TURN を
Nuxt + Laravel でとりあえず動くものをサクッと作る
本記事は Nuxt + Laravel で とりあえず動くものをサクッと作ろう をテーマにつらつら書いていきます。 はじめに 記事投稿者はフロント実装者ですが、イチから REST APIを構築してみたいなぁ、ということから手順などを記事にしてみました。 こんな方向けの記事です Vue.js + TypeScript の基礎を理解されている方 PHP / MySQL の基礎を理解されている方 フロントエンドだけどREST APIでとりあえず動くものを作ってみたい方 CORSに悩んでいる方 環境変数の持たせ方に悩んでいる方 今回のゴール 簡単なCRUDを実装 今回は書籍管理システム バックエンドはLaravelでREST API構築 Nuxtでフロントの構築 CORS対策もするよ 環境 PC: MacBook Pro (Intel Core 2016) OS: macOS Montery12.
[Laravel 7.x]メールの送信にAmazon SESを使う
はじめに Amazon LinuxからAmazon Linux 2へサーバを移行したのだけれど、メールが送信されてこない。。。 普通にsendmailで送るのもよいけど、EC2を使っていると、ポート25の制限を解除を忘れてしまう… 公式によると、 SMTP、Mailgun、Postmark、Amazon SES、sendmailドライバーを提供しており… https://readouble.com/laravel/7.x/ja/mail.html ってことなんで、サーバはEC2だし、Amazon SESを使ってみることにする。 Laravel側の設定 SESのSTMP経由で送信するのであれば、下記の処理は不要。 まずは、composer.jsonファイルのrequireに以下を追加して、composer updateする。 まぁ、$ composer require aws/aws-sdk
![[Laravel 7.x]メールの送信にAmazon SESを使う](https://cdn-ak-scissors.b.st-hatena.com/image/square/11b3718a5354721822e6fc8b7e517b04b53407c8/height=288;version=1;width=512/https%3A%2F%2Fnyan.blog%2Fwp-content%2Fuploads%2F2020%2F04%2Fsocial-share.jpg)
mediasoupのインストールと基本的な実装 - 自宅インフラ屋さん
mediasoupとは nodejsのSFUサーバのライブラリ。ライブラリなので基本的にメディア（映像、音声）の受信、配信のみを行います。 クライアントはwebRTCを想定しています。 SFUとは SFU(Selective Forwarding Unit)とは配信者に代わり映像、音声を視聴者に配信する仕組み。配信の代行的なことを行うサーバですかね。 とりあえず環境情報ともろもろ OS debian 8.8 node version 6.10 npm 3.10.0 調査期間 : 2017/5/20 〜 2017/6/2 調査期間中にいろいろ仕様とか変わっているかもしれませんので、、ご了承下さい。 mediasoupのインストール npmにてインストールすることができるが、mediasoupの実装がC++なのでコンパイルできる環境を用意 apt-get install gcc g++ mak
Node.js用のmediasoup clientを作ってみた
mediasoup とは OSS で公開されている WebRTC の SFU です。 ユーザが触る API 部分 を Node.js で、内部の WebRTC 周りを C++で書かれています。 MediaChannel だけでなく、DataChannel に対応していたり、RTP の口を生やせたりと結構多機能です。 mediasoup には SFU に接続するためのクライアント SDK があり、公式が用意してるのは以下です。 mediasoup-client js , browser/react-native libmediasoupclient c++ mediasoup-client-aiortc node.js (ただし Python 製の aiortc をラップして作られている) mediasoup-client-node 著者は TypeScript(Node.js) で Web
複数のGitHubアカウントを使い分けたい時の設定方法とTips
概要 この記事では、複数の GitHub アカウントを使い分ける方法について解説しています。 仕事とプライベートで GitHub アカウントを使い分けたいなと思っている方のお役に立てれば幸いです。 この記事の説明は、「すでに GitHub を使用していて新たに 2 つ目の GitHub アカウントを追加したい」というユースケースにおける説明になっています。 それでは頑張っていきましょう！ 動作環境 マシン: M1 Mac mini OS: macOS Big Sur シェル：zsh 5.8 秘密鍵・公開鍵を生成する 新しい GitHub アカウント用に秘密鍵・公開鍵を生成します。 ターミナルを起動し、以下のコマンドを順に実行します。
【自分向け】WebRTCの勉強
/** A stream of media content. A stream consists of several tracks such as video or audio tracks. Each track is specified as an instance of MediaStreamTrack. */ interface MediaStream extends EventTarget { readonly active: boolean; readonly id: string; onaddtrack: ((this: MediaStream, ev: MediaStreamTrackEvent) => any) | null; onremovetrack: ((this: MediaStream, ev: MediaStreamTrackEvent) => any) |
ビデオチャット作るときの逆引きTipsまとめ - xor
リモートワークのため社内用ビデオチャットツールを先日作ったのですが、せっかくなので一部をオープンソースにしてGitHubにあげておきました。 github.com ※リファクタしてないので見辛いです SPAなのでGiHub Pages上でそのまま利用もできます。 ukkz.github.io （OGP設定しないと…） 一旦開発が落ち着いたので、作業時のメモを簡単に整理して公開しておきます。 構成 Vue.js (@vue/cli v4.3.1) Vuetify @2.3.1 Vuex @3.4.0 Vue-Router @3.3.4 SkyWay まとめ一覧 ビデオストリームの情報を知りたい 使ったところ：実際の映像アスペクト比とブラウザ画面のアスペクト比から複数映像配置時の自動最適化 VideoTrack.getSettings()でいろいろ情報がとれました。 // メディアストリームオ
Node.js＋Socket.IOで作る、通信対戦ができるHTML5ゲームシステムの作り方
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめまして、Yahoo!きっず開発担当です。 昨年Yahoo!きっずにてブラウザオンラインゲーム「おしゃべりリバーシ」をリリースしました。 ※おしゃべりリバーシは2015年10月をもってサービス終了しました。ご利用いただきまして、ありがとうございました。 このゲームは、通信対戦部分の通信プロトコルWebSocketを採用し、サーバミドルウェアにNode.js＋Socket.IOを採用しました。この結果、ブラウザゲームでありながらマルチデバイスでの対戦を実現しました。 今回は、Node.js＋Socket.IOによるWebSocketサーバのシステム構築方法について考慮すべきポイントを、「おしゃべりリバーシ」の実例を紹介しながら説
Arm Mac (M1 Mac) 上で Wine を使ってA5:SQL Mk-2を動作させる方法 |
Arm Mac (M1 Mac)で、Wineを使ってA5:SQL Mk-2の動作に（とりあえず）成功したので、ここに手順を記します。 まだ安定しない場合もあるかと思うので、その場合は掲示板等で報告していただけるとありがたいです。 なお、Rosetta 2について記述していませんが、必要に応じてインストールするかOSが聞いてくるはずです。 前提（条件） OS バージョン : Mac OS 11.3 Wineバージョン : Wine 5.0 A5:SQL Mk-2 Version 2.16.0 beta 35以降（Version 2.16.0の正式版が公開されたらそちらを使用） A5:SQL Mk-2のダウンロードと展開 Vector からダウンロードする。 64bit版をダウンロードすること。 Homebrew のインストール 公式サイト シェルから以下のコマンドを実行
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
仕事で WebRTC
https://webrtc.smagai.com/2017/10/29/webrtc%E3%81%A7%E3%83%9E%E3%83%AB%E3%83%81%E3%83%91%E3%83%BC%E3%83%86%E3%82%A3%E6%8E%A5%E7%B6%9A%EF%BC%88%E5%A4%9A%E4%BA%BA%E6%95%B0%E6%8E%A5%E7%B6%9A%EF%BC%89/
How to Build a Color Customizer App for a 3D Model with Three.js | Codrops
Top 5: Best Open Source WebRTC Media Server Projects
bandwidthの制御
socket.ioのv3で知らなかったこと
Lexical