💻

React Native の WebView と Webブラウザにおけるビデオ通話再生ポリシーの違い

に公開

この記事は MICIN Advent Calendar 2025 の4日目の記事です。
前回は Kensuke Takahashi さんの「攻めと守りを両立する、2025年に情報セキュリティチームが取り組んだ4つのこと」でした。

https://adventar.org/calendars/11601

https://zenn.dev/micin/articles/9d581eded56b70

私は株式会社MICINのオンライン医療事業部でアプリケーションエンジニアをしているdoutoriと申します。
弊社サービス「クロン」の開発を日々行なっており、医療機関や薬局と端末のビデオ通話を行う「オンライン診療」「オンライン服薬指導」機能を提供しています。

https://app.curon.co/

今回のまえおき

調査のきっかけは、「クロン」のビデオ通話機能を“外部アプリ”に組み込む形で提供した際に発生した問題です。
ここでいう外部アプリとは、クロンとは別に開発・運用されているアプリケーションであり、クロン本体の一部ではなく、ビデオ通話機能のみをWebView等を通じて利用できるようにしたものです。

このような連携形態では、外部アプリの画面やフローの中でクロンのビデオ通話機能だけを呼び出します。そのため、ユーザー体験や技術的な制約がクロン単体での利用時とは異なります。
実際に、外部アプリ経由でビデオ通話を開始した際、WebView上でのビデオ自動再生が期待通りに動作しないケースが発生しました。

本来期待していた挙動とギャップ

クロンが提供しているビデオ診察の一連の流れとしては、大まかに以下のような流れになるのですが、

  1. ビデオルームに入室前に、自カメラにて自映像を出力する
  2. 「ビデオ診察ルームに入室」ボタン押下で、実際に医療機関とオンラインでの診察を行う

カメラの権限は認可されており、ビデオ通話のモジュールにも特に問題は見当たりませんでした。それにもかかわらず、1 の入室前の状態で映像が映らないという事象が発生しました。

オンライン診療のビデオ診察前画面

同機能をWeb版クロンやApp版クロンでも提供してはいるのですが、その際には特に問題が出ていませんでした。
外部アプリに機能提供している関係上、アプリ側の設定が怪しいのはもちろんですが、改めて WebViewやWebブラウザの再生ポリシーの違い、設定方法、各ベンダの仕様などを整理する必要性を感じました。

それぞれの環境での再生ポリシー

Web の場合

video 要素の仕様については、HTML Living Standard にて勧告がされています(要素が追加された当時は HTML5だったと思いますが)

https://html.spec.whatwg.org/multipage/media.html#the-video-element

その後各ブラウザベンダが自動再生のポリシーを策定し、実装されています。

https://developer.chrome.com/blog/autoplay?hl=ja

https://www.chromium.org/audio-video/autoplay/

https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/

https://webkit.org/blog/6784/new-video-policies-for-ios/

共通して言えることとしては、

  • 基本的に自動再生は許可されない(推奨されてない)
  • 再生にはユーザーの何らかのアクションが必要
    • Click
    • Tap
    • TouchEnd
    • KeyDown
    • and more…

ということでした。

ここだけ見ると、ユーザーアクションさえ取れれば再生ができることになるので、悪意を持てばダークパターンになりそうな気がしますが、仕様上はこのようになっているようです。

App版クロン(React Native)の内部ブラウザ(InAppBrowser)の場合

クロンの内部ブラウザには以下のライブラリを利用しています。
このライブラリは各プラットフォームのネイティブブラウザを呼び出すため、通常のWebブラウザと同じ自動再生ポリシーが適用されています。

https://github.com/proyecto26/react-native-inappbrowser

App版クロン(React Native)の Web View の場合

クロンでの WebView には、以下のライブラリを利用しています。

https://github.com/react-native-webview/react-native-webview

このライブラリでは、ビデオ通話に関わるプロパティ mediaPlaybackRequiresUserAction や allowsInlineMediaPlayback の初期値が「自動再生を制限する」設定になっているので、この設定の初期値を明示的に変更する必要があります。

<WebView
  source={{ uri }}
  mediaPlaybackRequiresUserAction={false}  // 自動再生を許可
  allowsInlineMediaPlayback={true}         // iOS用: インライン再生を許可
  // ... 他のプロパティ
/>

WebRTC 利用時の自動再生ポリシーの違い

これまで解説した一般的な自動再生ポリシーとは異なり、WebRTCを使ったリアルタイム通信では、再生開始のタイミングや必要なユーザーアクションに独自のルールがあります。

アプリケーション側の実装として、必ず音声(端末のマイク)と映像(端末のカメラ)に対してのアクセス権の認可が求められるインターフェースになっていると思いますが、

For a two-way video conference, video automatically plays after the user accepts the prompt requesting camera access.

https://developer.apple.com/documentation/webkit/delivering-video-content-for-safari

WebKit に関しては、双方向通信の場合は「認可する」というアクションのみで再生されるとの言及がされています(単方向通信の場合は、「認可する」+「再生する」の2アクションが少なくとも必要)

※ ただ、双方向通信でも何かしら「再生する」に相当するユーザーアクションが推奨されている

さいごに

今回のビデオ通話に限らず、「自動再生」させるということに対する顧客体験については、いろいろ議論の是非はあると思っています。
セキュリティやプライバシー、悪用防止の観点から自動再生は一定の制限が設けられていますが、その理由を改めて理解しておく必要があることを感じました。

今後もより良い顧客体験のために、開発を続けていこうと思います!

株式会社MICIN

Discussion