agoraがよくわかる!無料セミナー実施中!> 若手SEがWebアプリを作成したので記事を書かせてみました。 コードはツッコミどころ満載ですが、あえて公開します!こちら 以下原文ママです。 はじめに Agora.ioとは、ライブ配信・ビデオ通話向けのSDKです。 Agora.ioを利用してビデオ通話アプリ (コールセンターアプリ) をつくってみました。 私は文学部出身のSEで、2019年の4月から社会人3年目になります。 普段の業務は、問い合わせの対応が多く、今までアプリ (システム) の開発経験はありませんでした。 ただ、問い合わせ対応をしていくなかで、自分でもアプリの開発をしてみたいと思い、本アプリをつくってみました。 開発環境 Windows7 pro 64bit Firefox 66.0.2 Visual Studio Code 1.32.3 MAMP 4.0.1 Agora Vi
はじめに この資料は、WebRTC入門者の会(2016.11.01)用の資料です。 資料の全体はこちらのINDEXを参照してください。 WebRTCハンズオン資料 INDEX - Qiita 自己紹介 名前: なかゆうすけ(@Tukimikage) 仕事: SkyWayのDevrel HTML5 Experts.jpの運営 コミュニティ: WebRTC Meetup Tokyo/Osaka/Japan主催 今日のスライドの目的 WebRTCサービスを開発する際に必要となる、各種デバッグ技術をお伝えします 前提条件 Webブラウザでの利用を前提とします WebRTCハンズオン の知識が最低限必要となりますので、まだ読んでいない方は先にご一読ください。 MediaChannelのみしか扱いません デバッグ方法やそのためのノウハウをご紹介するだけなので、事象解決には別の努力がきっと必要です 目次
WebRTCで接続する場合 Webサーバ 通信を実際に行う画面。これがないと始まらない シグナリングサーバ ピアツーピア通信を行うもの。基本的にはこれがあれば通信を行うことが可能。ローカルネットワーク内ではこれだけで行けるんじゃないかな? Stunサーバ シグナリングサーバでは相手側のグローバルipなどがわからないのでそれを調べたりするのにこれが必要。これとシグナリングサーバを経由して通信する。 一度通信を行えばネットワーク負荷はかからないので通信料はあまりネックにならないとか Turnサーバ なんかStunサーバとか使っても通信できない場合の最後の手段的なもの、これはなんかネットワーク負荷がかかるらしい。 環境 さくらのクラウドで以下を用意 Webサーバ yum update -y rpm -Uvh http://dl.fedoraproject.org/pub/epel/6/x86_6
MediaStream APIとは WebRTC (Web Real-Time Communication)で定義されているAPIの一つで、ローカルのWebカメラやマイクからストリームデータを取得するためのAPIです。MediaStream APIの詳細はW3Cでドラフトが公開されています。 http://dev.w3.org/2011/webrtc/editor/getusermedia.html MediaStream APIでは、通信時のストリームについて定義されています。これによって、Webカメラから取得した画像やマイクから取得した音声は、加工することが可能です。 MediaStream APIの使い方 今回はMediaStream APIの中で定義されている getUserMedia メソッドを使います。 最初にnavigator.getUserMedia関数が使えるか確認します
熱海のMOA美術館で撮影した景色 この記事は エムスリー Advent Calendar 2019 の 16 日目の記事です。 こんにちは、 エムスリーエンジニアリンググループ、プロダクトマネージャーの岩田です。 今回はMediaStream APIで画面キャプチャとマイクからの音声を同時に録画する方法についてご紹介します。 MediaStream APIとは MediaStreamでデバイスを検索する マイクからの音声ストリームを取得する ユーザーから許可を取得する それでも音声が取得されない - 意図したマイクをChromeが認識してないケース 画面キャプチャストリームを取得する 録画範囲の確認ダイアログが表示される 音声とキャプチャを同時に録る まとめ We are hiring この知見は以前本ブログでご紹介させて頂いた↓のサービス開発の中で得たものになります。 www.m3tec
最近ちまたでは、リモート会議や飲み会で、自分のカメラ映像をsnapCameraで面白おかしく加工するのが流行っています。 映像だけでなく、声も加工したくなるとき、ありますよね? ・・・ありますよね?(・・・きっとあるから読んで頂けているはず。) 自分の声を加工するためには「バ美声」などのボイスチェンジャーアプリと仮想オーディオデバイスが必要です。しかし、これらを用意するには手間がかかるし、仮想オーディオデバイスは割とトラブルがつきものです。。。 そこで、手間無しで、トラブルに悩まされることも無く、誰でも簡単にボイスチェンジ出来る、ボイスチェンジャー付きボイスチャットアプリを作ってみることにしました!! 必要な材料 SkyWay ボイスチャットアプリを簡単に実装できるSDK & API Tone.js Web Audio APIを簡易に扱うことができるフレームワーク。音の生成や加工が簡単にで
iOS SDK iOS端末でアプリを作成するためのSDKです。Swift、Objective-Cの両言語に対応しています。
nginxのnginx-rtmp-moduleモジュールを使うと、簡単に配信サーバーが建てられるということでやってみました。 今回は、一時利用かつ非公開用なのと、準備時間があまり確保出来なかったため、必要最低限の設定で構築しています。 利用ケース 複数の配信主が参加する生放送企画で、各配信主に同じタイミングで画像の表示切替をしたかった。 そこで、RTMPサーバーに対して画像(映像)を配信し、各配信主にはサーバーからの配信映像を視聴してもらう方式を取りました。 サーバーの用意 AWSのAmazonLinux2を利用しました。 タイプはt3.microです。 nginx構築 OS設定 login as: ec2-user Authenticating with public key "imported-openssh-key" __| __|_ ) _| ( / Amazon Linux 2
こんにちは、szkです。 前回紹介したのは主流かつ、従来式というべき「Nginx」を用いたサーバ構築でした。 記事を記載している中でFAIOさんからこのようなリプライを頂きました。 SRTというプロトコルを試しているところですね! ただ上手いことOBSのメディアソースで受け取れず、苦戦している段階になります… (ちなみにサーバー用ソフトウェアですが、のちに記事を書くつもりですがSRSというソフトウェアが今もメンテされていておすすめですよ!うまくいくとRTMPで4秒です) — DJ FAIO (@FAIO1230) April 27, 2020 リプライでは「ほぇ~そうなんですねぇ」といった感じで話を合わせたものの ぶっちゃけて言うと「なんだそのワード!?」って感じだったのでこっそり調べてみました。 SRT 次世代映像伝送プロトコル「SRT」とは何かー株式会社エクスプローラ どうやらRTMP
こんにちはszkです。 配信系の記事が多い今日この頃。 今までのミラー配信の手順で公開していたのは手っ取り早く配信を開始できる「配信サイトを中継し、ブラウザで開く」という方法でした。 しかしこの方法にはいくつかの問題があります。 1.YoutubeLiveなどの配信サイト側の問題や事情により配信が中断れてる可能性がある。 2.一旦遠隔地のサーバを中継するためタイムラグが大きくなる. そこで、今回は中継する配信サイトに位置するサーバを自前で用意して利用するという方法を紹介しようと思います。 やっとszkの本業の話っぽくなってきたな! この記事について 今回紹介する方法は過去に紹介した方法に比べるとかなり難しい、いわゆる「上級編&応用編」というべき内容となっています。 実施にはIT及びそのネットワークと、映像配信にについての基本的な知識を必要とします。 なるべく、初心者の人にわかりやすく説明す
こんにちはszkです。配信系の記事が多い今日この頃。今までのミラー配信の手順で公開していたのは手っ取り早く配信を開始できる「配信サイトを中継し、ブラウザで開く」という方法でした。しかしこの方法にはいくつかの問題があります。1.YoutubeLiveなどの配信サイト側の問題や事情により配信が中断れてる可能性がある。2.一旦遠隔地のサーバを中継するためタイムラグが大きくなる.そこで、今回は中継する配信サイトに位置するサーバを自前で用意して利用するという方法を紹介しようと思います。やっとszkの本業の話っぽくなってき... サーバインストール先のマシンの用意 基本的には1台PCを新たに組んでもらってメディアから物理でインストールを行います。 しかし、言うてもそんな余りのマシンも無いのが実情。 「そんな何台もPC持ってないよ!」という方も、仮想マシンを組み立てられる環境なら追加物資無しでサーバをお
ActionScript (10) Starling Framework (9) CG (2) Linux (2) TinCan/ExperienceAPI (1) Uncategorized (2) アウトドア (172) イベント (11) お店 (9) ギア (46) キャンプ (39) サーフィン (6) その他 (8) トレラン (20) ラン (22) 海水浴・磯遊び (15) 登山 (44) 自転車 (6) イベント・展示会 (22) お仕事 (107) After Effect (43) eラーニング (1) お知らせ (10) スマホアプリ開発 (1) ブルーバックスタジオ (12) 会社行事 (11) 撮影 (20) 機材 (13) 編集 (15) グルメ (36) タピオカ (11) ラーメン (3) デジタル一眼ムービー (3) プライベート (195) 旅行 (8
はじめに 清水です。先日以下のエントリでストリーミングサーバにWowzaを使ってライブ配信を行ってみました。 AWSのWowzaでライブ動画配信してみた 先日のエントリの構成は、ライブエンコーダから受けた映像をストリーミングサーバ(Wowza on EC2)から直接クライアントに配信するというものでした。この構成でもライブ動画配信はできており、例えば少数のクライアントのみを想定している場合などでしたら問題はありません。 ただある程度の規模になってくるとEC2側が動画配信の負荷(主にネットワーク帯域)に耐えられず、配信が不安定になるという問題が発生します。対策の一つとしてCDNをユーザの前段に入れることが考えられます。AWSならAmazon CloudFrontを導入することでこの構成が構築できますね。またCloudFrontを使用することでTCPコネクションをオフロードさせ配信サーバ側の負
MixChannel MixChannelは、(株)Donutsが運営する、おもに若者世代から人気を集めているライブ配信&動画投稿コミュニティアプリです。利用者は累計1,000万ユーザーを超え、月間での利用ユーザー数は80万人ほどと規模の大きなサービスとなっています。 このように大規模なサービスでは日々多くのユーザーがサーバにアクセスするため、サーバは各リクエストに対するレスポンスを高速に返す必要があります。 またMixChannelでは、ライブ配信システムだけでなく、ライブ配信サービスを支えるさまざまなシステムが動いており、ユーザーの行動から次のサービスを考えるための計測も行われています。今回は、多くのユーザーからアクセスされているライブ配信サービスのサーバ技術と、ライブ配信の裏側で運用されている機能や技術について紹介します。 ユーザーのライブ配信を支えるシステムの構成 ライブ配信サ
前編では、ユーザーのライブ配信を支えるシステムの構成について解説を行いました。後編では実際のライブ配信の裏側を解説します。 ライブ配信の裏側 前編で紹介したようなサーバ構成でライブ配信とその周辺機能は構築されています。ここからは、その裏側で運用されている機能のうち、ライブ終了処理とサービスを管理するための機能について紹介します。 ヘルスチェック ライブ配信を開始したとき、配信者のユーザーIDなどのライブに関わる情報はAPIサーバを経由してAmazon RDS上に保存され、配信動画そのものはライブサーバを経由してストレージサーバに保存されます。こうして開始した配信は通常、配信者本人がアプリ内のボタンをタップすることで終了します。このとき、配信停止のリクエストはAPIサーバによって処理されます(図1)。 図1 正常なライブ終了処理とヘルスチェック しかし、配信中にアプリ自体が終了したり、通
ウェブアクセラレータの料金はAWSの3分の1に 当社ではAWS CloudFront を利用して動画や画像の配信を行っており、 パフォーマンスには満足してるものの転送量による課金が嵩む事に悩んでおりました。 画像や動画中心の業界なので、月間で10TB弱のアウトバウンド転送が有り、 AWSでのアウトバウンド転送量課金が15万円/月を超えている状態でした。 関連:そもそもCDNとは CDNの料金比較 AWS CloudFrontの場合 殆どのユーザーは日本国内になる為、東京リージョンの料金が計算対象に成ります。 使えば使うほど、単価は下がりますが余程の大規模サイトでなければ10TB/月に到達しませんので、最も高い単価で1GB当たり15円程度の料金として計算出来ます。 CloudFront料金表 アウトバウンドの料金のみで計測していますが、リージョンデータの転送は余り考慮する程の転送量に成らない
弊社で大規模なアダルトサイトの運用を行う上でのAWS利用構成を紹介させて頂きます。 利用料金を抑えたいというビジネス的な観点と、サービスを止めない為の障害回避を念頭に構成を紹介します。 関連:AWSのt2.microで月間100万PVに耐えるアダルトサイトを制作した話 この記事は技術者向けの内容になっています。 システム開発の発注をお考えの方は、こちらアダルトホームページ制作のご案内をご覧下さい。 サービスを止めない為のAWS利用構成 サービスを止めない事は弊社では2つの思想によって設計をしております。 障害を防ぐ為の堅牢な設計とする 障害が起きた時に瞬時に復旧、あるいは回避する 前者はイメージしやすいと思いますが、弊社では後者のフェイルオーバーも非常に大事であると考えています。 システム障害が起きない様にスペックを十分に確保する等は当然の事ですが、 万が一障害が発生した場合に即座に代替機
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く