I’m reporting this problem which only occurs with the Chrome browser while it works correctly on all other browsers. and I don’t understand why the complete code is below.
This error occurs only in the chrome browser while with all other browsers everything works as it should. The problem only occurs when I want to save the recorded audio. The error is highlighted in the trustproxies.php file at the code return $next($request). I don’t understand why this problem only occurs with Chrome while for example Mozilla everything works normally. I hope someone can help me understand where the problem is, thanks
Route::middleware('auth', 'admin')->group(function () {
Route::patch('/salva/attivita/specifica', [CreaAttivitàController::class, 'store'])->middleware(['auth', 'verified'])->name('salva.attività');
Route::patch('/crea/attività/professionale', [CreaAttivitàController::class, 'indexProfessionale'])->middleware(['auth', 'verified'])->name('update.manutenzione.professionale');
Route::post('/salva/attività/professionale', [CreaAttivitàController::class, 'storeProfessionale'])->middleware(['auth', 'verified'])->name('salva.attività.professionale');
Route::patch('/modifica/attività/professionale', [CreaAttivitàController::class, 'modificaProfessionale'])->middleware(['auth', 'verified'])->name('modifica.attività.professionale');
});
<form action="{{ route('salva.attività.professionale') }}" method="POST"
enctype="multipart/form-data">
@csrf
@method('POST')
<input type="button" id="recordButton" />
<input type="file" id="hiddenAudioInput" name="audios[]"
multiple hidden />
</form>
public function storeProfessionale(Request $request)
{
$area = $request->area;
$qr_linea = $request->qr_linea;
$linea = Linee::where('qr_code', $qr_linea)->value('nome_linea');
$qr_blocco = $request->qr_blocco;
$blocco = BloccoLinee::where('qr_code', $qr_blocco)->value('nome_blocco');
$qr_macchina = $request->qr_macchina;
$macchina = $request->macchina;
$frequenza = "personalizzata";
$ciclo = $request->ciclo;
$start = $request->start;
$durata = $request->durata;
$stato = "Da fare";
$step_id_value = $request->step_id;
$step = $request->step;
$permessi_1 = $request->checked;
$permessi = array($permessi_1);
$attività_id = Attivita::create([
'area' => $area,
'linea' => $linea,
'blocco_linea' => $blocco,
'macchina' => $macchina,
'frequenza' => $frequenza,
'ciclo' => $ciclo,
'start' => $start,
'stato' => $stato,
'qr_code' => $qr_macchina,
'qr_macchina' => $qr_macchina,
'qr_blocco' => $qr_blocco,
'qr_linea' => $qr_linea,
'durata' => $durata
])->id;
Attivita::where('id', $attività_id)->update(['permessi' => $permessi]);
$step_id = Step::create([
'attivita_id' => $attività_id,
'step_id' => $step_id_value,
'step' => $step
])->id;
$request->validate([
'audios.*' => 'nullable|file|mimes:ogg,mp3,m4a,mp4,mpeg,mpga,wav,aac',
]);
if ($request->hasFile('audios')) {
foreach ($request->file('audios') as $audio) {
$audioName = $audio->hashName();
$audio->storeAs('audio', $audioName, 'private');
Audio::create([
'attivita_id' => $attività_id,
'step_id' => $step_id,
'audio' => htmlspecialchars($audioName, ENT_QUOTES, 'UTF-8')
]);
}
}
$notifiche = Aree::sum('attività');
$item_step = Attivita::with(['step'])
->where('id', $attività_id)
->first();
$step_count = Step::where('attivita_id', $attività_id)->get()->last()->step_id + 1;
$macchina_item = Macchine::where('qr_code', $qr_macchina)->get();
return $this->indexProfessionale($request)->with(['notifiche' => $notifiche, 'macchina' => $macchina_item, 'data_frequenza' => $start, 'ciclo' => $ciclo, 'step' => $step_count, 'item_step' => $item_step])
->withErrors(['msgSuccess' => "Step creato correttamente"]);
}
let mediaRecorder;
let audioChunks = [];
const recordButton = document.getElementById('recordButton');
const audioGallery = document.getElementById('audioGallery');
recordButton.addEventListener('click', async () => {
if (!mediaRecorder) {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = event => {
audioChunks.push(event.data);
};
mediaRecorder.onstop = () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
const audioUrl = URL.createObjectURL(audioBlob);
audioChunks = [];
addAudioToGallery(audioUrl);
};
mediaRecorder.start();
recordButton.classList.add('recording');
recordButton.textContent = 'Ferma Registrazione';
} catch (error) {
console.error('Errore durante la registrazione:', error);
alert('Error: ' + error.message);
}
} else {
mediaRecorder.stop();
recordButton.classList.remove('recording');
recordButton.textContent = 'Avvia Registrazione';
mediaRecorder = null;
}
});
function addAudioToGallery(audioUrl) {
const audioElement = document.createElement('audio');
audioElement.controls = true;
audioElement.src = audioUrl;
audioGallery.appendChild(audioElement);
}
function addAudioToGallery(audioUrl) {
const audioItem = document.createElement('div');
audioItem.classList.add('audio-item');
const audioElement = document.createElement('audio');
audioElement.controls = true;
audioElement.src = audioUrl;
audioElement.name = "audios[]";
const removeBtn = document.createElement('button');
removeBtn.classList.add('remove-btn-record');
const imgDelete = document.createElement('img');
imgDelete.src = "/css/external/Icone/Delete.svg";
imgDelete.id = "delete";
imgDelete.alt = "Rimuovi";
removeBtn.appendChild(imgDelete);
removeBtn.onclick = () => {
audioGallery.removeChild(audioItem);
// Rimuovi anche il file dall'input nascosto
removeAudioFromInput(audioUrl);
};
audioItem.appendChild(audioElement);
audioItem.appendChild(removeBtn);
audioGallery.appendChild(audioItem);
addAudioToInput(audioUrl);
}
function addAudioToInput(audioUrl) {
const hiddenInput = document.getElementById('hiddenAudioInput');
fetch(audioUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok: ' + response.statusText);
}
return response.blob();
})
.then(blob => {
const file = new File([blob], 'audio_' + Date.now() + '.wav', { type: 'audio/wav' });
const dataTransfer = new DataTransfer();
for (const file of hiddenInput.files) {
dataTransfer.items.add(file);
}
dataTransfer.items.add(file);
hiddenInput.files = dataTransfer.files;
})
.catch(error => {
console.error('Error fetch dell'audio:', error);
});
}
function removeAudioFromInput(audioUrl) {
const hiddenInput = document.getElementById('hiddenAudioInput');
const dataTransfer = new DataTransfer();
for (const file of hiddenInput.files) {
if (!file.name.includes(audioUrl)) { // Assicurati di avere un modo per identificare il file
dataTransfer.items.add(file);
}
}
hiddenInput.files = dataTransfer.files;
}
/**
* The trusted proxies for this application.
*
* @var array<int, string>|string|null
*/
protected $proxies;
/**
* The headers that should be used to detect proxies.
*
* @var int
*/
protected $headers =
Request::HEADER_X_FORWARDED_FOR |
Request::HEADER_X_FORWARDED_HOST |
Request::HEADER_X_FORWARDED_PORT |
Request::HEADER_X_FORWARDED_PROTO |
Request::HEADER_X_FORWARDED_AWS_ELB;
/**
* Add Content Security Policy headers to accept everything already present in your Laravel app.
*
* @param IlluminateHttpRequest $request
* @param Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
$response = $next($request);
$response->headers->set('Content-Security-Policy', "default-src'self'");
$response->headers->add([
'Content-Security-Policy' => "default-src 'self'; object-src 'self'; base-uri 'self'; report-uri 'self';",
]);
$response->headers->set('Permissions-Policy', "geolocation=()");
$response->headers->set('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
$response->headers->set('Referrer-Policy', 'strict-origin-when-cross-origin');
return $response;
}
