javascript - Pepper:来自相机的奇怪图像

Question

我想在 Pepper 的平板电脑中显示他的相机拍摄的图像。我已经完成了 Javascript 代码以在 WebView 中处理和显示图像。问题是显示的图像很奇怪:

我已经根据这个 example 编写了这段代码:

var CAMERA_ID = 'fger';

QiSession(function (session) {

session.service('ALMemory').then(function (ALMemory) {
  // Listener to Choregraphe APP
  ALMemory.subscriber('PepperQiMessaging/totablet').then(function(subscriber) {
    subscriber.signal.connect(toTabletHandler);
  });
  // Says to Choregraphe that I'm listening with the id QR
  ALMemory.raiseEvent('PepperQiMessaging/fromTabletResponse', 'QR');
  // Video receiver function
  session.service('ALVideoDevice').then(playVideo);

  });
});

 // This is the important part
 function playVideo(video) {
    video.subscribeCamera(
      CAMERA_ID,
      0, // cameraId kTop kBottom kInfred(color:17)
      1, // Image of 640*480px
      11, //RGB
      10 // framerate 1~30
    ).then(function(result){
      video.getImageRemote(result).then(function(image) {

        if (image) {
          var canvas = $('canvas')[0].getContext('2d');

          var width = image[0];
          var height = image[1];
          var nb = image[2];
          var imageData = image[6];
          var read = 0;

          var img = canvas.createImageData(width, height);
          var pixs = img.data;
          var binary = window.btoa(imageData);

          var len = imageData.length;
          var m = len/nb;

          // Transformations to get the image in RGB
          for (var i = 0; i < m; i++) {
            pixs[i*4] = binary.charCodeAt(i*nb);
            pixs[i*4+1] = binary.charCodeAt(i*nb+1);
            pixs[i*4+2] = binary.charCodeAt(i*nb+2);
            pixs[i*4+3] = 255;
          }

          canvas.putImageData(img, 0, 0);
        }

        video.unsubscribe(CAMERA_ID);

      });
    });
  }

我需要做什么来解决这个问题？

Answer 1

最后我找到了解决方案。我找到了另一个对我有用的例子(图像是灰度的)。

这是将从相机接收到的字节转换为图像的算法:

function getImage(ALVideoDevice, subscriberId) {
  ALVideoDevice.getImageRemote(subscriberId).then(function (image) {
    if(image) {
      var imageWidth = image[0];
      var imageHeight = image[1];
      var imageBuf = image[6];

      if (!context) {
        context = document.getElementById('canvas').getContext('2d');
      }
      if (!imgData || imageWidth != imgData.width || imageHeight != imgData.height) {
        imgData = context.createImageData(imageWidth, imageHeight);
      }
      var data = imgData.data;

      for (var i = 0, len = imageHeight * imageWidth; i < len; i++) {
        var v = imageBuf[i];
        data[i * 4 + 0] = v;
        data[i * 4 + 1] = v;
        data[i * 4 + 2] = v;
        data[i * 4 + 3] = 255;
      }

      context.putImageData(imgData, 0, 0);
    }

    if(previewRunning) {
      setTimeout(function() { getImage(ALVideoDevice, subscriberId) }, 100);
    }
  });
}

Here是完整的Choregraphe项目和完整的代码。