\u3053\u308c\u3067\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\ud83d\udc4d<\/p>\n
\u3067\u306f\u3001\u7d9a\u3044\u3066\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u95a2\u9023\u3059\u308b\u90e8\u5206\u3092\u3064\u304f\u3063\u3066\u3044\u304d\u307e\u3059\u3002
\n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\n
php artisan make:model CelebrationVideo -m<\/strong><\/pre>\n<\/div>\n\u3059\u308b\u3068\u3001\u30e2\u30c7\u30eb\u3068\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u306e\uff12\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u305d\u308c\u305e\u308c\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n
app\/Models\/CelebrationVideo.php<\/strong><\/p>\n\n
<?php\r\n\r\nnamespace App\\Models;\r\n\r\nuse App\\Events\\CelebrationVideoCreated;\r\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\r\nuse Illuminate\\Database\\Eloquent\\Model;\r\n\r\nclass CelebrationVideo extends Model\r\n{\r\n use HasFactory;\r\n\r\n protected $dispatchesEvents = [<\/strong>\r\n 'created' => CelebrationVideoCreated::class,<\/strong>\r\n ];<\/strong>\r\n}<\/pre>\n<\/div>\n\u3053\u3053\u306b\u306f\u3001\u30c7\u30fc\u30bf\u304c\u8ffd\u52a0\u3055\u308c\u305f\u3068\u304d\u306b\u5b9f\u884c\u3055\u308c\u308b\u30a4\u30d9\u30f3\u30c8\u3092\u30bb\u30c3\u30c8\u3057\u3066\u3044\u307e\u3059\uff08\u5f8c\u3067\u3054\u7d39\u4ecb\u3057\u307e\u3059\uff09<\/p>\n
database\/migrations\/****_**_**_******_create_celebration_videos_table.php<\/strong><\/p>\n\n
\/\/ \u7701\u7565\r\n\r\npublic function up(): void\r\n{\r\n Schema::create('celebration_videos', function (Blueprint $table) {\r\n $table->id();<\/strong>\r\n $table->string('filename')->comment('\u30d5\u30a1\u30a4\u30eb\u540d');<\/strong>\r\n $table->timestamps();<\/strong>\r\n });\r\n}\r\n\r\n\/\/ \u7701\u7565<\/pre>\n<\/div>\n\u3067\u306f\u3053\u306e\u72b6\u614b\u3067\u30c6\u30fc\u30d6\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3057\u3087\u3046\u3002
\n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\n
php artisan migrate<\/strong><\/pre>\n\u3059\u308b\u3068\u3001\u5b9f\u969b\u306e\u30c6\u30fc\u30d6\u30eb\u306f\u3053\u3046\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n
![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2023\/10\/laravel_celebration_video_1.png\")
<\/p>\n<\/div>\n
\u30a4\u30d9\u30f3\u30c8\u3092\u3064\u304f\u308b<\/h1>\n
\u3067\u306f\u3001celebration_videos<\/code>\u30c6\u30fc\u30d6\u30eb\u306b\u30c7\u30fc\u30bf\u304c\u8ffd\u52a0\u3055\u308c\u305f\u3089\u3001\u81ea\u52d5\u7684\u306b\u3053\u308c\u307e\u3067\u306e\u52d5\u753b\u3092\u7d50\u5408\u3057\u3066\uff11\u3064\u306b\u307e\u3068\u3081\u305f\u52d5\u753b\u3092\u3064\u304f\u308b\u3088\u3046\u306b\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\n
php artisan make:event CelebrationVideoCreated<\/strong><\/pre>\n\u3059\u308b\u3068\u3001\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n
app\/Events\/CelebrationVideoCreated.php<\/strong><\/p>\n\n
<?php\r\n\r\nnamespace App\\Events;\r\n\r\nuse App\\Models\\CelebrationVideo;<\/strong>\r\nuse Illuminate\\Broadcasting\\Channel;\r\nuse Illuminate\\Broadcasting\\InteractsWithSockets;\r\nuse Illuminate\\Broadcasting\\PresenceChannel;\r\nuse Illuminate\\Broadcasting\\PrivateChannel;\r\nuse Illuminate\\Contracts\\Broadcasting\\ShouldBroadcast;\r\nuse Illuminate\\Foundation\\Events\\Dispatchable;\r\nuse Illuminate\\Queue\\SerializesModels;\r\nuse FFMpeg;<\/strong>\r\n\r\nclass CelebrationVideoCreated\r\n{\r\n use Dispatchable, InteractsWithSockets, SerializesModels;\r\n\r\n \/**\r\n * Create a new event instance.\r\n *\/\r\n public function __construct()<\/strong>\r\n {<\/strong>\r\n $videos = CelebrationVideo::query()<\/strong>\r\n ->orderBy('id', 'asc')<\/strong>\r\n ->get();<\/strong>\r\n $file_paths = $videos->map(function ($video) {<\/strong>\r\n\r\n return 'videos\/celebration_videos\/'. $video->filename; \/\/ storage\/app \u4ee5\u4e0b\u306e\u30d1\u30b9<\/strong>\r\n\r\n });<\/strong>\r\n $save_filename = 'merged_video_'. $videos->count() .'.webm';<\/strong>\r\n $save_path = 'videos\/celebration_videos\/'. $save_filename; \/\/ storage\/app \u4ee5\u4e0b\u306e\u30d1\u30b9<\/strong>\r\n\r\n try {<\/strong>\r\n\r\n FFMpeg::fromDisk('local')<\/strong>\r\n ->open($file_paths->toArray())<\/strong>\r\n ->export()<\/strong>\r\n ->concatWithoutTranscoding()<\/strong>\r\n ->save($save_path);<\/strong>\r\n\r\n } catch (\\Exception $e) {<\/strong>\r\n\r\n throw $e;<\/strong>\r\n\r\n }<\/strong>\r\n }<\/strong>\r\n\r\n\/\/ \u4ee5\u4e0b\u7701\u7565<\/pre>\n\u3053\u306e\u4e2d\u3067\u3084\u3063\u3066\u3044\u308b\u306e\u306f\u3001celebration_videos<\/code>\u30c6\u30fc\u30d6\u30eb\u306b\u767b\u9332\u3055\u308c\u305f\u52d5\u753b\u30d5\u30a1\u30a4\u30eb\u306e\u30d1\u30b9\u3092\u30b2\u30c3\u30c8\u3057\u3001\u7d50\u5408\u3057\u3066\u3044\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n\u306a\u304a\u3001\u7d50\u5408\u3055\u308c\u305f\u52d5\u753b\u306e\u30d5\u30a1\u30a4\u30eb\u540d\u306f\u300cmerged_video_\uff08\u7d50\u5408\u3057\u305f\u52d5\u753b\u306e\u4ef6\u6570\uff09.webm<\/strong>\u300d\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<\/div>\n<\/div>\n\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u3064\u304f\u308b<\/h1>\n
\u7d9a\u3044\u3066\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3067\u3059\u3002
\n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\n
php artisan make:controller CelebrationVideoController<\/strong><\/pre>\n\u3059\u308b\u3068\u3001\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n
app\/Http\/Controllers\/CelebrationVideoController.php<\/strong><\/p>\n<\/div>\n\n
<?php\r\n\r\nnamespace App\\Http\\Controllers;\r\n\r\nuse App\\Models\\CelebrationVideo;<\/strong>\r\nuse Illuminate\\Http\\Request;\r\nuse Illuminate\\Support\\Str;<\/strong>\r\n\r\nclass CelebrationVideoController extends Controller\r\n{\r\n public function create()<\/strong>\r\n {<\/strong>\r\n return view('celebration_video.create');<\/strong>\r\n }<\/strong>\r\n\r\n public function store(Request $request)<\/strong>\r\n {<\/strong>\r\n \/\/ \u6ce8\u610f\uff1a \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306f\u7701\u7565\u3057\u3066\u3044\u307e\u3059<\/strong>\r\n\r\n \/\/ 5\u79d2\u52d5\u753b\u306e\u4fdd\u5b58<\/strong>\r\n $file = $request->file('video');<\/strong>\r\n $filename = Str::uuid() .'.webm';<\/strong>\r\n $file->storeAs('videos\/celebration_videos', $filename);<\/strong>\r\n\r\n $celebration_video = new CelebrationVideo();<\/strong>\r\n $celebration_video->filename = $filename;<\/strong>\r\n $celebration_video->save();<\/strong>\r\n\r\n return ['result' => true];<\/strong>\r\n }<\/strong>\r\n\r\n public function download()<\/strong>\r\n {<\/strong>\r\n $count = CelebrationVideo::count();<\/strong>\r\n $filename = 'merged_video_'. $count .'.webm';<\/strong>\r\n $filepath = storage_path('app\/videos\/celebration_videos\/'. $filename);<\/strong>\r\n\r\n return response()->download($filepath, $filename, [<\/strong>\r\n 'Content-Type' => 'video\/webm',<\/strong>\r\n ]);<\/strong>\r\n }<\/strong>\r\n}<\/pre>\n<\/div>\n\u3053\u306e\u4e2d\u3067\u306f\u7279\u5225\u306a\u3053\u3068\u306f\u3057\u3066\u3044\u307e\u305b\u3093\u304c\u3001\u4e2d\u8eab\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\n- create()\uff1a \u52d5\u753b\u3092\u64ae\u5f71\u3059\u308b\u30d5\u30a9\u30fc\u30e0\u3092\u3064\u304f\u308b<\/li>\n
- store()\uff1a \u64ae\u5f71\u3055\u308c\u305f\u52d5\u753b\u3092\u4fdd\u5b58\u3059\u308b<\/li>\n
- download()\uff1a \u7d50\u5408\u3055\u308c\u305f\u52d5\u753b\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b<\/li>\n<\/ul>\n
\u30d3\u30e5\u30fc\u3092\u3064\u304f\u308b<\/h1>\n
\u6b21\u306b\u3001\u5148\u307b\u3069\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u4e2d\u3067\u30bb\u30c3\u30c8\u3057\u305f\u300c\u30d3\u30e5\u30fc<\/strong>\u300d\u3092\u3064\u304f\u308a\u307e\u3059\u3002
\n\u3053\u3053\u304c\u4eca\u56de\u306e\u30e1\u30a4\u30f3\u306b\u306a\u308b\u3068\u3053\u308d\u3067\u3059\u306d\u3002<\/p>\nresources\/views\/celebration_video\/create.blade.php<\/strong><\/p>\n\n
<!DOCTYPE html><\/strong>\r\n<html lang=\"ja\"><\/strong>\r\n<head><\/strong>\r\n <meta charset=\"UTF-8\"><\/strong>\r\n <title>5\u79d2\u52d5\u753b\u3092\u64ae\u3063\u3066\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\uff01<\/title><\/strong>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.3.5\"><\/script><\/strong>\r\n <script src=\"https:\/\/unpkg.com\/vue@3.3.7\/dist\/vue.global.prod.js\"><\/script><\/strong>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/axios\/dist\/axios.min.js\"><\/script><\/strong>\r\n<\/head><\/strong>\r\n<body class=\"bg-pink-100 h-screen flex flex-col justify-center items-center\"><\/strong>\r\n\r\n<div id=\"app\" class=\"bg-white p-8 rounded-lg shadow-md w-1\/2 border-4 border-pink-300 text-center\"><\/strong>\r\n <h1 class=\"text-2xl font-bold mb-4 text-pink-600\">5\u79d2\u52d5\u753b\u3092\u64ae\u3063\u3066\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\uff01<\/h1><\/strong>\r\n\r\n <!-- \u9332\u753b\u4e2d\u306e\u753b\u9762 --><\/strong>\r\n <div class=\"mb-4\"><\/strong>\r\n <video id=\"video\" class=\"w-full h-48 rounded border border-pink-300\" autoplay><\/video><\/strong>\r\n <\/div><\/strong>\r\n\r\n <!-- \u30ab\u30a6\u30f3\u30c8\u30c0\u30a6\u30f3\u8868\u793a --><\/strong>\r\n <div class=\"text-2xl font-bold text-pink-600 mb-4\"><\/strong>\r\n \u6b8b\u308a <span v-text=\"countdownSeconds\"><\/span> \u79d2<\/strong>\r\n <\/div><\/strong>\r\n\r\n <!-- \u9332\u753b\u958b\u59cb\u30dc\u30bf\u30f3 --><\/strong>\r\n <div class=\"mb-4\"><\/strong>\r\n <button<\/strong>\r\n class=\"bg-pink-500 text-white px-4 py-2 rounded hover:bg-pink-600 text-3xl\"<\/strong>\r\n @click=\"startRecording\"><\/strong>\r\n \u9332\u753b\u958b\u59cb<\/strong>\r\n <\/button><\/strong>\r\n <\/div><\/strong>\r\n<\/div><\/strong>\r\n\r\n<div class=\"mt-8\"><\/strong>\r\n <a href=\"{{ route('celebration_video.download') }}\" class=\"bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600\"><\/strong>\r\n \u3053\u308c\u307e\u3067\u306e\u52d5\u753b\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/strong>\r\n <\/a><\/strong>\r\n<\/div><\/strong>\r\n\r\n<script><\/strong>\r\n\r\n Vue.createApp({<\/strong>\r\n data() {<\/strong>\r\n return {<\/strong>\r\n mediaRecorder: null,<\/strong>\r\n chunks: [],<\/strong>\r\n countdownSeconds: 5,<\/strong>\r\n timer: null,<\/strong>\r\n };<\/strong>\r\n },<\/strong>\r\n methods: {<\/strong>\r\n startRecording() {<\/strong>\r\n\r\n navigator.mediaDevices.getUserMedia({ video: true, audio: true }) \/\/ \u52d5\u753b\u3068\u97f3\u58f0\u3092\u53d6\u5f97<\/strong>\r\n .then(stream => {<\/strong>\r\n\r\n const video = document.getElementById('video');<\/strong>\r\n video.srcObject = stream;<\/strong>\r\n\r\n this.mediaRecorder = new MediaRecorder(stream, { mimeType: 'video\/webm' }); \/\/ webm \u5f62\u5f0f\u3067\u9332\u753b<\/strong>\r\n this.mediaRecorder.ondataavailable = e => {<\/strong>\r\n\r\n this.chunks.push(e.data);<\/strong>\r\n\r\n };<\/strong>\r\n\r\n this.mediaRecorder.onstop = () => {<\/strong>\r\n\r\n const mimeType = this.mediaRecorder.mimeType;<\/strong>\r\n const blob = new Blob(this.chunks, { type: mimeType });<\/strong>\r\n\r\n if (confirm('\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u307e\u3059\u304b\uff1f')) {<\/strong>\r\n\r\n const url = '{{ route('celebration_video.store') }}';<\/strong>\r\n const formData = new FormData();<\/strong>\r\n const headers = { 'Content-Type': 'multipart\/form-data' };<\/strong>\r\n formData.append('video', blob);<\/strong>\r\n\r\n axios.post(url, formData, { headers })<\/strong>\r\n .then(response => {<\/strong>\r\n\r\n if(response.data.result === true) {<\/strong>\r\n\r\n alert('\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u307e\u3057\u305f\uff01');<\/strong>\r\n this.chunks = [];<\/strong>\r\n\r\n }<\/strong>\r\n\r\n });<\/strong>\r\n\r\n }<\/strong>\r\n\r\n };<\/strong>\r\n\r\n this.mediaRecorder.start();<\/strong>\r\n this.timer = setInterval(() => {<\/strong>\r\n\r\n this.countdownSeconds--;<\/strong>\r\n\r\n if (this.countdownSeconds === 0) {<\/strong>\r\n\r\n clearInterval(this.timer);<\/strong>\r\n this.mediaRecorder.stop();<\/strong>\r\n this.countdownSeconds = 5;<\/strong>\r\n\r\n }<\/strong>\r\n\r\n }, 1000);<\/strong>\r\n\r\n });<\/strong>\r\n }<\/strong>\r\n },<\/strong>\r\n })<\/strong>\r\n .mount('#app');<\/strong>\r\n\r\n<\/script><\/strong>\r\n\r\n<\/body><\/strong>\r\n<\/html><\/strong><\/pre>\n\u3053\u306e\u4e2d\u3067\u3084\u3063\u3066\u3044\u308b\u3053\u3068\u306f\u4ee5\u4e0b\u306e\u624b\u9806\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n
\n- \u9332\u753b\u958b\u59cb\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u9332\u753b\u3092\u958b\u59cb<\/li>\n
- \uff15\u79d2\u9593\u64ae\u5f71\u3059\u308b<\/li>\n
- \u6642\u9593\u304c\u6765\u305f\u3089\u81ea\u52d5\u3067\u9332\u753b\u3092\u30b9\u30c8\u30c3\u30d7<\/li>\n
- \u9001\u4fe1\u3055\u308c\u305f\u3089\u52d5\u753b\u3092\u4fdd\u5b58<\/li>\n
- \u4fdd\u5b58\u3057\u305f\u3068\u540c\u6642\u306b\u904e\u53bb\u306e\u52d5\u753b\u3059\u3079\u3066\u3092\u5408\u4f53\u3055\u305b\u308b<\/li>\n
- \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3092\u5b9f\u884c<\/li>\n<\/ol>\n
\u306a\u304a\u3001\u5c11\u3057\u8a70\u307e\u3063\u305f\u3068\u3053\u308d\u306f\u52d5\u753b\u30c7\u30fc\u30bf\u3092\u9001\u4fe1\u3057\u3066\u4fdd\u5b58\u307e\u3067\u306f\u3067\u304d\u305f\u306e\u3067\u3059\u304c\u3001\u518d\u751f\u304c\u3067\u304d\u306a\u304b\u3063\u305f\u3068\u3053\u308d\u3067\u3059\u3002<\/p>\n
\u5b9f\u306fwebm<\/code>\u306a\u306e\u3067\u52d5\u753b\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u5bfe\u5fdc\u3057\u3066\u306a\u304b\u3063\u305f\u3068\u3044\u3046\u30aa\u30c1\u3067\u3057\u305f\ud83d\ude02
\nGoogle Chrome<\/code>\u306a\u3089\u518d\u751f\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/div>\n\u30eb\u30fc\u30c8\u3092\u3064\u304f\u308b<\/h1>\n
\u6700\u5f8c\u306b\u30eb\u30fc\u30c8\u3092\u3064\u304f\u3063\u3066\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n
![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2020\/03\/no_12.png\")
\u300c\u53cb\u4eba\u306e\u7d50\u5a5a\u5f0f\u3067