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

【问题标题】：How to manage Activex events in JS without Object tag如何在没有 Object 标签的情况下管理 JS 中的 Activex 事件
【发布时间】：2021-02-18 18:38:00
【问题描述】：

您好，我正在开发用于在 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');

【问题讨论】：

标签： javascript c# html activex webcam

【解决方案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>

【讨论】：

【解决方案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.
    }
  }

【讨论】：