先從視訊流中擷取圖片，轉成base64碼；

function CatchCode() {  

}

然後，從儲存的base64碼，轉化成圖片

function catc(){

var oCanvas = document.getElementById("canvas"); 
if (oCanvas.getContext) {
        var C = oCanvas.getContext('2d');
} 
var imgdata = oCanvas.toDataURL('image/png');
var newdata = imgdata.replace(/^data:image\/png/, 'data:application/octet-stream');
$('#downloader').attr('download',times+'.png' ).attr('href', newdata);
}

下面貼上我寫的程式碼

html程式碼

<div id="wrap">
<div class="left f-l">
<video id="video" width="320" height="320" autoplay>
</video>
<div class="c-l"></div>
<button id="capbtn">拍照</button>
</div>

<div class="right f-r">
<canvas id="canvas"></canvas>
<a href="#" id="downloader" onclick="catc()" download="">Download!</a>

<img id="newimg" src="" width="320" height="320" />
</div>

<input id="file" type="file" value="上傳圖片" />
<input type="button" name="" id="bu" value="dianj" />
</div>

js程式碼

// 獲取攝像頭的視訊流在video標籤中顯示          
window.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = {
"video": true
},
errBack = function(error) {
console.log("Video capture error: ", error.code);
};     
if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}else if (navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
//拍照，          
$("#capbtn").click(function() {
context.drawImage(video, 0, 0, 320, 320);
CatchCode();           
});
}, false);
   
var interval = setInterval(CatchCode,"300");
// 重新整理上傳影象       
function CatchCode() {
//$("#snap").click();   
var canvans = document.getElementById("canvas");  
var imgData = canvans.toDataURL();
var base64Data = imgData.substr(22);
$("#newimg").attr("src",imgData);
}


var times = Date.parse(new Date());


function catc(){

var oCanvas = document.getElementById("canvas"); 
if (oCanvas.getContext) {
        var C = oCanvas.getContext('2d');
} 
var imgdata = oCanvas.toDataURL('image/png');
var newdata = imgdata.replace(/^data:image\/png/, 'data:application/octet-stream');
$('#downloader').attr('download',times+'.png' ).attr('href', newdata);
}