Pepper：カメラからの変わったイメージ

Question

彼のカメラからペッパーのタブレットにイメージを表示したい。 Webビューで画像を処理して表示するためにJavaScriptコードを実行しました。問題は、画像が示したことはある奇妙です：

私はこの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プロジェクトと完全なコードである：

これは、バイトを変換するためのアルゴリズムは画像にカメラ形式受信されます。