关于在 Window 系统下二次开发开源在线视频会议 jitsi-meet 的问题

604 阅读4分钟

Window 系统下开发

安装WSL子系统开发,windows系统无法开发。

WSL安装

WSL安装开发环境

不能在windows系统下开发。github.com/jitsi/jitsi…

安装包

官方说的如果环境配置好了,可以直接 npm install 。但是由于国内梯子的问题,加上很多包是直接从github上面拉取的。所以无法下载。经测试,有两个始终无法下载。

  • react-native-webrtc@106.0.5

    有一个zip文件需要下载

  • resemblejs@4.0.0

    未发现问题

其中一个是用于 native 端的,由于我这里只是在 web 端上面运行,所以这个就暂时不安装了。

另一个看包名是用于分析和比较图片的,看代码和截屏有关,这里先注释掉这部分代码。

1.png 只有这一个地方使用到了这个包。(注意下面的代码也要注释掉)。

其他的:

"@jitsi/excalidraw": "<https://github.com/jitsi/excalidraw/releases/download/v0.0.12/jitsi-excalidraw-0.0.12.tgz>",
"@matrix-org/olm": "<https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz>",
"lib-jitsi-meet": "<https://github.com/jitsi/lib-jitsi-meet/releases/download/v1583.0.0+931ca368/lib-jitsi-meet.tgz>",
"react-native-dialog": "<https://githu.com/jitsi/react-native-dialog/releases/download/v9.2.2-jitsi.1/react-native-dialog-9.2.2.tgz>",

上面这四个包搭梯子下载下来放在自己的服务器上面。如下:

"@matrix-org/olm": "../jitsi-git-package/olm-3.2.3.tgz",
"@jitsi/excalidraw": "../jitsi-git-package/jitsi-excalidraw-0.0.12.tgz",
"lib-jitsi-meet": "../jitsi-git-package/lib-jitsi-meet.tgz",
"react-native-dialog": "../jitsi-git-package/react-native-dialog-9.2.2.tgz",

关于包无法安装的问题算是解决了。至于那两个无法安装的,总归是有办法解决的,后面再想办法。

安装步骤

如果只是更改包路径和删除那两个无法安装的包,直接 npm install 可能还是有问题(像是多了会卡住一样)。这里给与下面的安装步骤。

首先:

<!-- default 默认的 dependence -->
"@giphy/js-fetch-api": "4.7.1",
"@giphy/react-components": "5.6.0",
"@giphy/react-native-sdk": "1.7.0",
"@giphy/js-analytics": "4.0.7",
"@giphy/js-brand": "2.0.4",
"react-native": "0.68.5",
"@matrix-org/olm": "../jitsi-git-package/olm-3.2.3.tgz",
"@jitsi/excalidraw": "../jitsi-git-package/jitsi-excalidraw-0.0.12.tgz",
"lib-jitsi-meet": "../jitsi-git-package/lib-jitsi-meet.tgz",
"react-native-dialog": "../jitsi-git-package/react-native-dialog-9.2.2.tgz",
"react-native-video": "<https://git@github.com/react-native-video/react-native-video#7c48ae7c8544b2b537fb60194e9620b9fcceae52>"

<!-- DEV -->
"@babel/core": "7.16.0",
"@babel/eslint-parser": "7.16.0",
"@babel/plugin-proposal-export-default-from": "7.16.0",
"@babel/preset-env": "7.16.0",
"@babel/preset-flow": "7.16.0",
"@babel/preset-react": "7.16.0",
"@jitsi/eslint-config": "4.1.5",
"@types/js-md5": "0.4.3",
"@types/lodash": "4.14.182",
"@types/react": "17.0.14",
"@types/react-dom": "17.0.14",
"@types/react-linkify": "1.0.1",
"@types/react-native": "0.68.9",
"@types/react-redux": "7.1.24",
"@types/react-window": "1.8.5",
"@types/unorm": "1.3.28",
"@types/uuid": "8.3.4",
"@types/zxcvbn": "4.4.1",
"@typescript-eslint/eslint-plugin": "5.30.5",
"@typescript-eslint/parser": "5.30.4",
"babel-loader": "8.2.3",
"babel-plugin-optional-require": "0.3.1",
"circular-dependency-plugin": "5.2.0",
"clean-css-cli": "4.3.0",
"css-loader": "3.6.0",
"eslint": "8.25.0",
"eslint-plugin-flowtype": "8.0.3",
"eslint-plugin-import": "2.25.2",
"eslint-plugin-jsdoc": "37.0.3",
"eslint-plugin-react": "7.26.1",
"eslint-plugin-react-native": "3.11.0",
"eslint-plugin-typescript-sort-keys": "2.1.0",
"jetifier": "1.6.4",
"metro-react-native-babel-preset": "0.67.0",
"patch-package": "6.4.7",
"process": "0.11.10",
"sass": "1.26.8",
"style-loader": "3.3.1",
"traverse": "0.6.6",
"ts-loader": "9.4.1",
"typescript": "4.7.4",
"unorm": "1.6.0",
"webpack": "5.57.1",
"webpack-bundle-analyzer": "4.4.2",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.7.3"

主要替换你的路径,还有就是 webpack-cli 这个要升级到 4.10.0 以上,不然会有 **cli.isMultipleCompiler is not a function 的错误。这里有 patch-package 修改package 包的内容(原来使用这个修改啊),所以先安装这么多。 @giphy/js-analytics@giphy/js-brand" 必须指定这两个版本。如果不指定,会安装高版本的,有问题。默认的 package.json 里面是没有这两个库的。

然后安装剩余的即可。

npm install @amplitude/react-native@2.7.0 @atlaskit/flag@14.1.0 @atlaskit/icon@21.2.0 @atlaskit/inline-dialog@13.0.9 @atlaskit/inline-message@11.0.8 @atlaskit/multi-select@15.0.5 @atlaskit/spinner@15.0.6 @atlaskit/theme@11.0.2 @atlaskit/tooltip@17.1.2 @emotion/react@11.10.0 @emotion/styled@11.10.0 @hapi/bourne@2.0.0 @jitsi/js-utils@2.0.5 @jitsi/logger@2.0.0 @jitsi/rnnoise-wasm@0.1.0 @jitsi/rtcstats@9.5.1 @microsoft/microsoft-graph-client@3.0.1 @mui/material@5.10.2 @mui/styles@5.10.2 @react-native-async-storage/async-storage@1.17.3 @react-native-community/clipboard@1.5.1 @react-native-community/netinfo@7.1.7 @react-native-community/slider@4.1.12 @react-native-google-signin/google-signin@7.0.4 @react-navigation/bottom-tabs@6.5.3 @react-navigation/elements@1.3.13 @react-navigation/material-top-tabs@6.5.2 @react-navigation/native@6.1.2 @react-navigation/stack@6.3.11 @svgr/webpack@6.3.1 @tensorflow/tfjs-backend-wasm@3.13.0 @tensorflow/tfjs-core@3.13.0 @types/amplitude-js@8.16.2 @types/audioworklet@0.0.29 @types/w3c-image-capture@1.0.6 @vladmandic/human@2.6.5 @vladmandic/human-models@2.5.9 @xmldom/xmldom@0.7.9 amplitude-js@8.2.1 base64-js@1.3.1 bc-css-flags@3.0.0 clipboard-copy@4.0.1 clsx@1.1.1 dropbox@10.7.0 focus-visible@5.1.0 grapheme-splitter@1.0.4 i18n-iso-countries@6.8.0 i18next@17.0.6 i18next-browser-languagedetector@3.0.1 i18next-xhr-backend@3.0.0 image-capture@0.4.0 jquery@3.6.1 jquery-i18next@1.2.1 js-md5@0.6.1 js-sha512@0.8.0 jwt-decode@2.2.0 lodash@4.17.21 moment@2.29.4 moment-duration-format@2.2.2 null-loader@4.0.1 optional-require@1.0.3 promise.allsettled@1.0.4 punycode@2.1.1 react@17.0.2 react-dom@17.0.2 react-emoji-render@1.2.4 react-focus-lock@2.5.1 react-i18next@10.11.4 react-linkify@1.0.0-alpha react-native-background-timer@2.4.1 react-native-calendar-events@2.2.0 react-native-callstats@3.73.7 react-native-default-preference@1.4.4 react-native-device-info@8.4.8 react-native-gesture-handler@2.9.0 react-native-get-random-values@1.7.2 react-native-immersive@2.0.0 react-native-keep-awake@4.0.0 react-native-orientation-locker@1.5.0 react-native-pager-view@5.4.9 react-native-paper@5.1.2 react-native-performance@2.1.0 react-native-safe-area-context@4.4.1 react-native-screens@3.13.1 react-native-sound@0.11.1 react-native-splash-screen@3.3.0 react-native-svg@12.4.3 react-native-svg-transformer@1.0.0 react-native-tab-view@3.1.1 react-native-url-polyfill@1.3.0 react-native-watch-connectivity@1.0.11 react-native-webview@11.15.1 react-native-youtube-iframe@2.2.1 react-redux@7.1.0 react-textarea-autosize@8.3.0 react-transition-group@2.4.0 react-window@1.8.6 react-youtube@10.1.0 redux@4.0.4 redux-thunk@2.4.1 seamless-scroll-polyfill@2.1.8 styled-components@3.4.9 tss-react@4.4.4 util@0.12.1 uuid@8.3.2 wasm-check@2.0.1 webm-duration-fix@1.0.4 windows-iana@3.1.0 zxcvbn@4.4.2

如果一次安装不行,分多次安装。

其实这里还有两个包(npm install @atlaskit/tabs @atlaskit/modal-dialog@10.6.4)要安装。为什么,看下面。

运行

如果文件放在windows目录下面,可以允许,但是因为 WSL 和 windows 交互,读取文件速度极慢(约等于无),所以热更新无用。

所以放在WSL系统的目录中开发。注意:这里 WSL子系统要使用 root 用户,不然编辑代码的时候,没有权限修改。默认创建子系统的时候使用的不是root,百度自行切换。

2.png

但是出错了。

3.png

都是一样的步骤安装的包。

没有,那就安装吧。

npm install @atlaskit/tabs @atlaskit/modal-dialog@10.6.4

版本号就最新的吧,因为这里未知。

安装后 tabs 没有错,另一个出错,发现没有这个文件,版本出错,然后在npm上面找对应的版本。

4.png

经过测试, 10.6.4 可行

至此,项目可以在 WSL 上面运行了。

Notion地址