Using srs to build a simple flv.js Demo

README.md

live stream player

Using

using srs

docker build -t srs:3.0.0 .
docker run --name srs -p 1935:1935 -p 8080:8080 srs:3.0.0

push target flv-stream to server

ffmpeg -re -i /opt/yxr/game.flv -c copy -f flv  rtmp://localhost:1935/live/livestream

using dva build SPA fastly

using FLV.js as component and index.js as root routes.

References

1. http-flv: getting started

Dockerfile

FROM ubuntu:trusty

RUN apt-get update
RUN apt-get install git gcc g++ make libssl-dev python unzip -y

RUN git clone https://github.com/ossrs/srs.git /srs

RUN cd /srs && git checkout 3.0release

WORKDIR /srs/trunk

RUN ./configure
RUN make

EXPOSE 1935 8080

CMD [ "./objs/srs", "-c", "./conf/http.flv.live.conf" ]

FLV.js

import React from 'react';
import flvjs from 'flv.js';

import styles from './FLV.css';

console.log('flvjs.isSupported:', flvjs.isSupported(), flvjs.getFeatureList());

class FLV extends React.Component {
  componentDidMount = () => {
    const url = this.props.url;
    if (flvjs.isSupported()) {
      const videoElement = this.flvPlayerNode;
      const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        isLive: true,
        enableWorker: true,
        cors: true,
        enableStashBuffer: false,
        url,
      });
      flvPlayer.attachMediaElement(videoElement);
      flvPlayer.load();
      videoElement.addEventListener('canplay', () => {
        videoElement.removeEventListener('canplay')
        flvPlayer.play();
        console.info('url:', url)
        console.info('player:', flvPlayer);
        console.info('mediaInfo:', flvPlayer.mediaInfo);
        console.info('statisticsInfo:', flvPlayer.statisticsInfo);
      })
    }
  }
  render = () => {
    return (
      <div>
        <video id="videoElement" ref={node => this.flvPlayerNode = node} width="100%" />
      </div>
    );
  }
}

export default FLV;

Index.js

import React from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import querystring from 'querystring';
import styles from './IndexPage.css';
import FLV from '../components/FLV';

function IndexPage({ location }) {
  const params = querystring.parse(location.search.slice(1));
  const url = params.url;
  const nrow = parseInt(params.nrow);
  const ncol = parseInt(params.ncol);
  const colSpan = 24 / ncol;
  const height = `${100 / nrow}vh`;
  const table = [];
  for (let i = 0; i < nrow; i += 1) {
    const row = [];
    for (let j = 0; j < ncol; j += 1) {
      row.push(
        <Col span={colSpan} key={`${i}-${j}`}>
          <FLV url={url} />
        </Col>);
    }
    table.push(
      <Row gutter={8} height={height} key={`${i}`}>
        {row}
      </Row>);
  }
  return (
    <div className={styles.normal}>
      {table}
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);