油猴指令碼開發 | 視訊錄屏
阿新 • • 發佈:2022-12-09
一、Tampermonkey
二、程式碼
程式碼=>網頁遊戲、網頁視訊錄屏
// ==UserScript== // @name 網頁遊戲、網頁視訊錄屏 // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author echohye // @match *://*/* // @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABSRJREFUWEftlmtQVGUYx//nnN2zyy4XYXEXdFmvOKA5tpKDqQioqWkFZnYbhxormmDZoFTkg0E5TSqDFpc0nTKnvFQmOBHNKFMoM8iM4CVGnRFtNMEa3eQiEHsu79ucZXZxaRfWbMYvPl/f5/J7/89znvcweMDGPOD6eAjwUIF7VqAoYfbrt8407XYPr3FSEG63yT1UliQiivpISnVFgBTocAcMYOf5NE4btC+xZLe+/s2XUX4z2VXDZjyOxE2bwDkaMOqpD1CbNl8MnRy3+4+zpwp3AY4ds5HH65D22s9I8QUVEIBdpfoz6Yvv+g0Jc8YpSb6fPtYD4E6qgCi2sqUdjqZG1K9ZKRFZWhZlgSY2AXNfrETBfwLICw7pXnbifAin0XjifQHUFF9FTfE1F4DbqqwxMgQhvhRo9dcSLwVsAC3H4G6wq9WOpceaDdrRJq94BUCxKfONIMETcbmm0XP7oYWqrJYuKjhNZYBzWAWU4mUngZzHAQXCBqZ3waFaRh0aFsSqVAgyRfu8hBtGOYx/611MzXoHQlcHZKcTWkMkGE6FyuljOsuIHO4XwAasip2Jb+0VAwDg+KOmOUmp8Vlr1fqY8dCER/gdanc7Whs6sXftHSR//RPEnjsgogilbXzYKFyvqaKnC9ctLZOcR4cmcrUgi+WLWCIUug8JYJldvLPJvGyFcaTPSQGYtToOr2wz4bMCI6bkfuwVQgnB7XPNaLBl1At3ehJBaa5IxP27gC7FkbFxmmco6OoKWXjeM9GAvOLXdlaRLxA7t/k9XN73Oaw5GZiY+ZHPkMoZ5j5OUk8WWCmTYbCRYciickmqY7I5nlbIgtcw2tXq3vSzbbpAirtu4WjCodQ0zNu5D6a5Pj93VFktzlLBqVX8c8BPJRyaKmRBx2SpNItZ0IXlkpDvLvi2ViukNV9TBwqg+PU7bkIb6b9jR6wW6RPB6cnpajtL6lw3t3H8Kgp8CUrzKoi4y87zYvqZ64HpD4BerUX1ygwQmUClUSG1pAC6edle/FUzzHKpJLpyeilwt1c2q84Ew2xnKNGmHqxhw6fNCEiEH2dFY+M3BGGRA+7rFgFLquvAGeM98YcfiaKE45cylP4AQBZlwaKsap+r2MawdMJLa3D18AFYlj+LqPkLoY+xQBNugCbCAFY12J2u43vwWPAGmGMHWZ19wIblPJIPHkPnhRZ0XGjBlQN7QCkKVITdX4r+393ePgFygNGPFhWfnrAqw9x3ow23Tp1E95VLcN52oP8vB2421iujB0pkRBhlZG6W/gXw6VoeYemboTdbwKp5nNuUn/9h68WtPveAL53zQkI7nm5sHeXedHfv+Lv9pb5e1D0Zi/V7ZE8L1j8BpDW2QGAGhrLKahGp4AzxtY79voY2IEVnCq/dcn4mp7x0E55bjZmFW3zOhHypGtUvvAFZINDoVUjZug76lFyPb+X06LYyQmJ8BQ/7HGezKvp+cyIMMVpsTz+PKw0OTw5/igwtciRh/C3S/3fMiI+Rv3FXIAp+ScDYacFeLhuT2rHg0MA/gD+rnhPnZLo6zCXAIPkQ5xF/SLKAqAizrn1x7jg26dUxrnClJcMpoAxubXpyt7O3x7oD+G04yBEB3MFFsaHHxD55YdwCI7PEHo29uTcQm/8VQidN8eTvbr2IExnpgtjTTcoICQpkiQQM4E5mA0MjJ+pFIjOcwaJhLjd0UoZjRVAqElHUlQNcIIWH3QP3kuB+fe9ZgfstGPAi+r8L+cv3wBX4B9wX5+QhPM7vAAAAAElFTkSuQmCC // @grant GM_download // @grant GM_addStyle // ==/UserScript== (function () { 'use strict'; // 用於判斷網頁及程式碼全部執行完畢再執行指令碼內容 let readyState = false; window.onload = () => { let interval; let i=0; interval = setInterval(() => { i++; if (i > 30 || readyState) { clearInterval(interval); } else { loadReady(); } }, 1000) } // 指令碼內容 function loadReady() { readyState = true; // js let video = document.querySelector('video') if (!video) return; // css var domHead = document.getElementsByTagName('head')[0]; var domStyle = document.createElement('style'); domStyle.type = 'text/css'; domStyle.rel = 'stylesheet'; let cssStyle = ` .recorder { width: 30px; background-color: #aaa; z-index: 99999; position: fixed; border: solid 1px #222; border-top-right-radius: 3px; border-bottom-right-radius: 3px; user-select: none; left: 0; top: 40%; font-size: 12px; color:#111; } .r-btn { width: 30px; height: 20px; line-height: 20px; background-color: #fff; border-radius: 2px; cursor: pointer; } .r-btn:hover { opacity: .9; } .r-div { text-align: center; } ` domStyle.appendChild(document.createTextNode(cssStyle)); domHead.appendChild(domStyle); // html let domBody = document.body; let rbtn = document.createElement('div'); rbtn.setAttribute('class', 'recorder'); rbtn.innerHTML = `<div class="r-div r-btn">開始</div><div class="r-div r-time"></div>`; domBody.appendChild(rbtn); // js let btn = document.querySelector('.r-btn'); btn.addEventListener('click', function () { if (this.innerText === '開始') { this.innerText = '結束'; rstart() } else { this.innerText = '開始'; rstop() } }) let timeOut; let mediaRecorder; function rstart() { let time = 0; let domTime = document.querySelector('.r-time'); domTime.innerText = '0s'; timeOut = setInterval(() => { time++; let text = `${time}s`; if (time > 60 && time < 3600) { text = `${parseInt(time / 60)}m${time % 60}s`; } domTime.innerText = text }, 1000) const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ? "video/webm; codecs=vp9" : "video/webm"; mediaRecorder = new MediaRecorder(video.captureStream(), { mimeType: mime }) mediaRecorder.addEventListener('stop', function () { let blob = new Blob(chunks, { type: chunks[0].type }) let url = URL.createObjectURL(blob); let a = document.createElement('a'); a.href = url; a.download = 'video.mp4'; a.click(); URL.revokeObjectURL(blob); }) let chunks = []; mediaRecorder.addEventListener('dataavailable', function (e) { chunks.push(e.data) }) mediaRecorder.start(); } function rstop() { clearInterval(timeOut); document.querySelector('.r-time').innerText = ''; mediaRecorder.stop(); } } })();
三、演示
1.隨便開啟一個含有視訊的網頁,指令碼會自動檢測是否支援,支援的話,左邊會顯示一個“開始”的按鈕
2.點選按鈕,則開始錄製
3.再次點選按鈕,則錄屏結束
程式碼有待優化,僅供參考!