JS preload video audio/video capture screenshot tips sharing
This article mainly introduces the relevant information about JS implementation of preloading video audio/video to obtain screenshots (returning canvas screenshots). Friends in need can refer to it. I hope it can help everyone.
#load-media.js
/**
* Create by Capricorncd 2017
*/
// 同域资源实现视频截图，可上传的图片数据格式
// 非同域资源实现canvas截图预览
// 提示码
const CODES = {
0: 'success',
1: 'The url is not valid',
2: 'onerror'
}
/**
* constructor
* @param opts.url 音频|视频URL
* @param opts.type 'audio|video'
* @param opts.callback 回调函数
*/
function loadMedia(opts) {
this.callback = opts.callback || function (res) {
console.log(res);
}
// 初始化
this.init(opts);
}
// prototype
loadMedia.prototype = {
/**
* 初始化media
* @param url
*/
init: function (opts) {
let self = this;
if (!opts.url || typeof opts.url !== 'string') {
this.callback({code: 1, msg: CODES[1]});
return;
}
// 创建media
let mediaType = opts.type === 'audio' ? 'audio' : 'video';
this.media = document.createElement(mediaType);
console.log('this.media', this.media);
// loaded
this.listener('canplaythrough', function (e) {
// 截图
if (mediaType === 'video') {
self.screenshot();
} else {
self.callback({
code: 0,
msg: CODES[0],
thumb: null,
media: this.media,
canvas: null
});
}
});
// error
this.listener('error', function (e) {
self.callback({code: 2, msg: CODES[2], data: e});
})
this.media.setAttribute('src', opts.url);
},
screenshot: function () {
// create canvas
let canvas = document.createElement('canvas');
canvas.width = this.media.videoWidth;
canvas.height = this.media.videoHeight;
let ctx = canvas.getContext('2d');
// 截取
ctx.drawImage(this.media, 0, 0);
let thumb = null;
// 非跨域资源
// !!非同域资源无法获取数据
try {
let type = 'image/png';
let data = canvas.toDataURL(type);
thumb = this.toBlobData(data, type);
} catch (e) {}
this.callback({
code: 0,
msg: CODES[0],
thumb: thumb,
media: this.media,
canvas: canvas
})
},
// 数据转换
toBlobData: function (data, type) {
// 获取base64数据
// base64数据格式:
// "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAkGB+wgHBgkIBwgKCgkLDRYPDQw//9k="
data = window.atob(data.split(',')[1]);
let ia = new Uint8Array(data.length);
for (let i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
};
// canvas.toDataURL 返回的默认格式是 image/png
return new Blob([ia], {type: type});
},
/**
* addEventListener 事件监听
* @param en EventName
* @param callback
*/
listener: function (en, callback) {
this.media.addEventListener(en, function (e) {
if (callback) {
callback(e);
} else {
console.warn(this);
}
}, false);
}
/**
* 资源是否跨域
* @param url 资源地址
* @returns {boolean}
*/
// isCrossDomain: function (url) {
// let loc, host, protocol;
// loc = window.location;
// host = loc.host;
// protocol = loc.protocol;
// // 是否为http链接
// if (/(http|https):\/\//.test(url)) {
// if (url.indexOf(protocol + '//' + host) >= 0) {
// return false;
// } else {
// return true;
// }
// }
// // './xxx.mp4' '/xxx.mp4' 'xxx.mp4'
// return false;
// }
}export default loadMedia;
// 参考资料
// HTML5的Video标签的属性,方法和事件汇总
// http://www.cnblogs.com/TF12138/p/4448108.html
# 使用
import loadMedia from '@/common/js/load-media'
let loadVideo = new loadMedia({
type: 'video',
url: 'http://xmqvip1-1253933147.file.myqcloud.com/chat/video/60/2017/09/29/qgj1c8K7oaYn-SCVideo-Merged.mp4',
callback: handleCallback
})
function handleCallback (res) {
console.log(res)
// canplaythrough
if (res.code === 0) {
}
// error
if (res.code === 2) {
}
}Related recommendations:
javascript - How to use phantomjs to get screenshots and save them
The above is the detailed content of JS preload video audio/video capture screenshot tips sharing. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What to do if a black screen appears when taking a screenshot on a win10 computer_How to deal with a black screen when taking a screenshot on a win10 computer
Mar 27, 2024 pm 01:01 PM
1. Press the win key + r key, enter regedit, and click OK. 2. In the opened registry editor window, expand: HKEY_LOCAL_MACHINESYSTEMCurrentControlSetControlGraphicsDriversDCI, select Timeout on the right and double-click. 3. Then change 7 in [Numeric Data] to 0, and confirm to exit.
How to take screenshots on Redmi 13c?
Mar 04, 2024 pm 09:13 PM
Recently, many consumers are considering replacing their mobile phones, and Redmi13C is a very cost-effective choice. The performance configuration of this phone is excellent. In order to facilitate daily use, let me briefly introduce how to take screenshots on Redmi 13C. Let’s find out together! How to take a screenshot on Redmi 13c 1. Shortcut key to take a screenshot: Press the power button and volume down key of the Redmi phone at the same time to take a screenshot. 2. Gesture screenshot: Enter the settings of the Redmi phone, find "More settings", find and click "Gesture and key shortcuts", then enable the "three-finger pull-down" operation and set it to take a screenshot. In this way, when you need to take a screenshot, you only need to slide down on the screen with three fingers to take a screenshot. 3. Take a screenshot of the notification bar: from the phone screen
iPhone screenshots not working: How to fix it
May 03, 2024 pm 09:16 PM
Screenshot feature not working on your iPhone? Taking a screenshot is very easy as you just need to hold down the Volume Up button and the Power button at the same time to grab your phone screen. However, there are other ways to capture frames on the device. Fix 1 – Using Assistive Touch Take a screenshot using the Assistive Touch feature. Step 1 – Go to your phone settings. Step 2 – Next, tap to open Accessibility settings. Step 3 – Open Touch settings. Step 4 – Next, open the Assistive Touch settings. Step 5 – Turn on Assistive Touch on your phone. Step 6 – Open “Customize Top Menu” to access it. Step 7 – Now you just need to link any of these functions to your screen capture. So click on the first
How to Take Screenshots on Lenovo ThinkPad X13 Notebook: Shortcut Key Guide
Jan 01, 2024 pm 09:11 PM
Screenshotting is a very common feature on computers, as it makes it easy to capture and share what's on your screen. There are many ways to take screenshots on a computer. Now, let’s introduce the commonly used screenshot methods on Lenovo ThinkPad X13 notebook. Lenovo ThinkPad X13 screenshot method introduction Regarding the screenshot method on the computer, there are many options available. Here, we will focus on the methods of taking screenshots with ThinkPad X13’s shortcut keys and taking screenshots with mainstream software. ThinkPadX13 provides a simple shortcut key screenshot function. You only need to press the Fn key and the PrtSc key to save a screenshot of the current screen contents to the clipboard. After that you can open any picture editing software like Paint
How to send Mac screenshot to WeChat
Feb 06, 2024 am 09:55 AM
How to send a Mac screenshot to WeChat? First, find launchpad on the desktop, open it, find WeChat, then click WeChat to log in, and finally enter the shortcut key setting window in the pop-up preferences. How to send Mac screenshots to WeChat 1. Find launchpad on the desktop. 2. Then find WeChat. 3. Click to log in to WeChat. 4. After logging in, find the WeChat option in the upper left corner of the computer page and open it. 5. Then go to the preference settings option in the pop-up menu to enter the shortcut settings window. Finally, find the screenshot function in the shortcut key settings page and set the keys.
How to use shortcut keys to take screenshots in Win8?
Mar 28, 2024 am 08:33 AM
How to use shortcut keys to take screenshots in Win8? In our daily use of computers, we often need to take screenshots of the content on the screen. For users of Windows 8 system, taking screenshots through shortcut keys is a convenient and efficient operation method. In this article, we will introduce several commonly used shortcut keys to take screenshots in Windows 8 system to help you take screenshots more quickly. The first method is to use the "Win key + PrintScreen key" key combination to perform full
One-click screenshot tutorial: How to take screenshots of Honor Magic5Pro
Dec 28, 2023 pm 10:09 PM
Honor Magic5Pro is equipped with MagicOS7.1 operating system, which operates very smoothly. So, how to take a screenshot on Magic5Pro? This article will provide you with a detailed one-click screenshot tutorial. Honor Magic5Pro screenshot tutorial. Honor Magic5Pro supports standard screenshots, partial screenshots and long screenshots. Here's how to take a screenshot: Swipe down on the top edge of your phone's screen to open the Control Center. Find the screenshot icon in the control center and click it to quickly take a screenshot. In addition, you can also press [Volume -] and [Power button] at the same time to take a screenshot. If you need to take a partial or long screenshot, you need to click the inverted triangle in the lower right corner of the screenshot icon. Once clicked, it will display [Bureau
New posters for the three protagonists of 'Starblade' revealed, with tight-fitting gelcoats showing off the heroine's figure
Feb 09, 2024 pm 03:12 PM
Recently, the action-adventure game "Starblade" has released a new main view, with the heroines Eve, Lily and Adam appearing. The story of "Star Blade" begins with the moment when the warrior Eve arrives from an alien colony. She is ordered to come to Earth to defeat Netiba, the old enemy of mankind who suddenly appears. Netiba appears to attack humans at the behest of her superior kind, composed of Alphas and Elders. In a devastated world, the protagonist Eve meets Adam, a survivor who stayed on Earth, and Lily, a former member of the Soar Team. They fought side by side against Netiba. This game will be released on April 26 for PS5. It is expected to be released on PC at a later date.
