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

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文档建议，我尝试使用其属性 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 属性拍摄快照，如果不是，如何使用 Canvas 使其工作？

Answer 1

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

vlc.video.takeSnapshot() 

仅在 ActiveX 中可用，因此仅在 Internet Explorer/Edge 中可用(我测试了它并且它有效......但无论如何它都会将快照图像文件保存到用户的桌面)。

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

您尝试作为参数传递给

的 DOM 元素

canvas.drawImage()

必须源自以下之一:

HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap

不是来自

object, embed