用WebRTC打造一個Animoji + Facetime 的視頻聊天應用

1, Animoji

Animoji是在iPhone X上的動畫表情。是iPhone在十週年特別版iPhone X發佈的新功能。其使用面部識別傳感器來檢測用戶面部表情變化, 並最終生成可愛的3D動畫表情符號, 目前只能在iMessage中使用. 但有人破解了Animoji, 並提取相應的頭文件供你們在產品中使用.

2, Factime

FaceTime 是蘋果公司iOS和Mac OS X內置的一款視頻通話軟件，經過Wi-Fi或者蜂窩數據接入互聯網，在兩個裝有FaceTime 的設備之間實現視頻通話. 用通俗的話講就是視頻電話.

以前在試用Animoji的時候以爲很神奇, 在想若是和實時的視頻聊天配合起來應該頗有意思, 大概花了半天的時間, 寫出了這個小玩具.

首先Animoji:

在網上找到有人封裝好的Animoji 頭文件 github.com/efremidze/A…, 研究了以後發現並無能夠得到Animoji 一幀的接口, 我繼續把這個庫完善了一下, 暴漏出了能夠得到每一幀數據的接口. 我fork 了一份代碼在這裏 github.com/notedit/Ani…, 修改以後的代碼也已經PR到原來的項目中. 

幀數據處理:

後面在作視頻傳輸的時候須要CVPixelBuffer, 而咱們這裏從Animoji裏只能得到CIImage, 另外咱們須要對取得的數據作一次縮放處理, 避免圖片過大. 這裏主要使用了CoreImage 和 CVPixelBuffer的一些處理, 直接上代碼:

-(CVPixelBufferRef)processCIImage:(CIImage*)image {    

        @autoreleasepool  {        
            [filter setValue:image forKey:kCIInputImageKey];        
             CIImage *outimage = [filter outputImage];
             NSLog(@"outimage widthxheight %dx%d", (int)outimage.extent.size.width,(int)outimage.extent.size.height);        
             CVPixelBufferRef outPixelBuffer = NULL;        
              CVReturn status = CVPixelBufferCreate(kCFAllocatorDefault,
                                              (int)outimage.extent.size.width,
                                              (int)outimage.extent.size.height,
                                              kCVPixelFormatType_420YpCbCr8BiPlanarFullRange ,
                                              (__bridge CFDictionaryRef) @{(__bridge NSString *) kCVPixelBufferIOSurfacePropertiesKey: @{}},
                                              &outPixelBuffer);
        if (status != 0) {            
             NSLog(@"CVPixelBufferCreate error %d", (int)status);            
             CFRelease(outPixelBuffer);            
             return nil;        
        }        

        [ciContext render:outimage toCVPixelBuffer:outPixelBuffer bounds:outimage.extent colorSpace:nil];        
        return outPixelBuffer;    
       }
}


複製代碼

到這裏你已經能夠很happy的拿到Animoji的幀數據了.

視頻通話:

爲了快速完成這一部分我直接使用了咱們的音視頻通話SDK — dotEngine , 支持自定義的YUV 數據輸入, 而後咱們就能夠很愉快的把上一步拿到的數據餵給這個SDK.

大概的流程以下 

dotEngine = DotEngine.sharedInstance(with:self)
localStream = DotStream(audio: true, video: true, videoProfile: DotEngineVideoProfile.DotEngine_VideoProfile_360P, delegate: self)videoCapturer = DotVideoCapturer()localStream.videoCaptuer = videoCapturer// some other code

let image = self.animoji.snapshot(with:self.animoji.frame.size)

let ciimage = CIImage(image: image!)

let pixelBuffer = self.convert.processCIImage(ciimage)
if pixelBuffer != nil {     
      self.videoCapturer?.send(pixelBuffer!.takeUnretainedValue(), rotation: VideoRotation.roation_0)      
       pixelBuffer?.release()
}複製代碼

運行效果以下圖:

完整的代碼在 github.com/dotEngine/a…

咱們的音視頻通信SDK dotEngine github.com/dotEngine