タグ

webrtcとhtml5に関するmanabouのブックマーク (6)

  • WebRTCを試すときにオッサンが映り続ける問題に対処する - Qiita

    はじめに WebRTCを使ったアプリを作る際に、切っても切れないのがカメラ映像の取得です。ノート型のPCで作業したりすると、延々と自分の顔を見続けなければなりません。そこで、自分の顔の替わりに好きな動画をメディアストリームとして流すサンプルを作って見ました。 仕組み 動画ファイルの変換 ユーザにローカルの動画ファイルを指定してもらう(ファイル選択 or ドラッグ&ドロップ) FileオブジェクトからURLを生成 (window.URL.createObjectURLを利用) それをVideoタグで再生 継続的にCanvasタグに転写 (window.requestAnimationFrameを利用) CanvasタグからMediaStreamを取り出す (Canvas.captureStreamを利用) 音声ファイルの変換 ユーザにローカルの音声ファイルを指定してもらう(ファイル選択 or

    WebRTCを試すときにオッサンが映り続ける問題に対処する - Qiita
  • WebRTCでキャスしよう!片方向リアルタイム映像配信を作ろう

    こんにちは!がねこまさしです。「WebRTCを使ってみよう」シリーズの最新話をお送りします。今回は、簡易的な放送局を作ってみましょう。 片方向配信の特徴 WebRTCを使った音声通話、ビデオチャットのサンプルには、双方向のものが多く見られます。ライブラリもそれを前提とした作りのモノが多いようです。なので今回は、片方向配信を実際に動かしてみましょう。 片方向配信には、双方向通信とは異なる特徴があります。 視聴側はカメラやマイクといった機器が不要なので、参加のハードルが下がる Peer-to-Peerでもフルメッシュ構造にはならないので、より多くの人が同時に利用できる 特に同時接続数はは双方向では4~5人が実用範囲なのに対し、片方向では10~30人程度に対して1つのPCから配信できます。ちょっとした仲間内のイベントや、社内イベントであれば、十分にカバーできるのではないでしょうか?(社内で動かせ

    WebRTCでキャスしよう!片方向リアルタイム映像配信を作ろう
  • [翻訳] coTURN:マルチテナント型のオープンソースのSTUN/TURNサーバ

    [翻訳] coTURN:マルチテナント型のオープンソースのSTUN/TURNサーバ 岩瀬 義昌(HTML5 Experts.jp編集部) 記事は、webrtcHacksにて英語で掲載されている記事を、webrtcHacks様の許可を得た上で、翻訳&掲載している記事となります。修正・更新・コメント等がございましたら、webrtchacks/coturn/ までお願いいたします。 This article originally appeared in English at webrtcHacks and has been translated with webrtcHack’s permission for posting to html5experts.jp in Japanese. Please visit http://webrtchacks.com/coturn for edits,

    [翻訳] coTURN:マルチテナント型のオープンソースのSTUN/TURNサーバ
  • WebRTC(PeerJS)で遠隔作業支援システムを作る(3) - Tech-Sketch

    WebRTCを用いた遠隔作業支援システムを作ります。 前回 はスマートグラス(Vuzix M100)とサーバサイド(node.js + express + peerjs-server)の環境構築について説明しました。今回はCoffeeScriptで記述されたモジュールの全体構成と、PeerJS & MediaStreamの初期化処理について解説します。 CoffeeScript WebRTCを用いた遠隔作業支援システムの中心的なロジックは、ブラウザで動作します。今回はコールバックを駆使するそれなりに複雑な処理を実装するため、画面操作をハンドリングするロジック、PeerJSの操作とコールバックをハンドリングするロジック、シグナリング等の共通ロジック、と責務を分割して実装したほうが見通しが良くなるでしょう。 ただしJavaScriptはプロトタイプベースのオブジェクト指向言語のため、Java

    WebRTC(PeerJS)で遠隔作業支援システムを作る(3) - Tech-Sketch
  • WebRTC落穂拾い:初心者がつまずきやすいポイントをフォロー

    こんにちは、がねこまさしです。以前WebRTCに関する連載を書かせていただきましたが、今回はそのフォロー記事を書きたいと思います。 4月に記事をベースにしたハンズオンを行ったり、別のイベントで参加者の方とお話しさせていただく機会がありました。すると、みなさんいろいろな部分で引っ掛かってしまうケースが多いことが分かりました。私の記事の説明不足も多いので、以下のつまずきやすいポイントについて、この機会に改めて補足させていただきます。 カメラがつながらない 手動シグナリングがうまくいかない シグナリングサーバーでつながらない Firefoxでも使いたい カメラがつながらない 第1回のHTML5でWebRTCを使ってみよう!「カメラを使ってみよう」編ではまずカメラにアクセスします。ところが、カメラにつながらないケースが時々発生しているようです。 ブラウザが違うケース 記事に書いたソースコードは、C

    WebRTC落穂拾い:初心者がつまずきやすいポイントをフォロー
  • 無料でLINEやSkypeのようなリアルタイムアプリが簡単に作れるSkyWay

    無料でLINEやSkypeのようなリアルタイムアプリが簡単に作れるSkyWay:HTML5アプリ作ろうぜ!(10)(1/2 ページ) HTML5関連のPtoP技術通信として注目のWebRTCを、JavaScriptだけで手軽に使えるプラットフォーム「SkyWay」と、その中核となるライブラリ「PeerJS」の概要と基的な使い方を解説します。

    無料でLINEやSkypeのようなリアルタイムアプリが簡単に作れるSkyWay
  • 1