admin管理员组文章数量:1389768
I am trying to get video frame as an image from a video .mp4 and my application is running on localhost:3000. Below is my code to get an image from video
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src=".mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<p>These are the frames' images generated by getVideoImage():</p>
<ol id="olFrames"></ol>
<script type="text/JavaScript">
function getVideoImage(path, secs, callback) {
var me = this, video = document.createElement('video');
video.onloadedmetadata = function() {
if ('function' === typeof secs) {
secs = secs(this.duration);
}
this.currentTime = Math.min(Math.max(0, (secs < 0 ? this.duration : 0) + secs), this.duration);
};
video.onseeked = function(e) {
var canvas = document.createElement('canvas');
canvas.height = video.videoHeight;
canvas.width = video.videoWidth;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
var img = new Image();
img.src = canvas.toDataURL();
callback.call(me, img, this.currentTime, e);
};
video.onerror = function(e) {
callback.call(me, undefined, undefined, e);
};
video.src = path;
}
function showImageAt(secs) {
var duration;
getVideoImage(
".mp4",
function(totalTime) {
duration = totalTime;
return secs;
},
function(img, secs, event) {
if (event.type == 'seeked') {
var li = document.createElement('li');
li.innerHTML += '<b>Frame at second ' + secs + ':</b><br />';
li.appendChild(img);
document.getElementById('olFrames').appendChild(li);
if (duration >= ++secs) {
showImageAt(secs);
};
}
}
);
}
showImageAt(0);
</script>
</body>
</html>
view raw
I am getting an error saying
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
This means that my video source and webpage are not on the same domain. How can I make it work?
P.S. you can try out my code by pasting it in .asp?filename=tryhtml5_video
I am trying to get video frame as an image from a video http://techslides./demos/sample-videos/small.mp4 and my application is running on localhost:3000. Below is my code to get an image from video
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="http://techslides./demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<p>These are the frames' images generated by getVideoImage():</p>
<ol id="olFrames"></ol>
<script type="text/JavaScript">
function getVideoImage(path, secs, callback) {
var me = this, video = document.createElement('video');
video.onloadedmetadata = function() {
if ('function' === typeof secs) {
secs = secs(this.duration);
}
this.currentTime = Math.min(Math.max(0, (secs < 0 ? this.duration : 0) + secs), this.duration);
};
video.onseeked = function(e) {
var canvas = document.createElement('canvas');
canvas.height = video.videoHeight;
canvas.width = video.videoWidth;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
var img = new Image();
img.src = canvas.toDataURL();
callback.call(me, img, this.currentTime, e);
};
video.onerror = function(e) {
callback.call(me, undefined, undefined, e);
};
video.src = path;
}
function showImageAt(secs) {
var duration;
getVideoImage(
"http://techslides./demos/sample-videos/small.mp4",
function(totalTime) {
duration = totalTime;
return secs;
},
function(img, secs, event) {
if (event.type == 'seeked') {
var li = document.createElement('li');
li.innerHTML += '<b>Frame at second ' + secs + ':</b><br />';
li.appendChild(img);
document.getElementById('olFrames').appendChild(li);
if (duration >= ++secs) {
showImageAt(secs);
};
}
}
);
}
showImageAt(0);
</script>
</body>
</html>
view raw
I am getting an error saying
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
This means that my video source and webpage are not on the same domain. How can I make it work?
P.S. you can try out my code by pasting it in https://www.w3schools./html/tryit.asp?filename=tryhtml5_video
Share Improve this question edited Nov 25, 2023 at 1:07 Benjamin Loison 5,6524 gold badges19 silver badges37 bronze badges asked Nov 3, 2018 at 7:50 EdGEdG 2,3519 gold badges52 silver badges110 bronze badges 5- Usually I use Apache as proxy to solve all CORS issues. – DanieleAlessandra Commented Nov 3, 2018 at 7:57
- How to do that? – EdG Commented Nov 3, 2018 at 8:03
- Take a look at this -> mod_proxy – DanieleAlessandra Commented Nov 3, 2018 at 10:15
- Please go through the accepted answer, its a simpler way to extract image from a video stackoverflow./questions/32262562/… – chintuyadavsara Commented Nov 3, 2018 at 13:12
- popcorn.js also uses canvas.toDataUrl in it's code. It will give the same issue. Have a look at their git code – EdG Commented Nov 3, 2018 at 16:42
1 Answer
Reset to default 3The video is the issue.
Paste this on the page you asked (https://www.w3schools./html/tryit.asp?filename=tryhtml5_video) and it will work
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<p>These are the frames' images generated by getVideoImage():</p>
<ol id="olFrames"></ol>
<script type="text/JavaScript">
function getVideoImage(path, secs, callback) {
var me = this, video = document.createElement('video');
video.onloadedmetadata = function() {
if ('function' === typeof secs) {
secs = secs(this.duration);
}
this.currentTime = Math.min(Math.max(0, (secs < 0 ? this.duration : 0) + secs), this.duration);
};
video.onseeked = function(e) {
var canvas = document.createElement('canvas');
canvas.height = video.videoHeight;
canvas.width = video.videoWidth;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
var img = new Image();
img.src = canvas.toDataURL();
callback.call(me, img, this.currentTime, e);
};
video.onerror = function(e) {
callback.call(me, undefined, undefined, e);
};
video.src = path;
}
function showImageAt(secs) {
var duration;
getVideoImage(
"mov_bbb.mp4",
function(totalTime) {
duration = totalTime;
return secs;
},
function(img, secs, event) {
if (event.type == 'seeked') {
var li = document.createElement('li');
li.innerHTML += '<b>Frame at second ' + secs + ':</b><br />';
li.appendChild(img);
document.getElementById('olFrames').appendChild(li);
if (duration >= ++secs) {
showImageAt(secs);
};
}
}
);
}
showImageAt(0);
</script>
</body>
</html>
view raw
本文标签： javascriptGet Video Frame As An ImageStack Overflow
版权声明：本文标题：javascript - Get Video Frame As An Image - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744655976a2617967.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论