18 lines
1.9 KiB
JavaScript
18 lines
1.9 KiB
JavaScript
|
'use strict';
|
|||
|
|
let snapshotUrl='',snapshotGeneration=0;
|
|||
|
|
function clearSnapshot(){snapshotGeneration++;if(snapshotUrl)URL.revokeObjectURL(snapshotUrl);snapshotUrl='';$('#snapshot-image').removeAttribute('src');$('#snapshot-save').removeAttribute('href');$('#snapshot-info').textContent='';}
|
|||
|
|
async function captureFrame(video,cameraId,label){
|
|||
|
|
if(!loggedIn||!video||video.readyState<2||!video.videoWidth||video.error){toast('画面尚未就绪，请播放后再截图');return;}
|
|||
|
|
clearSnapshot();const generation=snapshotGeneration,session=sessionGeneration,canvas=document.createElement('canvas');
|
|||
|
|
canvas.width=video.videoWidth;canvas.height=video.videoHeight;const captured=new Date();
|
|||
|
|
try{canvas.getContext('2d').drawImage(video,0,0);const blob=await new Promise(resolve=>canvas.toBlob(resolve,'image/png'));
|
|||
|
|
if(!loggedIn||session!==sessionGeneration||generation!==snapshotGeneration)return;
|
|||
|
|
if(!blob)throw Error('图片生成失败');snapshotUrl=URL.createObjectURL(blob);$('#snapshot-image').src=snapshotUrl;
|
|||
|
|
$('#snapshot-title').textContent=label+' · 画面截图';$('#snapshot-info').textContent=`${canvas.width} × ${canvas.height} · 本次截取时间 ${captured.toLocaleString()}。图片取自当前播放器画面，包含播放缓冲延迟；不上传到服务器。`;
|
|||
|
|
$('#snapshot-save').href=snapshotUrl;$('#snapshot-save').download='snapshot-'+cameraId+'-'+captured.toISOString().replace(/[:.]/g,'-')+'.png';$('#snapshot-dialog').showModal();
|
|||
|
|
}catch(e){if(generation===snapshotGeneration)toast('截图失败，请重新播放后再试');}
|
|||
|
|
}
|
|||
|
|
document.addEventListener('click',e=>{const b=e.target.closest('[data-snapshot-camera]');if(b){const id=b.dataset.snapshotCamera;captureFrame(b.closest('.camera-card').querySelector('video'),id,state.cameras.find(c=>c.id===id)?.name||'摄像头');}});
|
|||
|
|
$('#play-snapshot').onclick=()=>captureFrame($('#play-video'),queryCamera,'录像回放');
|
|||
|
|
$('#snapshot-dialog').addEventListener('close',clearSnapshot);
|