ضبط و ارسال ویس
سلام وقت بخیر
من از طریق livewire , pusher , laravel echo یک برنامه چت نوشتم که میخوام قابلیت ضبط ویس و ارسال رو ایجاد کنم
طبق سرچ گفته شد باید از webrtc استفاده کرد ، من توی html که میزارم کدها اکی هستن کار میکنن ولی مشکلم اینه توی livewire نمیدونم به چه صورت باید استفاده کنم ، به شکل زیر نوشتم ولی وقتی وی ضبط صدا میزنم کار نمیکنه
table
Schema::create('messages', function (Blueprint $table) {
$table->id();
$table->foreignId('conversation_id')->constrained()->onDelete('cascade');
$table->unsignedBigInteger('sender_id');
$table->foreign('sender_id')->references('id')->on('users')->onDelete('cascade');
$table->unsignedBigInteger('receiver_id');
$table->foreign('receiver_id')->references('id')->on('users')->onDelete('cascade');
$table->boolean('read')->default(0)->nullable();
$table->text('body')->nullable();
$table->string('voice')->nullable();
$table->string('type')->nullable();
$table->timestamps();
});
blade
<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="پیام خود را بنویسید ...">
</div>
</form>
<div>
<button wire:click="startRecording" wire:loading.attr="disabled" wire:target="startRecording">Start Recording</button>
<button wire:click="stopRecording" wire:loading.attr="disabled" wire:target="stopRecording" {{ $disabled }}>Stop Recording</button>
<audio wire:ignore id="audio" controls></audio>
</div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script>
Livewire.on('recordStarted', () => {
document.querySelector('[wire:click="startRecording"]').setAttribute('disabled', true);
document.querySelector('[wire:click="stopRecording"]').removeAttribute('disabled');
var mediaConstraints = {
audio: true
};
navigator.mediaDevices.getUserMedia(mediaConstraints)
.then(function(stream) {
window.recordRTC = RecordRTC(stream, {
type: 'audio'
});
window.recordRTC.startRecording();
})
.catch(function(error) {
// Error handling
});
});
Livewire.on('recordStopped', (audioURL) => {
document.querySelector('[wire:click="startRecording"]').removeAttribute('disabled');
document.querySelector('[wire:click="stopRecording"]').setAttribute('disabled', true);
document.querySelector('#audio').src = audioURL;
});
</script>
component
public function SendMessage()
{
$this->createdMessage = Message::create([
'conversation_id'=>$this->selectedConversation->id,
'sender_id'=>auth()->id(),
'receiver_id'=>$this->receiverInstance->id,
'body'=>$this->body,
]);
$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');
}
public function startRecording()
{
$this->recording = 'recording_' . Str::random(8) . '.webm';
}
public function stopRecording()
{
$path = $this->recording;
$user_id = Auth::user()->id;
$recording = Message::create([
'user_id' => $user_id,
'path' => $path
]);
$this->dispatchBrowserEvent('chat.send-message', $recording->id, $this->recordingFile->getFilename());
}
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام. برای استفاده از WebRTC در livewire، شما باید از یک کتابخانه js برای اتصال به پشتیبانی کننده WebRTC مانند PeerJS استفاده کنید. با استفاده از این کتابخانه، شما می توانید یک اتصال peer-to-peer بین دو کاربر برقرار کنید و صدا و تصویر را از طریق این اتصال انتقال دهید.
برای شروع، شما باید کتابخانه PeerJS را نصب کنید و یک اتصال PeerJS در فایل Livewire خود ایجاد کنید. سپس، شما باید دو حالت recording و sending را پیاده سازی کنید که در هر حالت، شما می توانید با استفاده از کتابخانه RecordRTC، صدای کاربر را ضبط کرده و آن را به صورت بسته به پشتیبانی کننده ارسال کنید.
در نهایت، شما باید همه این عملیات ها را در قالب کلاس Livewire خود پیاده کنید. من توصیه می کنم که برای شروع، از یک راهنمای آموزشی در مورد استفاده از PeerJS با Livewire و RecordRTC استفاده کنید و سپس به پیاده سازی خود بپردازید.
این یک مثال کامل برای استفاده از PeerJS با Livewire و RecordRTC است:
فایل app/Http/Livewire/Chat.php:
<?php
namespace App\Http\Livewire;
use App\Models\Message;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
use Livewire\WithFileUploads;
class Chat extends Component
{
use WithFileUploads;
public $conversationId;
public $selectedConversation;
public $messages;
public $messageBody;
public $recording;
protected $listeners = ['pusher:subscription_succeeded' => 'onPusherSubscriptionSucceeded'];
public function onPusherSubscriptionSucceeded()
{
$this->getMessages();
}
public function mount($conversation)
{
$this->conversationId = $conversation['id'];
$this->getMessages();
}
public function render()
{
return view('livewire.chat');
}
public function getMessages()
{
$this->selectedConversation = Conversation::findOrFail($this->conversationId);
$this->messages = $this->selectedConversation->messages()->with(['sender'])->get();
}
public function sendMessage()
{
if (!$this->messageBody && !$this->recording) {
return;
}
// If the user has recorded a message, save the file and create a message with the path to the file
if ($this->recording) {
$path = $this->recording->store('recordings', 'public');
$message = Message::create([
'conversation_id' => $this->selectedConversation->id,
'sender_id' => Auth::id(),
'type' => 'audio',
'voice' => $path,
]);
$this->recording = null;
} else {
// Otherwise, create a message with the message body
$message = Message::create([
'conversation_id' => $this->selectedConversation->id,
'sender_id' => Auth::id(),
'body' => $this->messageBody,
]);
$this->messageBody = '';
}
$this->selectedConversation->last_message = $message->created_at;
$this->selectedConversation->save();
$this->emit('messageSent', $message->id);
}
public function startRecording()
{
$this->recording = $this->recordingFile;
}
}فایل resources/views/livewire/chat.blade.php:
<div class="chat-container">
<div class="messages">
@foreach($messages as $message)
<div class="message {{ $message->sender_id === Auth::id() ? 'sent' : 'received' }}">
@if($message->type == 'text')
{{ $message->body }}
@elseif($message->type == 'audio')
<audio controls src="{{ asset('storage/' . $message->voice) }}"></audio>
@endif
</div>
@endforeach
</div>
<form wire:submit.prevent="sendMessage">
<div class="input-container">
<input type="text" class="message-input" wire:model.defer="messageBody"
placeholder="Type your message...">
<button type="button" class="record-button" wire:click.prevent="startRecording">
<i class="fa fa-microphone"></i>
</button>
<input type="file" class="hidden" wire:model="recordingFile"
accept="audio/*" onchange="this.form.submit()" id="recording-file-input">
</div>
</form>
</div>این کد ها شامل یک فرم برای ارسال پیام، امکان ضبط و ارسال صدا و اجزای لازم برای استفاده از PeerJS با Livewire و RecordRTC هستند. من امیدوارم که این مثال به شما کمک کند لطفا رای مثبت دهید...
@Arshiamohammadei
سلام ممنون از راهنماییتون
منبع اموزشی هست راهنمایی بفرمایید ؟
با livewire پیدا نکردم
@paradox خواهش میکنم
ببین آموزش های کاملش نیست که اون سه سرویس رو همزمان آموزش بده باید جدا جدا یادبگیری
پیشنهاد میکنم از منابع آموزشی آنلاین مثل سایت udemy.com، coursera.org و یا سایت‌های دیگری که دوره‌های آموزشی آنلاین ارائه می‌دهند، استفاده کنید. همچنین منابع آموزشی رسمی پروژه‌های Preejs Livewire و RecordRTC نیز در دسترس هستند که می‌توانید از آن‌ها استفاده کنید.
برای آموزش Preejs Livewire می‌توانید به سایت رسمی این پروژه به آدرس https://laravel-livewire.com/docs/2.x/installation مراجعه کنید. در این سایت راهنمای نصب و استفاده از Preejs Livewire را به صورت جامع برای نسخه‌های مختلف لاراول ارائه شده است.
برای آموزش RecordRTC می‌توانید به سایت رسمی این پروژه به آدرس https://recordrtc.org/ مراجعه کنید. در این سایت راهنمای نصب و استفاده از RecordRTC به همراه مثال‌های کدی برای نمونه پروژه‌های وب ارائه شده است. همچنین در سایت GitHub پروژه RecordRTC به آدرس https://github.com/muaz-khan/RecordRTC می‌توانید با کدهای پروژه آشنا شوید و مستندات آن را بررسی کنید.
توی کلاینت ساید ضبط میکنید blob رو به فایل تبدیل میکنید و توی فورم دیتا به ایپی ای میفرستد یا حالا با وب سوکت
@Arshiamohammadei
@MakaveliDon
الان دلیل اینکه وقتی روی میکروفون میزنم حتی اجازه دسترسی نمیگیره چیه ؟
قبل اینکه کدو بیارم تو livewire کار میکرد
اگه منظورت دسترسی مرورگر هستش بله چون قبلا این کارو انجام داده با یه مرورگر دیگه امتحان کن و یا تمام کش های اون وب سایت رو پاک کنی دوباره دسترسی به میکروفن رو میخواد
@Arshiamohammadei
بله منظورم دسترسی مرورگر هست
چرا همینکارو کردم اصلا دسترسیمیکروفون روی مرورگر ست نیست ، کش و کوکی هم پاک شده ولی توی livewire میارم کار نمیکنه و با هر مرورگر تست میکنم همینه
@Arshiamohammadei
با سلام لطفا در مورد pusher راهنمایی کنید در مورد توضیحاتی که بالا دادین ایا pusher لازمه ؟ در ضمن باید در pusher هزینه پرداخت کرد یا رایگانه؟ ممنون میشم راهنمایی کنین