webRTC结合canvas截图

最新推荐文章于 2025-05-15 12:31:29 发布

转载最新推荐文章于 2025-05-15 12:31:29 发布 · 584 阅读

本文介绍如何利用HTML5的Canvas元素结合video标签实现视频截图功能。通过获取用户媒体设备的视频流，并将其显示在video元素中，然后使用Canvas的drawImage方法实时截取视频画面并绘制到Canvas上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接看代码。css基础弱鸡，将就看吧。慢慢学习

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style type="text/css">
        body{
            display: block;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }
        a{
            color: black;
        }
        canvas{
            background: gray;
        }
        button{
            background: red;
        }
    </style>
</head>
<body>
    <div id='container'>
        <h1><a href="39.106.209.45/VideoTalk/webRTCCavans">getUserMedia with Canvas</a></h1>
        <video autoplay="true"></video>
        <button>Take snapshot</button>
        <canvas></canvas>
        <p>Draw a frame from the video onto the canvas element using the <code>drawImage()</code></p>
    </div>
    <script type="text/javascript" src=".//js//main.js"></script>
</body>
</html>

index.html

var video=document.querySelector('video');
var canvas=window.canvas=document.querySelector('canvas');
canvas.width=480;
canvas.height=360;
var button =document.querySelector('button');
button.onclick=function(){
    canvas.width=video.videoWidth;
    canvas.height=video.videoHeight;
    canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height);
};

var constraints={
    audio:false,
    video:true
};

function handleSuccess(stream){
    window.stream=stream;
    video.srcObject=stream;
}

function handleError(error){
    console.log('navigator.getUserMedia error: ',error);
}

navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);

main.js

通过canvas的darwImage方法，把video正在播放的视频进行截图。