HTML5捕獲暫停視頻流的圖像並保存它

我有一個html5網頁，並在那裏我想提供一個流。到目前爲止是這種情況與下面的HTML代碼：HTML5捕獲暫停視頻流的圖像並保存它

<video id="v" autoplay="autoplay"> 
    <source src="http://localhost:8080/stream.ogg" type="video/ogg"> 
</video>

但現在我想提供，用戶可以暫停視頻並保存當前看到的圖片作爲服務器上的JPEG文件的選項。

但現在我不知道如何獲取圖像並將其保存在服務器上的首選位置。如何將當前顯示的圖像保存爲jpeg？

來源

2014-09-22 Irgendw Pointer

類似[問題]（http://stackoverflow.com/a/5373155/3008050） – karan3112 2014-09-22 09:24:41

@ karan3112我已經試過這個，但它不工作。 – 2014-09-22 09:28:52

function capture() { 
 
    var canvas = document.getElementById("c"); 
 
    var video = document.getElementById("v"); 
 
    
 
    if (video.paused) { 
 
     canvas.getContext('2d').drawImage(video, 0, 0); 
 
    } 
 
}

<video id="v" autoplay="autoplay" > 
 
    <source src="http://html5doctor.com/demos/video-canvas-magic/video.webm" type="video/ogg"> 
 
</video> 
 
<input type="button" value="Capture" onclick="capture()"/> 
 
<canvas id="c" width="500" height="500"></canvas>

與幫助：http://html5doctor.com/video-canvas-magic/

爲了讓畫布圖像文件的圖像，你可以使用canvas.toDataUrl或canvas.toDataUrlHD（實驗）。看到API在這裏：https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement

來源

2014-09-22 09:39:25 Krumia

canvas.drawImage導致以下錯誤：Uncaught TypeError：undefined不是函數。 – 2014-09-22 09:50:00

@IndndwPointer：對不起，我的代碼有一些錯誤。我編輯了它，現在您可以將視頻圖像傳送到畫布。從他們的保存到文件很容易。 – Krumia 2014-09-22 09:53:46

是的，現在它可以工作。希望我能夠自動存儲圖像。 – 2014-09-22 10:01:48

HTML5捕獲暫停視頻流的圖像並保存它

回答

相關問題