Question

我正在使用VLC网络插件来显示视频。它可以是本地保存的视频或通过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 doc建议的那样，我尝试使用其属性vlc.video.takeSnapshot()拍摄视频快照，但它似乎无法正常工作。所以我尝试使用canvas进行相同的

<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属性拍摄快照，如果不能使用画布使其工作？

Answer 1

根据官方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

使用Canvas拍摄嵌入视频的快照

1 个答案: