API tools faq
paste
Advertisement
Thunder-Menu

AllPlatform_Recorder.html

Thunder-Menu
Nov 1st, 2023 (edited)
807
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.19 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Enregistrement Vidéo et Audio</title>
  8.     <style>
  9.         body {
  10.             font-family: Arial, sans-serif;
  11.             text-align: center;
  12.             padding: 20px;
  13.         }
  14. #controlForm {
  15.     z-index: 1000;
  16.     position: relative;
  17. }
  18.  
  19.         #videoContainer {
  20.             width: 640px;
  21.             transition: width 0.2s, transform 0.2s;
  22.  z-index: 500;
  23.         }
  24.  
  25.         form {
  26.             display: none;
  27.             position: fixed;
  28.             right: 0;
  29.             background-color: #f4f4f4;
  30.             padding: 15px;
  31.             border-left: 1px solid #ddd;
  32.         }
  33.  
  34.         label.toggle {
  35.     color: red;
  36.             cursor: pointer;
  37.             background-color: #ddd;
  38.             padding: 5px;
  39.     font-size: 24px;
  40.             position: fixed;
  41.             top: 50%;
  42.             right: 0;
  43.             transform: translateY(-50%);
  44.         }
  45.     </style>
  46. </head>
  47.  
  48. <body>
  49.     <h1 id="platformLabel">Enregistrement Vidéo et Audio</h1>
  50.     <div id="videoContainer">
  51.         <video id="videoRecorder" playsinline controls></video>
  52.     </div>
  53.     <label class="toggle" onclick="toggleForm()"><</label>
  54.  
  55. <form id="controlForm" onsubmit="preventFormSubmit(event)" style="display: none;">
  56.         <label class="toggle" onclick="toggleForm()">></label><br>
  57.         <label for="realSizeCheckbox">Taille réelle :</label>
  58.         <input type="checkbox" id="realSizeCheckbox"><br>
  59.         <label for="zoomSlider">Zoom :</label>
  60.         <input type="range" id="zoomSlider" min="0.5" max="2" step="0.1" value="1"><br>
  61.         <label for="formatSelect">Format de la vidéo :</label>
  62.         <select id="formatSelect"></select><br>
  63.         <label for="resolutionSelect">Résolution :</label>
  64.         <select id="resolutionSelect">
  65.             <option value="1080">Full HD (1080p)</option>
  66.             <option value="720">HD (720p)</option>
  67.         </select><br>
  68.         <label for="cameraSelect">Caméra :</label>
  69.         <select id="cameraSelect">
  70.             <option value="environment">Caméra Arrière</option>
  71.             <option value="user">Caméra Frontale</option>
  72.         </select><br>
  73.         <label for="fileName">Nom du fichier :</label>
  74.         <input type="text" id="fileName" value="enregistrement"><br>
  75.         <button id="startRecord">Démarrer l'enregistrement</button>
  76.         <button id="stopRecord" disabled>Arrêter l'enregistrement</button>
  77.     </form>
  78.  
  79.     <script>
  80.         let videoRecorder = document.getElementById('videoRecorder');
  81.         let mediaStream;
  82.         let mediaRecorder;
  83.         let recordedChunks = [];
  84.         let startButton = document.getElementById('startRecord');
  85.         let stopButton = document.getElementById('stopRecord');
  86.         let platformLabel = document.getElementById('platformLabel');
  87.         let formatSelect = document.getElementById('formatSelect');
  88.         let resolutionSelect = document.getElementById('resolutionSelect');
  89.         let realSizeCheckbox = document.getElementById('realSizeCheckbox');
  90.         let zoomSlider = document.getElementById('zoomSlider');
  91.         const fileNameInput = document.getElementById('fileName');
  92.         let videoContainer = document.getElementById('videoContainer');
  93.         const originalWidth = videoContainer.style.width;
  94.  
  95.         realSizeCheckbox.addEventListener('change', toggleRealSize);
  96.         zoomSlider.addEventListener('input', adjustZoom);
  97.         startButton.addEventListener('click', startRecording);
  98.         stopButton.addEventListener('click', stopRecording);
  99.  
  100.         let userAgent = navigator.userAgent || navigator.vendor || window.opera;
  101.  
  102.         if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
  103.            platformLabel.innerText = "Enregistrement Vidéo et Audio pour iPhone/iPad/iPod";
  104.             formatSelect.innerHTML = `
  105.         <option value="video/mp4">MP4</option>
  106.         <option value="video/quicktime">MOV</option>
  107.         <option value="video/h264">H.264</option>
  108.         <option value="video/h265">H.265</option>
  109.         <option value="video/mpeg">MPEG-4</option>
  110.         <option value="video/jpeg">M-JPEG</option>`;
  111.         } else if (/android/i.test(userAgent)) {
  112.             platformLabel.innerText = "Enregistrement Vidéo et Audio pour Android";
  113.             formatSelect.innerHTML = `
  114.         <option value="video/mp4">MP4</option>
  115.         <option value="video/quicktime">MOV</option>
  116.         <option value="video/x-msvideo">AVI</option>
  117.         <option value="video/x-matroska">MKV</option>
  118.         <option value="video/x-m4v">M4V</option>
  119.         <option value="video/x-flv">FLV</option>`;
  120.         } else if (/Windows/.test(userAgent)) {
  121.             platformLabel.innerText = "Enregistrement Vidéo et Audio pour Windows";
  122.             formatSelect.innerHTML = `
  123.         <option value="video/mp4">MP4</option>
  124.         <option value="video/quicktime">MOV</option>
  125.         <option value="video/x-ms-asf">ASF</option>
  126.         <option value="video/x-ms-wmv">WMV</option>
  127.         <option value="video/x-m2ts">M2TS</option>`;
  128.         } else if (/Mac/.test(userAgent)) {
  129.             platformLabel.innerText = "Enregistrement Vidéo et Audio pour Mac";
  130.             formatSelect.innerHTML = `
  131.         <option value="video/mp4">MP4</option>
  132.         <option value="video/quicktime">MOV</option>
  133.         <option value="video/mpeg">MPEG-4</option>
  134.         <option value="video/avi">AVI</option>
  135.         <option value="video/mkv">MKV</option>`;
  136.         } else {
  137.             platformLabel.innerText = "Enregistrement Vidéo et Audio pour Autres Plateformes";
  138.             formatSelect.innerHTML = `
  139.         <option value="video/mp4">MP4</option>
  140.         <option value="video/quicktime">MOV</option>
  141.         <option value="video/mpeg">MPEG-4</option>
  142.         <option value="video/avi">AVI</option>
  143.         <option value="video/mkv">MKV</option>`;
  144.         }
  145.  
  146.         async function startRecording() {
  147.             mediaStream = await navigator.mediaDevices.getUserMedia({
  148.                 video: {
  149.                     facingMode: document.getElementById('cameraSelect').value,
  150.                     width: parseInt(resolutionSelect.value)
  151.                 },
  152.                 audio: true
  153.             });
  154.  
  155.             videoRecorder.srcObject = mediaStream;
  156.             videoRecorder.play();
  157.  
  158.             mediaRecorder = new MediaRecorder(mediaStream, { mimeType: formatSelect.value });
  159.  
  160.             mediaRecorder.ondataavailable = handleDataAvailable;
  161.             mediaRecorder.onstop = handleStop;
  162.  
  163.             mediaRecorder.start();
  164.             startButton.disabled = true;
  165.             stopButton.disabled = false;
  166.         }
  167.  
  168.         function handleDataAvailable(event) {
  169.             if (event.data.size > 0) {
  170.                 recordedChunks.push(event.data);
  171.             }
  172.         }
  173.  
  174.         function handleStop() {
  175.             const blob = new Blob(recordedChunks, { type: formatSelect.value });
  176.             const url = URL.createObjectURL(blob);
  177.             const a = document.createElement('a');
  178.             a.style.display = 'none';
  179.             a.href = url;
  180.             a.download = fileNameInput.value + '.' + getExtensionFromMimeType(formatSelect.value);
  181.             document.body.appendChild(a);
  182.             a.click();
  183.             window.URL.revokeObjectURL(url);
  184.         }
  185.  
  186.         function getExtensionFromMimeType(mimeType) {
  187.             const extensions = {
  188.                 'video/mp4': 'mp4',
  189.                 'video/quicktime': 'mov',
  190.                 'video/x-msvideo': 'avi',
  191.                 'video/x-matroska': 'mkv',
  192.                 'video/x-m4v': 'm4v',
  193.                 'video/x-flv': 'flv',
  194.                 'video/x-ms-asf': 'asf',
  195.                 'video/x-ms-wmv': 'wmv',
  196.                 'video/x-m2ts': 'm2ts',
  197.                 'video/webm': 'webm',
  198.                 'video/ogg': 'ogv',
  199.                 'video/h264': 'h264',
  200.                 'video/h265': 'h265',
  201.                 'video/mpeg': 'mpg',
  202.                 'video/jpeg': 'mjpeg'
  203.             };
  204.             return extensions[mimeType] || 'unknown';
  205.         }
  206.  
  207.         function stopRecording() {
  208.             mediaRecorder.stop();
  209.             mediaStream.getTracks().forEach(track => track.stop());
  210.             videoRecorder.srcObject = null;
  211.             startButton.disabled = false;
  212.             stopButton.disabled = true;
  213.         }
  214.  
  215.         function toggleRealSize() {
  216.             if (realSizeCheckbox.checked) {
  217.                 videoContainer.style.transform = 'scale(1)';
  218.             } else {
  219.                 videoContainer.style.transform = 'scale(' + zoomSlider.value + ')';
  220.             }
  221.         }
  222.  
  223.         function adjustZoom() {
  224.             if (!realSizeCheckbox.checked) {
  225.                 videoContainer.style.transform = 'scale(' + zoomSlider.value + ')';
  226.             }
  227.         }
  228.  
  229.         function toggleForm() {
  230.             const form = document.getElementById('controlForm');
  231.             form.style.display = (form.style.display === 'none' || form.style.display === '') ? 'block' : 'none';
  232.         }
  233. function preventFormSubmit(e) {
  234.     e.preventDefault();
  235. }
  236.  
  237.     </script>
  238. </body>
  239.  
  240. </html>
  241.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!