یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دورهها
استفاده از تخفیفهاسلام وقت بخیر
توی 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,
]);
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟