Pepper: seltsames Bild von der Kamera

Question

Ich möchte ein Bild in der Tablette von Pepper von seiner Kamera zeigen. Ich habe den Javascript-Code gemacht, um das Bild in einer Netzansicht zu verarbeiten und zu zeigen. Das Problem ist, dass das Bild zeigte ist seltsam:

ich diesen Code auf dieser Basis geschrieben haben 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); 

     }); 
    }); 
    } 

Was muss ich tun, um dieses Problem zu lösen?

Answer 1

Am Ende fand ich die Lösung. Ich habe ein anderes Beispiel gefunden, dass es für mich funktioniert hat (das Bild ist Graustufen).

Dies ist der Algorithmus, um die empfangenen Bytes Form um die Kamera zu einem Bild zu transformieren:

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 ist das komplette chorégraphe Projekt und der vollständige Code.