حل شده

ضبط و ارسال ویس

سلام وقت بخیر من یک سیستم چت با livewire , laravel echo , pusher ایجاد کردم
حالا میخوام توی چت قابلیت ارسال ویس رو قرار بدم توسط webrtc
من به شکل زیر کدهامو نوشتم وقتی روی ضبط صدا میزنم به ظاهر ضبط انجام میشه ولی وقتی رو توقف میزنم هم ویس ارسال نمیشه تو چت هم یهو توی مرورگر همیچین خطایی نمایش میده

Error code: SBOX_FATAL_MEMORY_EXCEEDED

که مربوط به حافظه سیستم انگار که مطمئنا مشکل از کدنویسی من هست که باعث همچین خطایی شده و مربوط به سیستم نیست

فرم ارسال پیام و ویس

  <form wire:submit.prevent="SendMessage" enctype="multipart/form-data">
                        <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="پیام خود را بنویسید ...">

                            @if ($recording)
                                <div class="recording d-flex">
                                    <span>در حال ضبط ...</span>
                                    <button type="button" class="record-button border-0 mt-2 ms-3 fs-5"
                                        wire:click.prevent="stopRecording">
                                        <i class="fa fa-stop"></i>
                                    </button>
                                </div>
                            @else
                                <button type="button" class="record-button border-0 mt-2 ms-3 fs-5"
                                    wire:click.prevent="startRecording" name="voice">
                                    <i class="fa fa-microphone"></i>
                                </button>

                                <input type="file" wire:model="recordingFile" accept="audio/*"
                                    id="recordingFileInput" style="display:none">
                            @endif

                        </div>
                    </form>

component

    public function SendMessage()
    {
        if ($this->body == null && $this->recordingFile == null) {
            return null;
        }
        $message = Message::create([
            'conversation_id' => $this->selectedConversation->id,
            'sender_id' => Auth::id(),
            'type' => $this->recordingFile ? 'audio' : 'text',
            'content' => $this->recordingFile ? null : $this->body,
        ]);
        if ($this->recordingFile) {
            $response = Http::attach(
                'recording',
                file_get_contents($this->recordingFile->getRealPath()),
                $this->recordingFile->getClientOriginalName()
            )->post('/api/messages', [
                'conversation_id' => $this->selectedConversation->id,
                'sender_id' => Auth::id(),
                'type' => 'audio',
            ]);
            if ($response->ok()) {
                $this->emitTo('chat.chatbox', 'messageSent', $message->id);
                $this->emitTo('chat.chat-list', 'refresh');
            } else {
                session()->flash('error', 'Failed to send message.');
            }
        } else {
            $this->emitTo('chat.chatbox', 'messageSent', $message->id);
            $this->emitTo('chat.chat-list', 'refresh');
        }
        $this->reset(['body', 'recording', 'recordingFile']);
    }
    public function recordingDataAvailable($data)
    {
        $this->recordingFile = $data['file'];
    }
    public function startRecording()
    {
        $this->recording = true;
        $this->emit('recordingStarted');
    }
    public function stopRecording()
    {
        if ($this->recordingFile) {
            $filename = $this->recordingFile->getClientOriginalName();
            $path = Storage::putFileAs('recordings', $this->recordingFile, $filename);
            $message = Message::create([
                'conversation_id' => $this->selectedConversation->id,
                'sender_id' => Auth::id(),
                'type' => 'audio',
                'voice' => $path,
            ]);
            $this->selectedConversation->last_time_message = $message->created_at;
            $this->selectedConversation->save();
            $this->emitTo('chat.chatbox', 'pushMessage', $message->id);
            $this->emitTo('chat.chat-list', 'refresh');
            $this->emitSelf('dispatchMessageSent');
        }
        $this->recordingFile = null;
        $this->recording = false;
    }

script

    <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>

    <script>
        let mediaRecorder;

        document.addEventListener('livewire:load', function() {
            Livewire.on('recordingStarted', function() {
                startRecording();
            });

            Livewire.on('recordingStopped', function() {
                stopRecording();
            });
        });

        function startRecording() {
            navigator.mediaDevices.getUserMedia({
                    audio: true,
                    video: false
                })
                .then(stream => {
                    mediaRecorder = new MediaRecorder(stream); 
                    let chunks = [];

                    mediaRecorder.start();

                    mediaRecorder.addEventListener('dataavailable', event => {
                        chunks.push(event.data);
                    });
                    mediaRecorder.addEventListener('stop', () => {
                        const blob = new Blob(chunks, {
                            type: 'audio/webm'
                        });
                        const url = URL.createObjectURL(blob);
                        const filename = new Date().toISOString() + '.webm';

                        const file = new File([blob], filename, {
                            type: 'audio/webm',
                            lastModified: Date.now()
                        });

                        this.emit('recordingDataAvailable', {
                            file: file
                        });
                    });

                    window.livewire.emit('recordingStarted', {});

                })

                .catch(error => {
                    console.error('Could not get user media: ', error);
                });
        }

        function stopRecording() {
            mediaRecorder
        .stop(); 
            window.livewire.emit('recordingStopped', {});
        }
    </script>

لطفا راهنمایی کنید خیلی مهم هست و خیلی وقته درگیرش هستم زیاد سرچ زدم ولی موفق نشدم

لاراول

Paradox

3 سال پیش@paradox

ثبت پرسش جدید

پاسخ‌ها

مرتضی واعظی

@MortezaVaezi3 سال پیش مطرح شد

تخصص: توسعه دهنده وب

بهترین پاسخ

چون upload.php موجود نیست و شما باید اینجا آدرس فایلی که توی پروژتون باید اطلاعات به اون ارسال شه رو بدید.
همچنین منظور م این نبود که تمام let ها رو بکنید var.
یعنی به جای اینکه خارج از فانکشن ها بیاید تعریف بکنیدشون، بیاید داخل هر فانکشن تعریف بکنید.
مثلا :

 function toggleRecording() {
var recordButton = document.getElementById('recordButton');
        var stopButton = document.getElementById('stopButton');
باقی کد 
.
.
.
}

برای تمامی فانکشن هایی که از این دو متغیر استفاده میکنند باید اینطوری براشون تعریف کنید.
با توجه به این موضوع هم دو متغیر let بالا هم که مربوط به اینها هستند حذف میشن

ضبط و ارسال ویس

پاسخ‌ها

گفتگوهای مرتبط

ضبط و ارسال ویس

قابلیت ضبط و ارسال ویس

دخیره ویس و ارسال در پایگاه داده

آپلود فایل در livewire

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید