Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
sadnessOjisan committed Jun 12, 2023
1 parent 4d2efd3 commit 04e296f
Showing 1 changed file with 2 additions and 15 deletions.
17 changes: 2 additions & 15 deletions src/contents/20230612-streaming-react-ui/index.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
path: /streaming-react-ui
created: "2023-06-12"
title: 音声や映像を配信するUIをWebで実装するときの小技
title: WebRTC と React を組み合わせるなら Flux 設計が有効
visual: "./visual.png"
tags: [react, webrtc]
userId: sadnessOjisan
Expand All @@ -26,22 +26,9 @@ OGP は Flux ぽい画像だ。

(完全版を書くとしたら技術書典かなぁ。WebRTC でマンション買えたら本望だけど、ドラム式洗濯機代くらいになったらうれしいなぁ...)

## React を使わなくていいのならば React を使わない

WebRTC が本編なのでこれは書かなくてもいいかと思ったけど、最近思い知らされたことがあったのでウォーミングアップがてら書く。

映像や音声を扱うとなると video タグや audio タグが出てくる。
これらは要素それ自体が再生中か、再生時間などの状態を持っている。
もし UI に再生時間を出そうとして React で実装しているのならば、DOM と state を同期させる仕組みが必要となる。
useEffect と ref とタイマーを使って実現もできるが、いざ実装してみると要件追加とかで色々トラブルに見舞われやすい。
大人しく DOM だけの世界で戦った方が楽だったりもする。
もしコンポーネントベースの UI が欲しいのであればそれこそ WebComponents という選択肢もある。
もしアプリケーションに音声関連の機能を組み込む必要があるならば、URL 単位でレポジトリごと切り出して CDN 通して垂直分割のマイクロフロントエンドという逃げ道だってある。
React を使わなくていいのならば使わないに越した方が良いだろう。

## WebRTC と組み合わせる時の実装テクニック

ここからが本編。反対に WebRTC を使う場合は React を使える環境なら使った方が良いと思っている。一択ではないと思うが、いわゆる Flux 設計がしやすい技術選定をオススメしたい。
WebRTC を使う場合は React を使える環境なら使った方が良いと思っている。一択ではないと思うが、いわゆる Flux 設計がしやすい技術選定をオススメしたい。

### WebRTC で繋ぐためには何をすべきか

Expand Down

0 comments on commit 04e296f

Please sign in to comment.