Search code examples
javascripthtmlreactjsreact-nativelive-streaming

React-native live streaming with Vimeo

I'm trying to create a page with livestream broadcast. I used WebView with embedded HTML code. Here is my code:

import React, {Component} from 'react';
import {Text, View, StyleSheet} from 'react-native';

import Video from 'react-native-video';
import WebView from 'react-native-autoheight-webview';

//https://vimeo.com/525411068

export default class Livestream extends Component {
  videoError = () => {
    console.log('Error');
  };
  render() {
    return <VimeoPlayer />;
  }
}

const VimeoPlayer = ({videoId, onError}) => {
  return (
    <WebView
      style={styles.style}
      onError={onError}
      allowsFullscreenVideo
      scrollEnabled={false}
      automaticallyAdjustContentInsets
      source={{
        html: `
          <html>
            <body>
              <iframe src="https://player.vimeo.com/video/${videoId}" width="100%" height="200px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
              <script src="https://player.vimeo.com/api/player.js"></script>
            </body>
          </html>
        `,
      }}
    />
  );
};

const styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  style: {height: 200, maxWidth: '100%'},
});

VimeoPlayer.propTypes = {
  videoId: '525411068',
  onError: this.videoError,
};

I have a Vimeo Pro trial and found my video code on the video dashboard but I couldn't change the privacy option for the video and it seems like it can only be viewed by me.

I just wanted to create a page with Livestream on it. But I'm a newbie at react native and I would love to learn from my mistakes.

Solution

  • The section "How it works" from Myagi/react-native-vimeo github project explain well what @dilshan means to say:

    Ideally, the HTML page content would just be passed as a string into the webview, however if that were the case then the Vimeo JS API would not function. As stated in the Vimeo JS API documentation, the Froogaloop library can only interact with the Vimeo iFrame when the page is served up by a web server, not when it is loaded locally.

    However, there's a npm package called react-native-vimeo-iframe that works well.