Ich verwende Webview für React Native.
Es öffnet sich wie beim About-Protokoll und getusermedia nicht Daran arbeiten
Ich habe versucht, PWA vor Ort zu verwenden, aber es funktionierte nicht, sobald die App geschlossen wurde. Als ich es in APK getestet habe, brauchte ich wieder Internet.
Was tun?
wann Ich teste Webview mit einem https-Server. Es funktioniert wie erwartet, ist aber online. Ich möchte, dass meine App vollständig offline ist.
Bei Verwendung von Inline-HTML und Dateien funktioniert die Funktion „Getuseredia“ beim Öffnen nicht.
Die Webansicht öffnet die Dateien mit dem Protokoll
Können wir das ändern?
Code: Select all
Simple Frequency Tuner
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.frequency-display {
font-size: 48px;
text-align: center;
color: #333;
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.Hz {
font-size: 24px;
color: #666;
margin-left: 8px;
}
You are online
0.0
Hz
class Tuner {
constructor() {
this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
this.analyser = this.audioContext.createAnalyser();
this.bufferSize = 4096;
this.scriptProcessor = this.audioContext.createScriptProcessor(
this.bufferSize, 1, 1
);
this.frequencyDisplay = document.getElementById('frequency');
}
start() {
const self = this;
navigator.mediaDevices.getUserMedia({ audio: true })
.then(function(stream) {
self.audioContext.createMediaStreamSource(stream)
.connect(self.analyser);
self.analyser.connect(self.scriptProcessor);
self.scriptProcessor.connect(self.audioContext.destination);
aubio().then(function(aubio) {
const pitchDetector = new aubio.Pitch(
"default",
self.bufferSize,
1,
self.audioContext.sampleRate
);
self.scriptProcessor.addEventListener('audioprocess', function(event) {
const frequency = pitchDetector.do(
event.inputBuffer.getChannelData(0)
);
if (frequency) {
self.frequencyDisplay.textContent = frequency.toFixed(1);
}
});
});
})
.catch(function(error) {
alert('Error accessing microphone: ' + error.message);
});
}
}
// Start the tuner when the page is clicked
document.body.addEventListener('click', function() {
new Tuner().start();
}, { once: true });
// Register the service worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then((registration) => {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch((error) => {
console.log('Service Worker registration failed:', error);
});
});
}
// Function to update the network status
function updateNetworkStatus() {
const statusBanner = document.getElementById('network-status');
if (navigator.onLine) {
statusBanner.textContent = 'You are online';
statusBanner.className = 'online';
} else {
statusBanner.textContent = 'You are offline. Content may be unavailable.';
statusBanner.className = 'offline';
}
}
// Listen for online and offline events
window.addEventListener('online', updateNetworkStatus);
window.addEventListener('offline', updateNetworkStatus);
// Initial check of the network status
updateNetworkStatus();
Hier ist der vollständige Code