I made a simple media player app with electronjs to play video files and display subtitles.
When in dev or packaged mode on my PC, it plays the video fine.
When I use the same packaged app on a laptop, PC or even inside a VM (both Windows 10 or 11), the video plays but only sound and subtitles, no image.
How do I go to debug/figure what's the issue? I read that Chromium 108 is meant to support H265. And it's working fine on my machine. Would there be a codec available on my machine which am unaware of? Or is electron-builder not including the latest version of Chromium?
below is my current package.json
"scripts": {
"dev": "vite",
"build": "vite build && electron-builder",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
"format": "prettier . --write",
"release": "node release.mjs"
},
"dependencies": {
"electron-log": "^4.4.8",
"electron-updater": "^5.3.0",
"ffmpeg": "^0.0.4",
"fs-extra": "^11.1.0",
"mime-types": "^2.1.35",
"mkv-subtitle-extractor": "^1.1.1",
"srt-to-vtt": "^1.1.3"
},
"devDependencies": {
"#vitejs/plugin-vue": "^3.2.0",
"autoprefixer": "^10.4.13",
"chalk": "^5.2.0",
"cross-env": "^7.0.3",
"electron": "^23.0.0-alpha.3",
"electron-builder": "^23.5.1",
"eslint": "^8.29.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-json": "^3.1.0",
"eslint-plugin-n": "^15.6.0",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-vue": "^9.8.0",
"inquirer": "^9.1.4",
"postcss": "^8.4.20",
"prettier": "^2.8.0",
"tailwindcss": "^3.2.4",
"vite": "^3.2.3",
"vite-plugin-electron": "^0.10.4",
"vite-plugin-eslint": "^1.8.1",
"vue": "^3.2.41"
}
Related
I'm receiving the following error when running react native app using expo on IPhone (on android it's working correctly)
An image of the error is attached.
In addition, this is my package.json file:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#expo/vector-icons": "^12.0.4",
"#react-native-community/masked-view": "^0.1.10",
"axios": "^0.21.1",
"expo": "~40.0.0",
"expo-app-loading": "^1.0.1",
"expo-font": "^9.0.0",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.0.1",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "^2.18.1",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-header-buttons": "^7.0.0",
"react-navigation-stack": "^2.10.4",
"react-redux": "^7.2.3",
"redux": "^4.0.5"
},
"devDependencies": {
"#babel/core": "^7.9.0" },
"private": true
}
Any idea will be appreciated.
you have two versions of react-native-safe-area-context installed in your app. remove react-native-safe-area-context from your dependencies and run expo install react-native-safe-area-context
In this link you can find the solution approved by a collaborator.
In my case, problem persisted and I did as suggested in the link above but I skip steps 2 and 5. I kept expo version in 4.1.0.
delete node_modules and your lockfile (package-lock.json /
yarn.lock)
change the expo package version in package.json to 38.0.8
remove react-native-safe-area-context from your package.json
run yarn or npm install
run expo install react-native-safe-area-context
try running
cd ios && pod install
I was using Expo and I separated expo eject for module use.
And I tried pod install in iOS file. it was work.
Pod installation complete! There are 51 dependencies from the Pod file
and 63 total pods installed.
But An error occurred when the Xcode was opened and the build and run button was pressed.
package.json:
{
"name": "testgame",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-cli": "6.26.0",
"babel-plugin-module-resolver": "^3.1.1",
"babel-preset-es2015": "6.24.1",
"jest-expo": "27.0.0",
"react-native-scripts": "1.14.0",
"react-test-renderer": "16.3.1"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/vector-icons": "^8.1.0",
"bignumber.js": "^8.1.1",
"crypto-browserify": "^3.12.0",
"eth-lightwallet": "^3.0.1",
"ethereumjs-tx": "^1.3.7",
"ethereumjs-util": "^6.0.0",
"ethereumjs-wallet-react-native": "^0.6.7",
"expo": "^30.0.0",
"expokit": "^1.8.0",
"formik": "^1.3.2",
"js-sha3": "^0.8.0",
"native-base": "^2.8.2",
"node-libs-browser": "2.1.0",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
"react-native-confirmation-code-input": "^1.0.4",
"react-native-fast-crypto": "^1.8.1",
"react-native-fetch-blob": "git+https://github.com/HCL-HO/react-native-fetch-blob-expo.git",
"react-native-fs": "^2.13.3",
"react-native-keychain": "^3.1.2",
"react-native-pin-view": "^2.2.1",
"react-native-secure-randombytes": "^3.0.0",
"react-native-touch-id": "^4.4.1",
"react-navigation": "3.0.4",
"web3": "1.0.0-beta.34",
"yup": "^0.26.6"
}
}
Xcode Version: 10.2.1
I've never used Xcode before, so I'm a beginner. Please explain it in detail. I'd appreciate it if you could explain it with a screenshot.
I made a podsec myself and solved it.
This is not in the official document and requires a fundamental solution from the module developer.
This solution creates a lot of Warning. There's nothing wrong with the code.
Remove react-native-secure-randombytes path from Header Search Path
Unlink react-native-secure-randombytes module - react-native unlink react-native-secure-randombytes
Added react-native-secure-randombytes.podspec from this link
Added next code into pod file:
pod 'react-native-secure-randombytes', :path =>
'../node_modules/react-native-secure-randombytes'
do `pod install'
Problem
I get the error "Cannot read property 'State' of undefined" when trying to use a stack navigator in React Navigation. Switch and bottomTabNavs are working perfectly fine.
If anyone knows how to solve this problem that would be amazing!
What I've tried
I've already checked to make sure react-native-gesture-handler is installed and linked properly.
My Package.json:
{
"name": "app",
"version": "5.1.0",
"private": true,
"devDependencies": {
"babel-jest": "23.6.0",
"fs-extra": "^6.0.1",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.49.2",
"react-test-renderer": "16.7.0",
"reactotron-react-native": "^3.2.0",
"replace-in-file": "^3.4.2"
},
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios --simulator=\"iPhone X\"",
"apk": "cd android && ./gradlew assembleRelease",
"rename": "node ./bin/rename.js",
"start": "react-native start",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"axios": "^0.18.0",
"lodash": "^4.17.11",
"react": "16.6.3",
"react-native": "0.58.0-rc.2",
"react-native-firebase": "^5.2.0",
"react-native-gesture-handler": "^1.1.0",
"react-native-rate": "^1.1.6",
"react-native-sensitive-info": "5.2.9",
"react-native-splash-screen": "^3.2.0",
"react-native-status-bar-height": "^2.3.1",
"react-native-table-component": "^1.2.0",
"react-navigation": "^3.3.2"
}
}
The issue was that the pod file was not installed even though react-native link indicated the package was successfully linked.
To solve the issue follow these steps:
cd ios
Pod install
Clean ios folder
Run application
I'm trying to push my own Docker image for an Angular 5 project that I've built. My docker image extends the well known node:carbon image and runs the following commands:
FROM node:carbon
WORKDIR /usr/src/app
COPY package.json .
COPY package-lock.json .
RUN npm install --no-optional
COPY . .
EXPOSE 8080
CMD ["npm", "start"]
The package.json file has the following content:
{
"name": "turist-front",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.2",
"#angular-devkit/core": "^0.3.1",
"#angular/animations": "^5.0.5",
"#angular/cdk": "^5.0.0-rc.2",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#angular/flex-layout": "^2.0.0-beta.11",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/material": "^5.0.0-rc.2",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/router": "^5.0.0",
"#ngx-translate/http-loader": "^2.0.0",
"#swimlane/ngx-datatable": "^11.1.5",
"angular-l10n": "^4.1.2",
"angular2-notifications": "^0.9.6",
"core-js": "^2.4.1",
"d3": "^4.11.0",
"hammerjs": "^2.0.8",
"material-design-icons": "^3.0.1",
"ng2-dragula": "^1.5.0",
"ngx-auth": "^3.0.0",
"ngx-dropzone-wrapper": "^5.2.0",
"ngx-perfect-scrollbar": "^5.0.1",
"ngx-quill": "^2.0.3",
"normalize.css": "^7.0.0",
"rxjs": "5.5.2",
"screenfull": "^3.3.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.5.5",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#compodoc/compodoc": "^1.0.4",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"hads": "^1.5.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}
After I've built my image I want to push it to my docker repository. But although I've tried at least 5 times to execute the docker push command, every time it fails with the error file integrity checksum failed for. It is not always the same file that fails the integrity check and I also didn't notice any timeout behaviour or something similar.
What I have noticed is that the one layer (always the same) fails being pushed and it restarts 5-6 times unsuccessful:
cc19355015b5: Pushing [=======> ] 98.66MB/653.4MB
and than
cc19355015b5: Pushing [=======> ] Retrying in 5 seconds
I had the same issue today, then I found a typo in my ECR location, once it is corrected, the push succeeded immediately, so I believe Docker just doesn't tell you that it can't find the ECR repo and stuck in retrying.
Another way to solve this is to reduce the amount of data that are sent at a time to the registry, by breaking up the layers or using a tool like regclient that falls back to sending 1MB chunks by default if larger chunks don't succeed at first.
The steps are:
Download regctl
Save the image as a tar file
Push it to the registry using regctl
curl -L https://github.com/regclient/regclient/releases/latest/download/regctl-linux-amd64 > regctl
chmod 755 regctl
docker save <imagename> > image.tar
./regctl image import <imagename> image.tar -v debug
The chunk size can be configured. See this answer for more in-depth details.
I've tested my Angular 5 app on an iPhone 6 running IOS8 (Safari) and in Browserstack. The angular app doesn't run, I just get an empty page and this Javascript error.
Any suggestions?
This is my package.json file. I'm thinking that some package that I added here is causing some conflict and preventing the app from displaying. Previously I had the app able to run in IOS8, but that was with Angular 4.4 and I wasn't using mdbootstrap library.
{
"name": "XXXX",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"i18n": "ng-xi18n"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.2",
"#angular-devkit/schematics": "0.0.34",
"#angular/animations": "^5.0.3",
"#angular/common": "^5.0.3",
"#angular/compiler": "^5.0.3",
"#angular/core": "^5.0.3",
"#angular/forms": "^5.0.3",
"#angular/http": "^5.0.3",
"#angular/platform-browser": "^5.0.3",
"#angular/platform-browser-dynamic": "^5.0.3",
"#angular/router": "^5.0.3",
"applicationinsights-js": "^1.0.8",
"bootstrap": "^3.3.7",
"bootstrap-select": "^1.12.4",
"chart.js": "^2.5.0",
"core-js": "^2.4.1",
"easy-pie-chart": "^2.1.7",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.2.1",
"libphonenumber-js": "^0.4.40",
"ng-autosize": "^1.1.0",
"ng-mdb-pro": "XXXX",
"npm-check-updates": "^2.13.0",
"rxjs": "^5.4.2",
"screenfull": "^3.3.0",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "^1.5.5",
"#angular/compiler-cli": "^5.0.3",
"#angular/language-service": "^4.3.0",
"#types/applicationinsights-js": "^1.0.2",
"#types/jasmine": "~2.8.2",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~4.0.1",
"jasmine-core": "^2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.2.0",
"protractor": "~5.2.0",
"ts-node": "~3.3.0",
"tslint": "^5.3.2",
"typescript": ">=2.4.2 <2.5.0"
}
}
Had a similar problem. It should be resolved by providing correct polyfills.
you can find browser support info here https://angular.io/guide/browser-support
If you use JIT compiler (not AOT) then safari needs at least ES7 reflect polyfill.
Safari 7 & 8 need also ES6
If you still use the old intl based pipes then do not forget to include them.
For older browsers core-js/es/... imports usually resolve the issues.
Go to your src/polyfills.ts and enable desired polyfills.
There is also a fetch polyfill mentioned in the readme of the generated project, that is not included in polyfill.ts.
import 'whatwg-fetch'; // Run `npm install --save whatwg-fetch`
$ ng build --mangle safari10=true --prod
Follow the next steps
Execute command to generate file .browserslistrc
npx browserslist
Into the file set the last version until you get that you need, in my case I need work with safari 10, then i set the file ".browserslistrc" :
last 2 Chrome version
last 2 Firefox version
last 2 Edge major versions
last 5 Safari major versions
last 5 iOS major versions