سلام وقت بخیر
توی livewire برای سیستم چت قابلیت ارسال ویس رو میخوام داشته باشم کدهای زیر از طریق لایووایر نیست ولی ویس ضبط میکنه ، و مشکلی که هست اسم فایل ویس توی دیتابیس دخیره نمیشه و خود ویس هم توی پوشه مورد نظر ارسال نمیشه
کدهای من
<form wire:submit.prevent="SendMessage" enctype="multipart/form-data">
@csrf
<div class="d-flex">
<button type="submit" class="border-0 mt-2 me-3 fs-5 send-msg-button">
<i class="fa fa-paper-plane" aria-hidden="true"></i>
</button>
<input wire:model="body" type="text" class="form-control send-msg-input"
placeholder="پیام خود را بنویسید ...">
<div>
<button class="record-button border-0 mt-2 ms-3 fs-5" id="recordButton"
onclick="toggleRecording()">
<i class="fa fa-microphone"></i>
</button>
<button class="record-button border-0 mt-2 ms-3 fs-5" id="stopButton"
onclick="stopRecording()">
<i class="fa fa-stop"></i>
</button>
</div>
<div>
<audio id="recordedAudio" controls></audio>
<button id="sendButton" class="border-0" onclick="sendAudio()">ارسال</button>
</div>
</div>
</form>
script
<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
@push('scripts')
<script>
var recorder;
var audioBlob;
function toggleRecording() {
var recordButton = document.getElementById('recordButton');
var stopButton = document.getElementById('stopButton');
if (recorder && recorder.state === 'recording') {
recorder.stopRecording();
stopButton.disabled = true;
recordButton.disabled = false;
} else {
navigator.mediaDevices.getUserMedia({
audio: true
})
.then(function(stream) {
recorder = RecordRTC(stream, {
type: 'audio'
});
recorder.startRecording();
stopButton.disabled = true;
recordButton.disabled = true;
})
.catch(function(error) {
console.error('Could not get user media: ', error);
});
}
}
function stopRecording() {
var recordedAudio = document.getElementById('recordedAudio');
var sendButton = document.getElementById('sendButton');
recorder.stopRecording(function() {
audioBlob = recorder.getBlob();
recordedAudio.src = URL.createObjectURL(audioBlob);
recordedAudio.play();
stopButton.disabled = true;
recordButton.disabled = false;
sendButton.disabled = false;
});
}
function sendAudio() {
let formData = new FormData();
formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
formData.append('audioFile', audioBlob);
let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8000/chat/send', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(formData);
}
</script>
@endpush
الان ویس ضبط میشه ولی ارسال نمیشه
public function SendMessage(Request $request)
{
if ($this->body == null && $this->recordingFile == null) {
return null;
}
$messageBody = $this->body;
$voicePath = null;
if ($this->recordingFile) {
$voicePath = $this->recordingFile->store('uploads', 'uploads');
$messageBody = '';
}
$this->createdMessage = Message::create([
'conversation_id' => $this->selectedConversation->id,
'sender_id' => auth()->id(),
'receiver_id' => $this->receiverInstance->id,
'body' => $messageBody,
'voice' => $voicePath,
]);
$voiceUrl = Storage::url($voicePath);
$this->selectedConversation->last_time_message = $this->createdMessage->created_at;
$this->selectedConversation->save();
$this->emitTo('chat.chatbox', 'pushMessage', $this->createdMessage->id);
$this->emitTo('chat.chat-list', 'refresh');
$this->reset('body');
$this->emitSelf('dispatchMessageSent');
}
لطفا دوستانی که livewire کار کردن راهنمایی کنن
خیلی روش کار کردم و روش های مختلف تست کردم ولی موفق نشدم
این اخرین خروجی شد ویس ضبط میشه ولی ارسال نمیشه
کسی هست میتونه راهنمایی کنه ؟
کسی هست راهنمایی کنه ؟
هرچی روش کار میکنم نتیجه نمیگیرم 😥
به این شکل هم جواب نگرفتم
script
var recorder;
var audioBlob;
function toggleRecording() {
var recordButton = document.getElementById('recordButton');
var stopButton = document.getElementById('stopButton');
if (recorder && recorder.state === 'recording') {
recorder.stopRecording();
stopButton.disabled = true;
recordButton.disabled = false;
} else {
navigator.mediaDevices.getUserMedia({
audio: true
})
.then(function(stream) {
recorder = RecordRTC(stream, {
type: 'audio'
});
recorder.startRecording();
stopButton.disabled = true;
recordButton.disabled = true;
})
.catch(function(error) {
console.error('Could not get user media: ', error);
});
}
}
function stopRecording() {
var recordedAudio = document.getElementById('recordedAudio');
var sendButton = document.getElementById('sendButton');
recorder.stopRecording(function() {
audioBlob = recorder.getBlob();
recordedAudio.src = URL.createObjectURL(audioBlob);
recordedAudio.play();
stopButton.disabled = true;
recordButton.disabled = false;
sendButton.disabled = false;
});
}
function sendAudio() {
let formData = new FormData();
formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
formData.append('audioFile', audioBlob);
let xhr = new XMLHttpRequest();
xhr.open('POST', '{{ route('chat') }}', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(formData);
}
component
$audioPath = null;
if ($request->hasFile('audioFile')) {
$audioFile = $request->file('audioFile');
$audioPath = $audioFile->store('uploads', 'public');
}
$this->createdMessage = Message::create([
'conversation_id' => $this->selectedConversation->id,
'sender_id' => auth()->id(),
'receiver_id' => $this->receiverInstance->id,
'body' => $this->body,
'audio_path' => $audioPath,
]);
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟