Skip to content

Instantly share code, notes, and snippets.

@rktalusani

rktalusani/opentok-faceid

Last active December 29, 2020 21:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rktalusani/3b0bb3c61bc6d5b6020612f189e644fe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rktalusani/3b0bb3c61bc6d5b6020612f189e644fe to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rktalusani revised this gist Aug 31, 2020. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions opentok-faceid
    View file
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,10 @@
    3. we use detectFace() again with the image we want to compare with and we get identifier for the detected face (id2)
    4. we use verifyFace() method and pass id1 and id2 as the inputs. Microsoft face API compares these two faces and provides a result that includes match/mismatch as well as a score.

    Reference -
    1. getImgData() - https://tokbox.com/developer/sdks/js/reference/Subscriber.html#getImgData
    2. Microsoft Face API - https://westus.dev.cognitive.microsoft.com/docs/services/563879b61984550e40cbbe8d/operations/563879b61984550f30395236


    function sendScreenShot() {
    var imgdata = undefined;
  2. rktalusani revised this gist Aug 31, 2020. 1 changed file with 22 additions and 0 deletions.
    22 changes: 22 additions & 0 deletions opentok-faceid
    View file
    Original file line number Diff line number Diff line change
    @@ -35,6 +35,26 @@ function sendScreenShot() {
    }
    }

    function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
    var byteCharacters = atob(b64Data);
    var byteArrays = [];
    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);
    var byteNumbers = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
    byteNumbers[i] = slice.charCodeAt(i);
    }
    var byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
    }
    var blob = new Blob(byteArrays, {
    type: contentType
    });
    return blob;
    }


    $faceid_endpoint = "https://southeastasia.api.cognitive.microsoft.com";
    $faceid_key = "your-key";
    @@ -59,6 +79,8 @@ function detectFace($img){
    return $json[0];
    }



    function verifyFace($id1,$id2){
    global $faceid_endpoint, $data_dir_url,$faceid_key;
    $client = new GuzzleHttp\Client([
  3. rktalusani created this gist Aug 31, 2020.
    80 changes: 80 additions & 0 deletions opentok-faceid
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    1. sendScreenShot (front-end js) method uses subsciber.getImgData() method to capture screenshot of the subscriber (remote participant) and post it to the server.
    2. On the server we use detectFace() method to detect the facial features in this image and we get a identifier for the detected face (id1)
    3. we use detectFace() again with the image we want to compare with and we get identifier for the detected face (id2)
    4. we use verifyFace() method and pass id1 and id2 as the inputs. Microsoft face API compares these two faces and provides a result that includes match/mismatch as well as a score.


    function sendScreenShot() {
    var imgdata = undefined;
    if (subscriber) {
    imgdata = subscriber.getImgData();
    }
    if (imgdata != undefined) {
    try {
    var blob = this.b64toBlob(imgdata, "image/png");
    let formData = new FormData();
    formData.append('customer', blob);
    let res = await $HTTPDEMO.post('/faceIDDemo.php',
    formData, {
    headers: {
    'Content-Type': 'multipart/form-data'
    }

    }
    );
    console.log(res.data);
    if (res.data.status != "success") {
    alert("Error uploading the file");
    } else {

    }
    } catch (error) {
    alert("error posting screenshot");
    console.log(error);
    }
    }
    }


    $faceid_endpoint = "https://southeastasia.api.cognitive.microsoft.com";
    $faceid_key = "your-key";

    function detectFace($img){
    global $faceid_endpoint, $data_dir_url,$faceid_key;

    $client = new GuzzleHttp\Client([
    'base_uri' => $faceid_endpoint
    ]);

    $resp = $client->request('POST', 'face/v1.0/detect?recognitionModel=recognition_02&detectionModel=detection_02', [
    'headers' => [
    'Content-Type' => 'application/json',
    'Ocp-Apim-Subscription-Key' => $faceid_key
    ],
    'json' => ['url'=> $data_dir_url.$img]
    ]);

    $json = json_decode($resp->getBody(),true);
    //echo $resp->getBody();
    return $json[0];
    }

    function verifyFace($id1,$id2){
    global $faceid_endpoint, $data_dir_url,$faceid_key;
    $client = new GuzzleHttp\Client([
    'base_uri' => $faceid_endpoint
    ]);

    $resp = $client->request('POST', 'face/v1.0/verify', [
    'headers' => [
    'Content-Type' => 'application/json',
    'Ocp-Apim-Subscription-Key' => $faceid_key
    ],
    'json' => [
    'faceid1'=>$id1,
    'faceid2'=>$id2
    ]
    ]);

    return $resp->getBody();
    }