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 を
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
【自分向け】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) |
getUserMedia()の設定項目｜npaka
JavaScriptでWebカメラやマイクのメディアストリームを取得するgetUserMedia()の設定項目をまとめてみました。 1. getUserMedia()getUserMedia()は、ユーザーのWebカメラやマイクの「メディアストリーム」を取得するメソッドです。 引数では、「audio」(音声)と「video」(動画)の有効・無効を指定できます。 const mediaStream = await navigator.mediaDevices .getUserMedia({ audio: true, video: true })true・falseの代わりに「制約」を指定することもできます。 以下は、160x120の動画ストリームを取得する例になりますです。 let mediaStream = await navigator.mediaDevices .getUserMedi
VideoタグとWebカメラの映像と音声を一つのVideoタグに合成してダウンロード | ツクロア - DESIGN LAB
HTML5のVideoタグにWebカメラの映像と音声を合成させて、1枚のビデオファイルを生成する方法について試してみました。どうもです、デザイナーの秋葉です、久々の技術のことを書いてみます。 参考にさせていただいたのはこちら https://html5experts.jp/mganeko/12475/ Webカメラからの映像や音声をgetUserMediaというメソッドを使ってストリームデータを取得して、ブラウザだけで動画ファイルを生成してユーザーはダウンロードできるものです。 ここで考えたのは、オリジナルのVideoタグの動画に、カメラの自分の映像やしゃべった声をスーパーインポーズして一つの動画ファイルにするって、HTML5でできるのかな？と思って試したら、ちょっと手間がかかるけどChromeブラウザでできた。 デモをこちらに上げておきました、Chrome 56以降で試してください。 h
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
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/