SimpleWebRtc不工作:窗口未定义

Question

我正在尝试集成SimpleWebRtc。我创建了一个新组件，并集成了我在SimpleWebRtc站点上找到的代码，并得到了一个错误：

ReferenceError: window is not defined
at eval (webpack:///./node_modules/@andyet/simplewebrtc/node_modules/webrtc-adapter/src/js/adapter_core.js?:16:93)
at Module../node_modules/@andyet/simplewebrtc/node_modules/webrtc-adapter/src/js/adapter_core.js (/Users/test/node/test-frontend/frontend-test/server.js:2769:1)
at __webpack_require__ (/Users/test/node/test-frontend/frontend-test/server.js:21:30)
at eval (webpack:///./node_modules/@andyet/simplewebrtc/module.js?:37:72)
at Module../node_modules/@andyet/simplewebrtc/module.js (/Users/test/node/test-frontend/frontend-test/server.js:2493:1)
at __webpack_require__ (/Users/test/node/test-frontend/frontend-test/server.js:21:30)
at eval (webpack:///./app/src/components/common/calling/CallingSimple.js?:7:78)
at Module../app/src/components/common/calling/CallingSimple.js (/Users/test/node/test-frontend/frontend-test/server.js:1500:1)
at __webpack_require__ (/Users/test/node/test-frontend/frontend-test/server.js:21:30)
at eval (webpack:///./app/src/routes.js?:36:99)

我的代码是：

import { Provider } from 'react-redux';
import React from 'react';
import ReactDOM from 'react-dom';
import * as SWRTC from '@andyet/simplewebrtc';

// ====================================================================
// IMPORTANT SETUP
// ====================================================================
// Replace `YOUR_API_KEY` here with the API key you received when
// signing up for SimpleWebRTC
// --------------------------------------------------------------------
const API_KEY = '************'; //i changed this to actual api key
// ====================================================================

const ROOM_NAME = 'YOUR_ROOM_NAME';
const ROOM_PASSWORD = 'YOUR_ROOM_PASSWORD';
const CONFIG_URL = `https://api.simplewebrtc.com/config/guest/${API_KEY}`;

const stores = SWRTC.createStore();

class CallingSimpleApp extends React.Component {
    constructor (props) {
        super(props)
    }

    render() {
        <Provider store={stores}>
        <SWRTC.Provider configUrl={CONFIG_URL}>
            {/* Render based on the connection state */}
            <SWRTC.Connecting>
                <h1>Connecting...</h1>
            </SWRTC.Connecting>

            <SWRTC.Connected>
                <h1>Connected!</h1>
                {/* Request the user's media */}
                <SWRTC.RequestUserMedia audio video auto />

                {/* Enable playing remote audio. */}
                <SWRTC.RemoteAudioPlayer />

                {/* Connect to a room with a name and optional password */}
                <SWRTC.Room name={ROOM_NAME} password={ROOM_PASSWORD}>
                {props => {
                    /* Use the rest of the SWRTC React Components to render your UI */
                }}
                </SWRTC.Room>
            </SWRTC.Connected>
        </SWRTC.Provider>
        </Provider>
    }
}

export default CallingSimpleApp

我在SimpleWebRTC上找到的代码如下：

import { Provider } from 'react-redux';
import React from 'react';
import ReactDOM from 'react-dom';
import * as SWRTC from '@andyet/simplewebrtc';

// ====================================================================
// IMPORTANT SETUP
// ====================================================================
// Replace `YOUR_API_KEY` here with the API key you received when
// signing up for SimpleWebRTC
// --------------------------------------------------------------------
const API_KEY = 'YOUR_API_KEY';
// ====================================================================

const ROOM_NAME = 'YOUR_ROOM_NAME';
const ROOM_PASSWORD = 'YOUR_ROOM_PASSWORD';
const CONFIG_URL = `https://api.simplewebrtc.com/config/guest/${API_KEY}`;

const store = SWRTC.createStore();

ReactDOM.render(
  <Provider store={store}>
    <SWRTC.Provider configUrl={CONFIG_URL}>
      {/* Render based on the connection state */}
      <SWRTC.Connecting>
        <h1>Connecting...</h1>
      </SWRTC.Connecting>

      <SWRTC.Connected>
        <h1>Connected!</h1>
        {/* Request the user's media */}
        <SWRTC.RequestUserMedia audio video auto />

        {/* Enable playing remote audio. */}
        <SWRTC.RemoteAudioPlayer />

        {/* Connect to a room with a name and optional password */}
        <SWRTC.Room name={ROOM_NAME} password={ROOM_PASSWORD}>
          {props => {
            /* Use the rest of the SWRTC React Components to render your UI */
          }}
        </SWRTC.Room>
      </SWRTC.Connected>
    </SWRTC.Provider>
  </Provider>,
  document.getElementById('app')
);

另外，我的网站已经使用了redux。我的网站有一个商店和这个简单的商店也有商店。那么，如何将两者结合起来呢？

Answer 1

如果您与webpack一起使用UMD输出，则可能会遇到以下问题：https://medium.com/@JakeXiao/window-is-undefined-in-umd-library-output-for-webpack4-858af1b881df

至于如何将SimpleWebRTC组合到现有的Redux存储中，我在这里更新了文档：https://docs.simplewebrtc.com/#/Store。您还可以比较示例应用程序中的商店设置：https://github.com/simplewebrtc/simplewebrtc-talky-sample-app/blob/master/src/index.tsx#L25