首页 > Web开发 > 详细

webRTC结合canvas截图

时间:2018-01-23 22:40:26      阅读:379      评论:0      收藏:0      [点我收藏+]

直接看代码。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正在播放的视频进行截图。

webRTC结合canvas截图

原文:https://www.cnblogs.com/superxuezhazha/p/8338075.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!