2

I've been trying to use WebRTC on iOS platform in React, and I have trouble with 'playsInline' functions. I add both playsInline attributes on video tag, and set 'allowsInlineMediaPlayback' to be true on Webview settings. If camera button is toggled, full black screen popped up with 'live streaming' written on bottom, and then I closed the live streaming window, the camera stopped.

return (
  <video
    autoPlay = { true }
    className = { className }
    id = { id }
    muted = { true }
    playsInline = { true }
    ref = { this._setVideoElement }
    style = { style }
    { ...eventHandlers } />
);

<WebView
  userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36"
  source={{ uri: 'https://www.***' }}
  ref = {webviewRef}
  onMessage={handleOnMessage}
  originWhitelist={['*']}
  allowsInlineMediaPlayback = {true}
  allowsFullscreenVideo = {true}
  javaScriptEnabled = {true}
  scalesPageToFit
  mediaPlaybackRequiresUserAction={false}
  startInLoadingState
  javaScriptEnabledAndroid
  useWebkit
/>

I added both 'playsInline' and 'allowsInlineMediaPlayback = { true }' and it doesn't work.

SANGJIN LEE
  • 21
  • 1

1 Answers1

1

Check allowsInlineMediaPlayback here https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md

Boolean that determines whether HTML5 videos play inline or use the native full-screen controller. The default value is false.

In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute.

Ndee
  • 21
  • 2