| <!DOCTYPE html> |
| <html lang="tr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>FLV Video Player (FFmpeg.wasm)</title> |
| <style> |
| body { font-family: sans-serif; text-align: center; padding: 20px; } |
| canvas { border: 1px solid #333; background: #000; max-width: 100%; } |
| </style> |
| </head> |
| <body> |
| <h2>FLV Video Oynatıcı</h2> |
| <input type="file" id="uploader" accept=".flv"> |
| <br><br> |
| <canvas id="videoCanvas" width="640" height="360"></canvas> |
| <script type="module"> |
| import { FFmpeg } from './index.js'; |
| |
| async function fetchFile(fileOrUrl) { |
| if (fileOrUrl instanceof File) { |
| return new Uint8Array(await fileOrUrl.arrayBuffer()); |
| } |
| const response = await fetch(fileOrUrl); |
| return new Uint8Array(await response.arrayBuffer()); |
| } |
| |
| const canvas = document.getElementById('videoCanvas'); |
| const ctx = canvas.getContext('2d'); |
| const uploader = document.getElementById('uploader'); |
| const ffmpeg = new FFmpeg(); |
| |
| uploader.addEventListener('change', async (e) => { |
| const file = e.target.files[0]; |
| if (!file) return; |
| |
| await ffmpeg.load({ |
| coreURL: 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm/ffmpeg-core.js', |
| wasmURL: 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm/ffmpeg-core.wasm' |
| }); |
| |
| const data = await fetchFile(file); |
| await ffmpeg.writeFile('input.flv', data); |
| |
| await ffmpeg.exec(['-i', 'input.flv', '-f', 'rawvideo', '-pix_fmt', 'rgba', '-r', '24', 'out_%04d.raw']); |
| |
| playFrames(); |
| }); |
| |
| async function playFrames() { |
| let frameIdx = 1; |
| const render = async () => { |
| const filename = `out_${String(frameIdx).padStart(4, '0')}.raw`; |
| try { |
| const data = await ffmpeg.readFile(filename); |
| const imageData = new ImageData(new Uint8ClampedArray(data.buffer), 640, 360); |
| ctx.putImageData(imageData, 0, 0); |
| frameIdx++; |
| setTimeout(render, 41); |
| } catch (e) { console.log("Bitti."); } |
| }; |
| render(); |
| } |
| </script> |
| </body> |
| </html> |
