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

Question

您好，我正在开发 ActiveX 控件来管理 IE 中的网络摄像头，一切正常，但我需要在捕获新帧时刷新图像，到目前为止，我在单击时显示图像，但我想听“捕获的帧事件” " 在 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 中有效，并且仅在用户确认执行脚本时有效，通常您在 .hta 中使用它 Hyper Text (Markup Language) Application 示例：

<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.
    }
  }

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

How to manage Activex events in JS without Object tag

html

javascript

c#

webcam

activex