javascript - 使用 Canvas 为嵌入视频拍摄快照

我正在使用VLC Web插件显示视频。它可以是本地保存的视频，也可以是通过RTSP来的。下面是代码

<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" width="640" height="480" id="vlc" events="True">
<param name="MRL" value="someRTSP" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="False" />
<param name="Volume" value="50" />
<param name="toolbar" value="true" />
<param name="StartTime" value="0" />
<EMBED pluginspage="http://www.videolan.org"
       type="application/x-vlc-plugin"
       version="VideoLAN.VLCPlugin.2"
       width="640"
       height="480"
       toolbar="true"
       loop="true"
       text="Waiting for video"
       target="someRTSP"
       name="vlc">
</EMBED>
</object>

正如this博士建议的那样，我尝试使用其属性vlc.video.takeSnapshot()拍摄视频快照，但似乎不起作用。所以我尝试使用画布

<canvas id="canvas" width="640" height="480"></canvas>
<button id="snap" onclick="snap()">Snap Photo</button>

 <script>
function getVLC(name)
{
    if (window.document[name])
    {
        return window.document[name];
    }
    if (navigator.appName.indexOf("Microsoft Internet")==-1)
    {
        if (document.embeds && document.embeds[name])
            return document.embeds[name];
    }
    else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
    {
        return document.getElementById(name);
    }
}
     var vlc = getVLC("vlc");
     var canvas=document.querySelector('canvas');
     var context=canvas.getContext('2d');

     var w,h,ratio;
        //add loadedmetadata which will helps to identify video attributes
          video.addEventListener('loadedmetadata',function()
          {
          ratio=video.videoWidth/video.videoHeight;
          w=video.videoWidth-100;
          h=parseInt(w/ratio,10);
          canvas.width=w;
          canvas.height=h;
          },false);

         function snap()
        {
              context.fillRect(0,0,w,h);
          context.drawImage(video,0,0,w,h);
          }
    </script>

如何使用VLC属性拍摄快照，如果没有，如何使用画布使快照正常工作？

最佳答案

根据官方VLC文档（https://wiki.videolan.org/Documentation%3aWebPlugin）

vlc.video.takeSnapshot()

仅在ActiveX中可用，因此仅在Internet Explorer / Edge中可用（我对其进行了测试，并且可以正常工作……但是无论如何，它会将快照图像文件保存到用户的桌面）。

尝试捕获视频-画布方式-我失败了。
视频元素必须由浏览器以html5模式呈现，而不是由第三方浏览器插件（如VLC插件）呈现。

您尝试将DOM元素作为参数传递给

canvas.drawImage()

必须从以下之一衍生：

HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap

不是来自

object, embed

关于javascript - 使用 Canvas 为嵌入视频拍摄快照，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39229030/