Question

我想做什么： 将vidyoConnector.js脚本添加到react组件，以便使用vidyo创建WebRTC实例。

发生了什么： 它不会添加特定的vidyoConnector.js，而是加载index.html，因为我在控制台中收到意外令牌错误。

我使用react-async-script-loader加载此vidyoConnector脚本。还尝试使用 Weback addAssetPlugin 添加脚本，但最终破坏了Build。

我期待的是什么： 将库文件加载到具有依赖关系的组件中的任何最佳方法。

注意 - Vidyo库是用jquery编写的，因此不支持ES6模块化模式。

请帮助我找到实现相同目标的最佳方法。

import React from "react";
import { FormattedMessage } from "react-intl";
import scriptLoader from "react-async-script-loader";
import messages from "./messages";
import $ from "jquery";

class HomePage extends React.Component {

  componentDidMount() {
      const script = document.createElement("script");
      const webrtcLogLevel = "&webrtcLogLevel=info";
      const webrtc = true;
      const plugin = false;

      script.src = "https://static.vidyo.io/4.1.15.7/javascript/VidyoClient/VidyoClient.js?onload=onVidyoClientLoaded&webrtc=" +
  webrtc +
  "&plugin=" +
  plugin +
  webrtcLogLevel;
script.async = true;

script.onload = () => {
  VidyoClientInitialize($);
  console.log(VC);
};

   document.getElementsByTagName("head")[0].appendChild(script);
}

render() {
   return (
      <div>
        <h1>
          <FormattedMessage {...messages.header} />
        </h1>
        <button onClick={this.joinCall}>Connect</button>
         <div id="renderer" />
       </div>
      );
   }

  onVidyoClientLoaded(status) {
     console.log(
         "Status: " + status.state + "Description: " + status.description
     );
     switch (status.state) {
         case "READY": // The library is operating normally
             $("#connectionStatus").html("Ready to Connect");
             $("#helper").addClass("hidden");
             StartVidyoConnector(VC, VCUtils.params.webrtc);
           break;
         case "RETRYING": 
             $("#connectionStatus").html(
      "Temporarily unavailable retrying in " +
        status.nextTimeout / 1000 +
        " seconds"
    );
    break;
  case "FAILED": // The library operating has stopped
    ShowFailed(status);
    $("#connectionStatus").html("Failed: " + status.description);
    break;
  case "FAILEDVERSION": // The library operating has stopped
    UpdateHelperPaths(status);
    ShowFailedVersion(status);
    $("#connectionStatus").html("Failed: " + status.description);
    break;
  case "NOTAVAILABLE": // The library is not available
    UpdateHelperPaths(status);
    $("#connectionStatus").html(status.description);
    break;
  }
  return true;
}

joinCall() {
  vidyoConnector.Connect({
  host: "prod.vidyo.io", 
  token: "XXXX", 
  displayName: "Sachin", 
  resourceId: "demoRoom", 
  onSuccess: function() {
    console.log("Connected!! YAY!");
  },
  onFailure: function(reason) {
    console.error("Connection failed");
  },
  onDisconnected: function(reason) {
    console.log(" disconnected - " + reason);
  }
 });
 }
}

export default scriptLoader([
  "./vidyoConnector.js",
])(HomePage);

console view of loaded js file

无法在react组件中加载本地js文件（使用React-Biolerplate）

0 个答案: