首页 > 解决方案 > ReactJS chrome cast 集成到视频标签中

问题描述

如何管理正在流式传输 aws IVS 频道的 HTML5 视频标签的 chromecasting。我已经设法将频道流式传输到视频标签中,但它没有处理 chromecasting anyhomw。

function App(props) {

  const divEl = useRef(null);
  const videoEl = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');

    script.src = 'https://player.live-video.net/1.0.0/amazon-ivs-player.min.js';
    script.async = true;

    document.body.appendChild(script);

    script.onload = () => {
      if (IVSPlayer.isPlayerSupported) {
        const player = IVSPlayer.create();
        player.attachHTMLVideoElement(document.getElementById('video-player'));
        player.load(STREAMING_URL);
        player.play();
        player.chromecasting() // it is throwing the error. 
      }
    }

    return () => {
      document.body.removeChild(script);
    }

  },[])

  return (
    <React.Fragment>
    <div ref={divEl} className="video-streaming">
      <video id="video-player" x-webkit-airplay="allow" 
        ref={videoEl} controls>
      </video>
    </div>
    </React.Fragment>
  );
}

export default App;

我已经尝试过这个npm 包,但它适用于 video.js,所以它在这种情况下不起作用。

标签: reactjsamazon-web-serviceshtml5-videochromecastamazon-ivs

解决方案


推荐阅读