Datamosh Video Creator
About this app
Create stunning datamosh-style videos with this interactive web app. Upload your videos, apply effects and share your creations with ease!
Datamosh Video Creator Datamosh Video Creator Upload your video to create unique datamosh effects! Add Datamosh Effect
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Datamosh Video Creator</title>
<meta name="description" content="Create stunning datamosh-style videos with this interactive web app. Upload your videos, apply effects and share your creations with ease!">
<meta name="keywords" content="datamosh, video creator, video effects, mashup, shareable videos, fun videos">
<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
document.addEventListener("DOMContentLoaded", function() {
const fileInput = document.getElementById('videoUpload');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const submitBtn = document.getElementById('submitBtn');
const video = document.createElement('video');
const videoURL = URL.createObjectURL(fileInput.files[0]);
fileInput.addEventListener('change', function() {
video.src = videoURL;
video.load();
video.play();
});
submitBtn.addEventListener('click', function() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
addDatamoshEffect();
});
function addDatamoshEffect() {
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 10000; i++) {
imgData.data[i * 4] += Math.random() * 50; // R
imgData.data[i * 4 + 1] += Math.random() * 50; // G
imgData.data[i * 4 + 2] += Math.random() * 50; // B
}
ctx.putImageData(imgData, 0, 0);
}
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
body {
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: #fff;
}
#main-container {
margin-top: 50px;
text-align: center;
}
#canvas {
border: 2px solid #fff;
margin-bottom: 20px;
width: 100%;
max-width: 600px;
}
input[type="file"] {
margin: 20px 0;
}
button {
background-color: #28a745;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition: background-color 0.3s;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Datamosh Video Creator</h1>
<p>Upload your video to create unique datamosh effects!</p>
<input type="file" id="videoUpload" accept="video/*">
<canvas id="canvas" width="600" height="400"></canvas>
<br>
<button id="submitBtn">Add Datamosh Effect</button>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!