如何在没有 Object 标签的 JS 中管理 Activex 事件

Question

嗨，我正在开发用于在 IE 中管理网络摄像头的 activex 控件，一切正常，但我需要在捕获新帧时刷新图像，到目前为止，我在点击时显示图像，但我想在 JS 中收听“捕获的帧事件”以刷新我的 html 视图。

我看过很多样本，但所有这些都在 html 中使用 Object 标签

<object id="Control" classid="CLSID:id"/>
    <script for="Control" event="myEvent()">
        alert("hello");
    </script>

有没有办法使用纯 JS 来监听 activex 事件？ 使用：

Ob = new ActivexObject('PROG.ID');

Answer 1

不，它不适用于纯粹的 JavaScript 你只能使用JScript 。 JScript 仅在 Internet Explorer 中有效，并且仅在用户确认执行脚本时才有效，通常您在 an.hta超文本（标记语言）应用程序示例中使用它：

<script language="JScript">
    "use strict";
    function openFile(strFileName) {
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var f = fso.OpenTextFile(strFileName, 1);
        if (f.AtEndOfStream) {
            return;
        }
        var file = f.ReadAll();
        f.close();
        return file;
    }
    
    function writeFile(filename, content) {
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var f = fso.OpenTextFile(filename, 2, true);
        f.Write(content);
        f.Close();
    }
</script>
<script language="javascript">
    "use strict";
    var native_db;
    function init() {
        var file = openFile("./Natives.json");      
        native_db = JSON.parse(file);
        displayNamespaces();
    };
    

如果它对您有帮助的话，我还会有一个示例作为替代示例，它在现代浏览器中是如何工作的：

<video id="webcam"></video>
<input type="button" value="activate webcam" onclick="test()">
<script>
function test() {
  navigator.mediaDevices.getUserMedia({video: true, audio: true}).then((stream) => { // get access to webcam
    const videoElement = document.getElementById('webcam');
    videoElement.srcObject = stream; // set our stream, to the video element
    videoElement.play();
    // This creates a Screenshot on click, as you mentioned
    videoElement.addEventListener('click', function(event) { 
      const canvas = document.createElement('canvas');
      canvas.width = videoElement.videoWidth;
      canvas.height = videoElement.videoHeight;
      const context = canvas.getContext('2d');
      context.drawImage(videoElement, 0, 0, videoElement.videoWidth, videoElement.videoHeight);
      // you could just do this, to display the canvas:
      // document.body.appendChild(canvas);

      canvas.toBlob(function (blob) { // we automatlicly download the screenshot
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob); // creates a Datastream Handle Link in your Browser
        a.download = 'screenshot.png'; // the name we have to define here now, since it will not use the url name
        document.body.appendChild(a); // some Browsers don't like operating with Events of Objects which aren't on DOM 
        setTimeout(function() { // so we timeout a ms
          a.click(); // trigger the download
          URL.revokeObjectURL(a.href); // release the Handle
          document.body.removeChild(a); // remove the element again
        }, 1);
      });
    });
  }).catch(console.error);
}
</script>

Answer 2

我最终使用了计时器，当我单击视图中的启用按钮时，我调用了 startRecord 方法，在此方法中，我每 70 毫秒读取一次 Activex 值，我宁愿不使用计时器，但它可以工作。

private async startRecord() {
    while (this.banCapturing) {
      await new Promise(res => setTimeout(res, 70)); //14 ~ 15 fps
      this.foto = this.Ob.imageBase64; //Read Activex Value, DLL is updating imageBase64 on camera event.
    }
  }