webRTC视频快照base64空透明

Question

我试图捕捉html5画布视频图像base64。但它捕获图像base64是空的透明的。 需要解决方案

<script>

     var video = document.querySelector("#video");
     if (navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
              video.srcObject = stream;
            })
            .catch(function (err0r) {
              console.log("Something went wrong!");
            });
     }
     var resultb64="";
     function capture() {        
        var canvas = document.getElementById('canvas');     
        var video = document.getElementById('video');
        canvas.width = 450;
        canvas.height = 850;
        canvas.getContext('2d').drawImage(video, 0, 0, 450,850);  

        resultb64 = canvas.toDataURL();
        var imageData = canvas.toDataURL('image/png');
        document.getElementById('my_hidden').value = canvas.toDataURL('image/png');

"数据。 imagepng; base64。 iVBORw0KGgoAAAANSUhEUgAAAcIAAANSCAYAAAD24c4vAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAABwqADAAQAAAABAAADUgAAAABbBxkyAABAAElEQVR4AXS92ZIkSZYl5xHhEblUVzX1MgN8FwiE"

Answer 1

它的工作，下面的代码，我测试...

        canvas.width = 450;
        canvas.height = 850;
        canvas.getContext('2d').drawImage(video, 0, 0, 450,850);  
        var data = canvas.toDataURL('image/png');
        //base64image.setAttribute('src', data);
        base64image = document.querySelector('#base64image').value = canvas.toDataURL('image/png');