当您需要录制当前屏幕并上传或下载屏幕录制时
const streamPromise = navigator.mediaDevices.getDisplayMedia()streamPromise.then(stream => { var recordedChunks = [];// recorded video datavar options = { mimeType: "video/webm; codecs=vp9" };// Set the encoding format var mediaRecorder = new MediaRecorder(stream, options);// Initialize the MediaRecorder instance mediaRecorder.ondataavailable = handleDataAvailable;// Set the callback when data is available (end of screen recording) mediaRecorder.start(); // Video Fragmentation function handleDataAvailable(event) { if (event.data.size > 0) { recordedChunks.push(event.data);// Add data, event.data is a BLOB object download();// Encapsulate into a BLOB object and download } }// file download function download() { var blob = new Blob(recordedChunks, { type: "video/webm" }); // Videos can be uploaded to the backend here var url = URL.createObjectURL(blob); var a = document.createElement("a"); document.body.appendChild(a); a.style = "display: none"; a.href = url; a.download = "test.webm"; a.click(); window.URL.revokeObjectURL(url); }})
判断横屏还是竖屏
function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("Portrait state！") } if(window.orientation==90||window.orientation==-90){ alert("Landscape state！") }}window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
改变横竖屏样式
<style>@media all and (orientation : landscape) { body { background-color: #ff0000; }}@media all and (orientation : portrait) { body { background-color: #00ff00; }}</style>
标签页显示隐藏
<div class="test"> <input type="file" name="" id=""> <img src="" alt=""></div>
const getObjectURL = (file) => { let url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // webkit or chrome url = window.URL.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } return url;}document.querySelector('input').addEventListener('change', (event) => { document.querySelector('img').src = getObjectURL(event.target.files[0])})
图片预加载
当图片较多时，需要预加载图片以避免白屏
function preloader(args) { for (let i = 0, len = args.length; i < len; i++) { images[i] = new Image() images[i].src = args[i] } } preloader(['1.png', '2.jpg'])
元素可编辑
当你需要编辑一个dom元素时，让它像文本区域一样点击。
<div contenteditable="true">here can be edited</div>
激活应用程序
当你在移动端开发时，你需要打开其他应用程序。还可以通过location.href赋值来操作以下方法
<a href="tel:12345678910">phone</a><a href="sms:12345678910,12345678911?body=hello">android message</a> <a href="sms:/open?addresses=12345678910,12345678911&body=hello">ios message</a><a href="wx://">ios message</a>
