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。 我的网站有一个商店，这个简单的webrtc也有商店。 那么，如何结合两个商店呢？

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