タグ

2022年5月26日のブックマーク (8件)

  • Socket.ioとReactNaiveの連携(の概要) - Qiita

    Socket.ioとReactNativeの接続をテストしてみます(当の触りだけです)。 Socketのサーバ側は特に重要ではないのでGet Startedのコードを流用させていただきます。 Socket Serverの準備 準備 まずは作業ディレクトリを作成し、必要なモジュールをインストールしておきます。 mkdir socket-server cd socket-server npm init -y npm install --save express socket.io index.js Socketサーバを実装します。 今回は、全員配信に加え、個人配信も試します。 io.emit()で全員配信 io.to(id).emit()で個人配信(正確にはroom配信) var express = require('express'); var app = express(); var h

    Socket.ioとReactNaiveの連携(の概要) - Qiita
  • socket.ioのv3で知らなかったこと

    サーバーサイド 初期化 httpサーバーと共存方式、websocketサーバーだけのスタンドアロン方式、expressを使った方法 koaを使った方法、tsを用いる方法などちゃんとドキュメントに書かれてあった。 イベント socket.emitのほかに単純にsocket.send()をするだけで、messageイベントとして送信される。 // 送り手 socket.send('hello') // 受け手 socket.on('message', data => console.log(data)); // hello

    socket.ioのv3で知らなかったこと
  • SkyWay 配信者側で加工した映像を配信する - Qiita

    概要 弊社のインターンのお手伝いで、たまたまWebRTCを触る機会があったので、 気軽に加工した映像を配信したりできるのかなと思って試したので記します ※ 来なら、MCU ( Multipoint Control Unit )とかで映像加工するのかなと思うんですが、 今回は、インターン期間中に気軽に実装できそうなものくらいの感覚なので 配信者側(クライアント側)で映像を加工して配信する想定です。 題 今回は、SkyWay さんのサービスを利用します。(簡単にビデオ通話が実装できます) 結論から言うと、 カメラから取得した映像ストリームをCanvasに描画し、 Canvasで加工したものを再び映像ストリームとして取得したものを配信すれば可能 です。 なので、👇のように、白黒モザイク加工を施した上で、Websocketで受け取ったコメントを映像に載せて配信なんかもできます 簡易版として、

    SkyWay 配信者側で加工した映像を配信する - Qiita
  • iOSアプリでWebRTC - Qiita

    自己紹介 iOSアプリエンジニア iOSアプリ, Androidアプリ、web(java/ruby/php)を対応範囲広めにやっている感じ。 モチベーション 業務でWebRTCを使ったビデオ通話を実装することになった。 だが、Twilio Voideo SDK(サーバーも含めてのビデオ通話サービス)を使ったものだったため、WebRTCをちゃんとわからなくても、サンプルとGetStartedの通りにやれば実装できてしまった。 WebRTC自体、どういう感じで成り立っているのか知りたいと思い調べた。 WebRTCとは Wikipediaより ウェブブラウザやモバイルアプリケーションにシンプルなAPI経由でリアルタイム通信(英: real-time communication; RTC)を提供する自由かつオープンソースのプロジェクトである。ウェブページ内で直接のピア・ツー・ピア通信によって、プラ

    iOSアプリでWebRTC - Qiita
  • 「socket.ioでcorsエラー」 とりあえずなんとかする

    undefined 「socket.io」 「node.js」 「CORS」

  • WebRTCのブラウザ対応状況の調べ方 - Qiita

    こんにちは、最近業務でWebRTCを勉強し始めたものです。 WebRTC使うぞ!となった時にまず気になるのが自分たちが対応したいブラウザでサポートされているのかという話なのですが、WebRTCはそれが単独のAPIで構成されているわけではなく、またコーデックなども関わってくるので、自信を持って大丈夫と言えるようにまとめてみました。 WebRTCのAPI まず WebRTC と一口に言っても window.webrtc みたいなオブジェクトが生えているわけではなく、ブラウザを介したユーザ間のリアルタイムコミュニケーションを実現するためのAPIの総称が WebRTC です。 それを実現するためには大きく二つあって 通信に使用するメディア(カメラやマイク)へのアクセス navigator.mediaDevices.getUserMedia() を使って MediaStreams を取得します。 P

    WebRTCのブラウザ対応状況の調べ方 - Qiita
  • WebRTCのリアルタイム音声合成サーバ(MCU)を作ってみた

    この他にもMCUで映像を合成する場合、映像のレイアウトに柔軟性がなく(出力が1つの映像となるため)、フロントエンド側からするとSFUのように個別の映像が貰えるほうが自由度が高くて嬉しいという観点もあります。 ただ、音声の場合、Web会議的なユースケースにおいてはレイアウトの概念がなくPCのスピーカーから出てくる頃にはMCUとSFUで音の違いはほとんどないでしょう。また、映像に比べると音声の合成はそれほどサーバへの負荷が高くありません。 音声にMCUを使う嬉しい点として、SFU経由だと多人数Web会議での通話が成り立たないほど回線が細い場合(移動通信回線の通信制限状態など)でもMCU経由だと通信量が抑えられるので通話できるかもしれないということが挙げられます。 そこで記事では比較的実用的と思われる音声のみを扱うMCUを実際に作ってみます。 MCUを作ってみよう ブラウザから複数の音源をMC

    WebRTCのリアルタイム音声合成サーバ(MCU)を作ってみた
  • react-native webrtc开发