{"id":3911,"date":"2023-11-04T23:13:55","date_gmt":"2023-11-04T23:13:55","guid":{"rendered":"http:\/\/localhost:10003\/how-to-create-a-video-streaming-app-with-laravel-and-vimeo-api\/"},"modified":"2023-11-05T05:48:28","modified_gmt":"2023-11-05T05:48:28","slug":"how-to-create-a-video-streaming-app-with-laravel-and-vimeo-api","status":"publish","type":"post","link":"http:\/\/localhost:10003\/how-to-create-a-video-streaming-app-with-laravel-and-vimeo-api\/","title":{"rendered":"How to Create a Video Streaming App with Laravel and Vimeo API"},"content":{"rendered":"
In this tutorial, we will learn how to create a video streaming app using the Laravel framework and Vimeo API. We will be using Laravel’s powerful features to handle user authentication, uploading videos to Vimeo, and streaming videos to our users.<\/p>\n
Before we get started, make sure you have the following prerequisites installed on your system:<\/p>\n
First, let’s create a new Laravel project by running the following command in your terminal:<\/p>\n
composer create-project laravel\/laravel video-streaming-app\n<\/code><\/pre>\nOnce the project is created, navigate to the project directory:<\/p>\n
cd video-streaming-app\n<\/code><\/pre>\nStep 2: Configure Environment Variables<\/h2>\n
Laravel uses environment variables to store sensitive information. Open the .env<\/code> file in the project root directory and add the following lines:<\/p>\nVIMEO_CLIENT_ID=your_client_id\nVIMEO_CLIENT_SECRET=your_client_secret\nVIMEO_ACCESS_TOKEN=your_access_token\n<\/code><\/pre>\nReplace your_client_id<\/code>, your_client_secret<\/code>, and your_access_token<\/code> with the actual values obtained from the Vimeo Developer Dashboard.<\/p>\nStep 3: Install Required Packages<\/h2>\n
To interact with the Vimeo API, we will be using the vimeo-laravel<\/code> package. Install the package by running the following command:<\/p>\ncomposer require nahid\/vimeo-laravel\n<\/code><\/pre>\nNext, publish the package configuration file to customize its behavior:<\/p>\n
php artisan vendor:publish --provider=\"NahidVimeoVimeoServiceProvider\"\n<\/code><\/pre>\nStep 4: Create Routes and Controllers<\/h2>\n
Before we can start building our video streaming app, let’s define the necessary routes and controllers.<\/p>\n
Open the routes\/web.php<\/code> file and add the following routes:<\/p>\nuse AppHttpControllersVideoController;\n\nRoute::get('\/', [VideoController::class, 'index']);\nRoute::post('\/videos', [VideoController::class, 'store']);\n<\/code><\/pre>\nNow, let’s create the VideoController<\/code> and add the required methods. In your terminal, run the following command to generate the controller:<\/p>\nphp artisan make:controller VideoController\n<\/code><\/pre>\nOpen the app\/Http\/Controllers\/VideoController.php<\/code> file and replace its contents with the following code:<\/p>\n<?php\n\nnamespace AppHttpControllers;\n\nuse IlluminateHttpRequest;\nuse NahidVimeoVimeo;\n\nclass VideoController extends Controller\n{\n public function index()\n {\n \/\/ Fetch the videos from Vimeo and pass them to the view\n $videos = Vimeo::request('\/me\/videos');\n\n return view('videos.index', compact('videos'));\n }\n\n public function store(Request $request)\n {\n \/\/ Upload the video to Vimeo\n $videoPath = $request->file('video')->getRealPath();\n $video = Vimeo::upload($videoPath);\n\n \/\/ Save the video details to the database\n AppModelsVideo::create([\n 'vimeo_video_id' => $video['body']['uri'],\n 'title' => $video['body']['name'],\n ]);\n\n return redirect()->route('videos.index')\n ->with('success', 'Video uploaded successfully.');\n }\n}\n<\/code><\/pre>\nStep 5: Create Views<\/h2>\n
Now let’s create the necessary views to display videos and to upload new videos.<\/p>\n
Create a new directory named videos<\/code> inside the resources\/views<\/code> directory. Inside the videos<\/code> directory, create two files: index.blade.php<\/code> and upload.blade.php<\/code>.<\/p>\nIn the index.blade.php<\/code> file, add the following code:<\/p>\n@extends('layout')\n\n@section('content')\n <h1>Videos<\/h1>\n\n @if (session('success'))\n <div class=\"alert alert-success\">\n {{ session('success') }}\n <\/div>\n @endif\n\n <div>\n <a href=\"{{ route('videos.upload') }}\" class=\"btn btn-primary\">Upload Video<\/a>\n <\/div>\n\n <table class=\"table\">\n <thead>\n <tr>\n <th>Title<\/th>\n <th>Actions<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n @foreach ($videos['body']['data'] as $video)\n <tr>\n <td>{{ $video['name'] }}<\/td>\n <td>\n <a href=\"{{ route('videos.stream', $video['uri']) }}\" class=\"btn btn-success\">Stream<\/a>\n <\/td>\n <\/tr>\n @endforeach\n <\/tbody>\n <\/table>\n@endsection\n<\/code><\/pre>\nIn the upload.blade.php<\/code> file, add the following code:<\/p>\n@extends('layout')\n\n@section('content')\n <h1>Upload Video<\/h1>\n\n <form method=\"POST\" action=\"{{ route('videos.store') }}\" enctype=\"multipart\/form-data\">\n @csrf\n\n <div class=\"form-group\">\n <label for=\"video\">Video File<\/label>\n <input type=\"file\" name=\"video\" id=\"video\" class=\"form-control-file\">\n <\/div>\n\n <div class=\"form-group\">\n <button type=\"submit\" class=\"btn btn-primary\">Upload<\/button>\n <\/div>\n <\/form>\n@endsection\n<\/code><\/pre>\nStep 6: Create Model and Migration<\/h2>\n
We need to create a database table to store the details of uploaded videos. In your terminal, run the following command to create the model and migration file:<\/p>\n
php artisan make:model Video -m\n<\/code><\/pre>\nOpen the generated migration file (located in database\/migrations<\/code>) and replace its contents with the following code:<\/p>\n<?php\n\nuse IlluminateDatabaseMigrationsMigration;\nuse IlluminateDatabaseSchemaBlueprint;\nuse IlluminateSupportFacadesSchema;\n\nclass CreateVideosTable extends Migration\n{\n public function up()\n {\n Schema::create('videos', function (Blueprint $table) {\n $table->id();\n $table->string('vimeo_video_id');\n $table->string('title');\n $table->timestamps();\n });\n }\n\n public function down()\n {\n Schema::dropIfExists('videos');\n }\n}\n<\/code><\/pre>\nRun the migration to create the videos<\/code> table:<\/p>\nphp artisan migrate\n<\/code><\/pre>\nStep 7: Create Layout and Styling<\/h2>\n
Create a new file named layout.blade.php<\/code> inside the resources\/views<\/code> directory and add the following code:<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <title>Video Streaming App<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n<\/head>\n<body>\n <div class=\"container\">\n @yield('content')\n <\/div>\n<\/body>\n<\/html>\n<\/code><\/pre>\nStep 8: Create Streaming Route and Method<\/h2>\n
Now let’s define a route and a method in the VideoController<\/code> to stream videos to our users.<\/p>\nOpen the routes\/web.php<\/code> file and add the following route:<\/p>\nRoute::get('\/videos\/{video}', [VideoController::class, 'stream'])->name('videos.stream');\n<\/code><\/pre>\nOpen the VideoController<\/code> and add the stream<\/code> method:<\/p>\npublic function stream(Request $request, $videoId)\n{\n $video = AppModelsVideo::where('vimeo_video_id', $videoId)->firstOrFail();\n\n if ($request->user()->tokenCan('view-private-videos')) {\n $streamUrl = Vimeo::request('\/videos\/' . $videoId . '\/files')->body['data'][0]['link'];\n } else {\n $streamUrl = Vimeo::request('\/videos\/' . $videoId)->body['files'][0]['link'];\n }\n\n return view('videos.stream', compact('video', 'streamUrl'));\n}\n<\/code><\/pre>\nCreate a new file named stream.blade.php<\/code> inside the resources\/views<\/code> directory and add the following code:<\/p>\n@extends('layout')\n\n@section('content')\n <h1>Streaming video: {{ $video->title }}<\/h1>\n\n <video width=\"800\" height=\"600\" controls>\n <source src=\"{{ $streamUrl }}\" type=\"video\/mp4\">\n Your browser does not support the video tag.\n <\/video>\n@endsection\n<\/code><\/pre>\nStep 9: Set Up API Authentication<\/h2>\n
To interact with the Vimeo API, we need to set up API authentication using Laravel’s built-in OAuth2 client.<\/p>\n
Open the app\/Providers\/AuthServiceProvider.php<\/code> file and add the following code inside the boot<\/code> method:<\/p>\nuse LaravelPassportPassport;\n\nPassport::tokensCan([\n 'view-private-videos' => 'View private videos',\n]);\n<\/code><\/pre>\nNext, open the app\/Http\/Kernel.php<\/code> file and add the following middleware to the $routeMiddleware<\/code> array:<\/p>\n'client.credentials' => LaravelPassportHttpMiddlewareCheckClientCredentials::class,\n<\/code><\/pre>\nOpen the routes\/api.php<\/code> file and add the following route:<\/p>\nRoute::middleware('client.credentials')->get('\/videos\/{video}', [VideoController::class, 'stream'])\n ->name('videos.stream');\n<\/code><\/pre>\nStep 10: Update the HomeController<\/h2>\n
Open the app\/Http\/Controllers\/HomeController.php<\/code> file and update the index<\/code> method to redirect to the video index page:<\/p>\npublic function index()\n{\n return redirect()->route('videos.index');\n}\n<\/code><\/pre>\nStep 11: Start the Development Server<\/h2>\n
That’s it! We have completed all the necessary steps to create a video streaming app with Laravel and the Vimeo API.<\/p>\n
You can start the development server by running the following command in your terminal:<\/p>\n
php artisan serve\n<\/code><\/pre>\nOpen your web browser and visit `http:\/\/localhost:8000` to see the app in action.<\/p>\n
Conclusion<\/h2>\n
In this tutorial, we have learned how to create a video streaming app using Laravel and the Vimeo API. We have covered setting up the Laravel project, configuring environment variables, installing required packages, creating routes and controllers, creating views, setting up database migrations, creating a layout, styling the app, and implementing API authentication. Now you can expand on this foundation to build your own custom video streaming app with additional features like user profiles, playlists, and more.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, we will learn how to create a video streaming app using the Laravel framework and Vimeo API. We will be using Laravel’s powerful features to handle user authentication, uploading videos to Vimeo, and streaming videos to our users. Prerequisites Before we get started, make sure you have Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[10,288,286,287,49,285],"yoast_head":"\nHow to Create a Video Streaming App with Laravel and Vimeo API - Pantherax Blogs<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n