كيفية الحصول على طرق استدعاء العمل لكائن Flash المضمن الموجود داخل عنصر بوليمر Dart

Question

أقوم بتنفيذ تطبيق يمكنه التقاط صورة باستخدام كاميرا الويب.كبديل لـ IE أستخدم كائن الفلاش الذي يتعامل مع تفاعل كاميرا الويب.كل شيء يعمل بشكل جيد حتى أستخدم كائن الفلاش هذا داخل عنصر البوليمر Dart.يبدو أن هناك خطأ ما بعد ترجمة التعليمات البرمجية من Dart إلى Javascript.

إليك مثال العمل باستخدام html & js العادي http://flash-camera-test.herokuapp.com/
كما ترى، يمكنك التقاط بث كاميرا الويب والتقاط صورة.

فيما يلي مثال غير عملي لتطبيق رمي السهام الذي يستخدم نفس الكود للتعامل مع كاميرا الويب http://flash-invoc-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> مع فلاش في الداخل، و name المعلمة تساوي "capture"

رمز مصدر كائن فلاش 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>

جافا سكريبت

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

كود تطبيق دارت هنا https://github.com/petalvlad/dart-flash-invoc-test

Answer 1

لقد قمت بحل مشكلتي باستخدام SWFObject مكتبة.كما يتطلب الأمر استدعاء الطريقة المطلوبة impl ملكية:

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

Answer 2

هذا الخط لا يعمل

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

لا يعثر هذا على عنصر داخل ShadowDOM (داخل عنصر بوليمر).

أنا لست مطور JS ولكن قد ينجح شيء مثل هذا

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