如何调用放置在 Dart 聚合物元素内的嵌入式 Flash 对象的方法

Question

我正在实现一个能够使用网络摄像头拍照的应用程序。作为 IE 的后备方案，我使用处理网络摄像头交互的 flash 对象。一切工作正常，直到我在 Dart 聚合物元素中使用这个 flash 对象。代码从 Dart 转换为 Javascript 后似乎出现了问题。

这是使用纯 html 和 js 的工作示例 http://flash-camera-test.herokuapp.com/
如您所见，您可以捕获网络摄像头流并拍照。

这里不是使用相同代码处理网络摄像头的 dart 应用程序的工作示例 http://flash-invoke-test.herokuapp.com/
它允许您动态插入带有 Flash 对象的聚合物元素。但是当您单击“捕获”时，它会抛出

Object doesn't support this property or method 'CallFunction'

function __flash__addCallback(instance, name) {
  instance[name] = function () { 
    return eval(instance.CallFunction("<invoke name=\""+name+"\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments,0) + "</invoke>"));
  }
}

哪里的 instance 参数是我的 <object> 内置Flash，并且 name 参数等于 "capture"

Flash对象源代码 https://github.com/addyosmani/getUserMedia.js/blob/master/dist/fallback/src/jscam.as

网页

<object id="XwebcamXobjectX" name="XwebcamXobjectX" type="application/x-shockwave-flash" data="assets/fallback/jscam_canvas_only.swf" width="352px" height="264px">
  <param name="movie" value="assets/fallback/jscam_canvas_only.swf" />
  <param name="FlashVars" value="mode=callback&amp;quality=100" />
  <param name="allowScriptAccess" value="always" />
</object>

<canvas id="canvas" width="320" height="240"></canvas>
<a onclick="window.webcam.capture()">Capture</a>

JavaScript

<script>
  window.webcam = {
    width: 320, 
    height: 240, 
    mode: "callback",
    capture: function (x) {
      var cam = document.getElementById('XwebcamXobjectX');
      cam.capture(x);
    },
    save: function (x) {
      var cam = document.getElementById('XwebcamXobjectX');
      cam.save(x);
    },
    onImageSaved: function (img) {},
    debug: function () {},
    onCapture: function () {
      var canvas = document.getElementById('canvas');
      this.image = canvas.getContext("2d").getImageData(0, 0, this.width, this.height);
      this.pos = 0;
      this.save();
    },
    onTick: function () {},
    onSave: function (data) {
      var col = data.split(";"),
      img = this.image,
      tmp = null,
      w = this.width,
      h = this.height;

      for (var i = 0; i < w; i++) { 
        tmp = parseInt(col[i], 10);
        img.data[this.pos + 0] = (tmp >> 16) & 0xff;
        img.data[this.pos + 1] = (tmp >> 8) & 0xff;
        img.data[this.pos + 2] = tmp & 0xff;
        img.data[this.pos + 3] = 0xff;
        this.pos += 4;
      }

      if (this.pos >= 4 * w * h) { 
        this.onImageSaved(img);
      }

    },
    onLoad: function () {}
  };

  window.webcam.onImageSaved = function (img) {
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.putImageData(img, 0, 0);
  };
</script>

Dart应用代码在这里 https://github.com/petalvlad/dart-flash-invoke-test

Answer 1

我已经使用解决了我的问题 SWF对象 图书馆。它还需要调用所需的方法 impl 财产：

var cam = document.getElementById('XwebcamXobjectX');
cam.impl.capture();

Answer 2

这条行不起作用

var cam = document.getElementById('XwebcamXobjectX');

.

这在阴影下没有找到一个元素（在聚合物元素内）。

我不是JS开发人员，但这样的东西可能会工作

var cam = document.querySelector('container-polymer').shadowRoot.querySelector('#canvas');
var cam = document.querySelector('container-polymer').webkitShadowRoot.querySelector('#canvas');

.