Are there any react-native packages(npm) to compress videos? I want to compress the videos so that uploading these videos will take less time.
I am using Shobbak/react-native-compressor for a while now and it does seem to do the job.
Usage (per docs):
import { Video } from 'react-native-compressor';
const result = await Video.compress(
'file://path_of_file/BigBuckBunny.mp4',
{
compressionMethod: 'auto',
},
(progress) => {
if (backgroundMode) {
console.log('Compression Progress: ', progress);
} else {
setCompressingProgress(progress);
}
}
);
I am trying to upload an image to Digital Ocean Storage. it's upload in DO but after callback strapi generate wrong URL
for Example: https://https//jobsflow/d0e989a489bdc380c55e5846076d07f8.png?updated_at=2022-06-08T17:00:32.934Z thats mean https://https//.
//jobsflow is my location of storage.
here is my config/plugins.js code
module.exports = {
upload: {
config: {
provider: "strapi-provider-upload-dos",
providerOptions: {
key: process.env.DO_SPACE_ACCESS_KEY,
secret: process.env.DO_SPACE_SECRET_KEY,
endpoint: process.env.DO_SPACE_ENDPOINT,
space: process.env.DO_SPACE_BUCKET,
directory: process.env.DO_SPACE_DIRECTORY,
cdn: process.env.DO_SPACE_CDN,
},
},
},
};
//here is my config/middleware.js
module.exports = [
"strapi::errors",
{
name: "strapi::security",
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
"connect-src": ["'self'", "https:"],
"img-src": [
"'self'",
"data:",
"blob:",
"*.digitaloceanspaces.com"
],
"media-src": ["'self'", "data:", "blob:"],
upgradeInsecureRequests: null,
},
},
},
},
"strapi::cors",
"strapi::poweredBy",
"strapi::logger",
"strapi::query",
"strapi::body",
"strapi::favicon",
"strapi::public",
];
please help me..! if you have any idea
Are you using a custom upload provider for this?
Why not use the official #strapi/provider-upload-aws-s3 plugin?
// path config/plugins.js
...
upload: {
config: {
provider: 'aws-s3',
providerOptions: {
accessKeyId: env('DO_ACCESS_KEY_ID'),
secretAccessKey: env('DO_ACCESS_SECRET'),
region: env('DO_REGION'),
endpoint: env('DO_ENDPOINT'),
params: {
Bucket: env('DO_BUCKET'),
}
},
},
},
Another nice trick to change the URL of an image and point it to your CDN is adding this:
// src/index.js
async bootstrap({strapi}){
strapi.db.lifecycles.subscribe({
models: ['plugin::upload.file'],
// use cdn url instead of space origin
async beforeCreate(data) {
data.params.data.url = data.params.data.url.replace(__ORIGINAL_URL__, __CDN_URL__)
// you can even do more here like setting policies for the object you're uploading
},
});
}
I am working on a nuxt project and I want to add it to Google Play, but it requires an apk output
so is there any solution to get the apk file from Nuxt?
I've already tried using android studio but it was unsuccessful
manifest.json:
{
"name": "my nuxt app",
"short_name": "my lovely nuxt app",
"description": "pwa to apk",
"icons": [
{
"src": "/logo.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/300.png",
"sizes": "384x384",
"type": "image/jpg"
},{
"src": "/512.jpg",
"sizes": "512x512",
"type": "image/jpg"
}
],
"start_url": "/?standalone=true",
"display": "standalone",
"background_color": "#222",
"theme_color": "#222",
"lang": "fa",
"prefer_related_applications": true
}
and I get this error when I want to install it:
for security your phone is set to block installation
TWA are a thing as you can read here: https://www.ateamsoftsolutions.com/what-are-pwa-and-twa/
Meanwhile, this is not the same as having an .apk which is something totally different from the Web platform as you can see here: https://fileinfo.com/extension/apk (none of the extensions are ones used on the Web)
This is a totally different bundle language and ecosystem. Hence, you cannot port a PWA into a Google Play app.
You'll need to learn ways to make a mobile app with either Capacitor (Quasar) can help or similar solutions.
Or use React Native, Flutter or even vanilla Kotlin (the latter being the closest one to the machine).
In addition to kissu's comment, I always use Nuxt.js for regular websites but Ionic/Vue with Capacitor for mobile apps, it works great, same ecosystem and a great UI components and CLI from Ionic. This is just a suggestion for something that works and it has a minimum learning curve.
after so many searches and thanks to #kissu for give me a hint about twa i found the solution:
1.first of all u need a service worker for your nuxt project and put it in the static folder
example:
/static/sw.js
and inside of sw.js:
const options = {"workboxURL":"https://cdn.jsdelivr.net/npm/workbox-cdn#5.1.4/workbox/workbox-sw.js","importScripts":[],"config":{"debug":false},"cacheOptions":{"cacheId":"online-actor-prod","directoryIndex":"/","revision":"c35hcbL1ctml"},"clientsClaim":true,"skipWaiting":true,"cleanupOutdatedCaches":true,"offlineAnalytics":false,"preCaching":[{"revision":"c35hcbL1ctml","url":"/"}],"runtimeCaching":[{"urlPattern":"/_nuxt/","handler":"CacheFirst","method":"GET","strategyPlugins":[]},{"urlPattern":"/","handler":"NetworkFirst","method":"GET","strategyPlugins":[]}],"offlinePage":null,"pagesURLPattern":"/","offlineStrategy":"NetworkFirst"}
importScripts(...[options.workboxURL, ...options.importScripts])
initWorkbox(workbox, options)
workboxExtensions(workbox, options)
precacheAssets(workbox, options)
cachingExtensions(workbox, options)
runtimeCaching(workbox, options)
offlinePage(workbox, options)
routingExtensions(workbox, options)
function getProp(obj, prop) {
return prop.split('.').reduce((p, c) => p[c], obj)
}
function initWorkbox(workbox, options) {
if (options.config) {
// Set workbox config
workbox.setConfig(options.config)
}
if (options.cacheNames) {
// Set workbox cache names
workbox.core.setCacheNameDetails(options.cacheNames)
}
if (options.clientsClaim) {
// Start controlling any existing clients as soon as it activates
workbox.core.clientsClaim()
}
if (options.skipWaiting) {
workbox.core.skipWaiting()
}
if (options.cleanupOutdatedCaches) {
workbox.precaching.cleanupOutdatedCaches()
}
if (options.offlineAnalytics) {
// Enable offline Google Analytics tracking
workbox.googleAnalytics.initialize()
}
}
function precacheAssets(workbox, options) {
if (options.preCaching.length) {
workbox.precaching.precacheAndRoute(options.preCaching, options.cacheOptions)
}
}
function runtimeCaching(workbox, options) {
const requestInterceptor = {
requestWillFetch({ request }) {
if (request.cache === 'only-if-cached' && request.mode === 'no-cors') {
return new Request(request.url, { ...request, cache: 'default', mode: 'no-cors' })
}
return request
},
fetchDidFail(ctx) {
ctx.error.message =
'[workbox] Network request for ' + ctx.request.url + ' threw an error: ' + ctx.error.message
console.error(ctx.error, 'Details:', ctx)
},
handlerDidError(ctx) {
ctx.error.message =
`[workbox] Network handler threw an error: ` + ctx.error.message
console.error(ctx.error, 'Details:', ctx)
return null
}
}
for (const entry of options.runtimeCaching) {
const urlPattern = new RegExp(entry.urlPattern)
const method = entry.method || 'GET'
const plugins = (entry.strategyPlugins || [])
.map(p => new (getProp(workbox, p.use))(...p.config))
plugins.unshift(requestInterceptor)
const strategyOptions = { ...entry.strategyOptions, plugins }
const strategy = new workbox.strategies[entry.handler](strategyOptions)
workbox.routing.registerRoute(urlPattern, strategy, method)
}
}
function offlinePage(workbox, options) {
if (options.offlinePage) {
// Register router handler for offlinePage
workbox.routing.registerRoute(new RegExp(options.pagesURLPattern), ({ request, event }) => {
const strategy = new workbox.strategies[options.offlineStrategy]
return strategy
.handle({ request, event })
.catch(() => caches.match(options.offlinePage))
})
}
}
function workboxExtensions(workbox, options) {
}
function cachingExtensions(workbox, options) {
}
function routingExtensions(workbox, options) {
}
2.you also need a manifest , for that put this code in your nuxt.config.js:
export default{
pwa: {
manifest: {
name: 'example name',
short_name: 'example',
lang: 'fa',
theme_color: '#222',
background_color: '#222',
start_url: `/`,
prefer_related_applications: true,
},
icon: {
fileName: 'logo.png'
},
},
}
3.now everything is ready to create your apk, now you can search for pwa to apk in google And use sites that offer these services:
ive already tried these sites and all working well:
gonative.io
or
pwabuilder.com
I am using WebRTC for video and audio and I want to support flipping the camera in a mobile device from front to back and vice versa.
Using the below code Safari iOS works great, but Android Chrome will throw the exception NotReadableError: Could not start video source.
I am also closing any previous track.
var constraints = {
audio: false,
video: {
"width": {
"ideal": 1280
},
"height": {
"ideal": 720
},
"facingMode": {
"exact": "environment"
},
},
}
const userMedia = await navigator.mediaDevices.getUserMedia(constraints) // Will throw - NotReadableError: Could not start video source
I also tried the constraints without width and height.
{
"audio": false,
"video": {
"facingMode": {
"exact": "environment"
}
}
}
Any ideas on how to debug further or try things out will be appreciated.
[Update]
Testing with Android Firefox browser works as expected!
Trying the below code to open an offline pdf in ionic 2 application but the code is opening a pdf file in cleverdox viewer instead of adobe reader, how could i set adobe reader by default here to make pdf functional. Thanks in Advance.
open()
{
const options: DocumentViewerOptions = {
title: 'My PDF'
}
this.document.viewDocument('file:///android_asset/www/assets/test.pdf', 'application/pdf', options)
}
No idea if you got this resolved but here's what fixed the issue for me:
Make sure you are using the latest version of the document Viewer plugin.
open() {
const options: DocumentViewerOptions = {
title: 'My PDF',
openWith: { enabled: true }, //this will allow you to open the document with an external application
// any more options
};
this.document.viewDocument('file:///android_asset/www/assets/test.pdf', 'application/pdf', options);
}
The problem with #rj7 's code is that he added a function into what should be a nested object. For more information on the options you can pull through into this function, see the following URL: https://github.com/sitewaerts/cordova-plugin-document-viewer
Hope that helps to anyone stuck in the future.
Try openWith() like below,
open()
{
const options: DocumentViewerOptions = {
title: 'My PDF',
openWith() {
enabled: true
}
}
this.document.viewDocument('file:///android_asset/www/assets/test.pdf', 'application/pdf', options)
}