[iOS]關(guān)于視頻方向的若干問題

2019-11-14 18:46:03

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

版本：

OS X 10.10.5

Xcode 6.4(6E35b)

iOS >= 7

一、MOV/MP4視頻文件中的Rotation元數(shù)據(jù)

iOS上內(nèi)置相機(jī)應(yīng)用錄制的mov/mp4視頻可能產(chǎn)生一個(gè)Rotation元數(shù)據(jù)，表示錄制視頻時(shí)攝像頭旋轉(zhuǎn)到了多少角度。其值一般為這四個(gè)：0、90、180或270。類似于圖片文件的Exif信息中的Orientation元數(shù)據(jù)。

Rotation元數(shù)據(jù)用于播放器確定渲染視頻的方向，但有的播放器會(huì)對(duì)其視而不見。稍后會(huì)測(cè)試幾種常見的播放器/播放控件對(duì)Rotation元數(shù)據(jù)的支持。

注：
實(shí)際上視頻文件的Rotation元數(shù)據(jù)并不是保存的角度值，不過(guò)如果只關(guān)心角度問題而不是圖像拉伸之類的，可以這樣簡(jiǎn)單理解。關(guān)于如何獲取Rotation元數(shù)據(jù)角度值，有興趣的可以參看vlc的源碼。

下面用MediaInfo看看用iphone相機(jī)應(yīng)用使用后置攝像頭錄制的兩個(gè)視頻，觀察其Rotation元數(shù)據(jù)。請(qǐng)留意文件名分別為IMG_1427.MOV和IMG_1428.MOV，后文也會(huì)用這兩個(gè)文件做對(duì)比。

1、使用后置攝像頭在Portrait(豎屏，Home鍵在下邊）模式時(shí)錄制的視頻，其Rotation值為90。

（圖一：Rotation值為90）

2、使用后置攝像頭在LandscapeRigth(橫屏，Home鍵在右邊）模式時(shí)錄制的視頻，則無(wú)Rotation元數(shù)據(jù)，或者說(shuō)Rotation值為0。

（圖二：無(wú)Rotation值或者說(shuō)Rotation值為0）

關(guān)于Rotation的0、90、180和270這四個(gè)角度值可以這樣理解：LandscapeRigth為0度；以Home鍵或攝像頭為圓心，順時(shí)針旋轉(zhuǎn)到Portrait為90度；旋轉(zhuǎn)到LandscapeLeft為180度；旋轉(zhuǎn)到PortraitUpsideDown為270度。

這里先在OS X 10.10.4和Windows 8上看看這兩個(gè)視頻文件的屬性：

1、將手機(jī)里的視頻文件導(dǎo)出到OS X，并在Finder中看預(yù)覽，兩個(gè)文件的顯示方向都是正確的。再查看Rotation值為90的IMG_1427.MOV視頻文件的屬性。顯示其尺寸為1080*1920，而不是1920*1080。但不要被這個(gè)假象欺騙了，視頻的實(shí)際尺寸還是1920*1080。最后看沒有Rotation值或者說(shuō)Rotation值為0的IMG_1428.MOV視頻文件，顯示其尺寸為1920*1080，一切正常。使用QuickTime播放，能正確識(shí)別出兩個(gè)視頻的方向。

（圖三）

2、在Windows資源管理器中看預(yù)覽，IMG_1427.MOV和IMG_1428.MOV的顯示方向都是正確的；再查看兩個(gè)文件的屬性，尺寸都顯示為1920*1080；使用Windows Media Player播放，能正確識(shí)別出兩個(gè)視頻的方向。

二、常見視頻播放器對(duì)方向的識(shí)別

iOS相冊(cè)調(diào)出的播放器和Win8上的Windows Media Player能夠正確識(shí)別出MOV/MP4的方向，即實(shí)際尺寸為1920*1080的、Rotation值為90的IMG_1427.MOV視頻能夠按1080*1920的尺寸并調(diào)整方向進(jìn)行渲染；沒有Rotation值或者說(shuō)Rotation值為0的IMG_1428.MOV視頻按1920*1080的尺寸并按實(shí)際方向進(jìn)行渲染。Andriod也存在類似情況。

VLC for OS X(why?)和iOS的MPMoviePlayerViewControlle對(duì)Rotation沒有識(shí)別，它們總是按實(shí)際尺寸和默認(rèn)方向進(jìn)行渲染。對(duì)于MPMoviePlayerViewControlle下面有解決方案。

Safari瀏覽器調(diào)出的播放器應(yīng)該也是MPMoviePlayerViewController，所以也無(wú)法正確識(shí)別方向。

三、MPMoviePlayerViewController控制視頻方向

需要額外的參數(shù)來(lái)確定視頻的方向，然后旋轉(zhuǎn)播放器，達(dá)到各種視頻——mov/mp4/m3u8等——都可以正確播放的目的。

 1 //…... 2     NSString * url = @"http://www.yourdomain.com/Videos/1.m3u8"; 3     MPMoviePlayerViewController * vc = [[MPMoviePlayerViewController alloc] init]; 4     vc.moviePlayer.contentURL = [NSURL URLWithString:url]; 5     // 這里播放一個(gè)Rotation為90的視頻，即Home鍵在下錄制的視頻 6     [self rotateVideoView:vc degrees:90]; 7     [self PResentMoviePlayerViewControllerAnimated:vc]; 8     [vc.moviePlayer play]; 9  10 //…...11 - (void)rotateVideoView:(MPMoviePlayerViewController *)movePlayerViewController degrees:(NSInteger)degrees12 {13     if(degrees==0||degrees==360) return;14     if(degrees<0) degrees = (degrees % 360) + 360;15     if(degrees>360) degrees = degrees % 360;16     // MPVideoView在iOS8中Tag為1002，不排除蘋果以后更改的可能性。參考遞歸查看View層次結(jié)構(gòu)的lldb命令： (lldb) po [movePlayerViewController.view recursiveDescription]17     UIView *videoView = [movePlayerViewController.view viewWithTag:1002];18     if ([videoView isKindOfClass:NSClassFromString(@"MPVideoView")]) {19         videoView.transform = CGAffineTransformMakeRotation(M_PI * degrees / 180.0);20         videoView.frame = movePlayerViewController.view.bounds;21     }22 }

View Code

改為Category:

 1 #import "MPMoviePlayerViewController+Rotation.h" 2  3 @implementation MPMoviePlayerViewController (Rotation) 4  5 - (void)rotateVideoViewWithDegrees:(NSInteger)degrees 6 { 7     if(degrees==0||degrees==360) return; 8     if(degrees<0) degrees = (degrees % 360) + 360; 9     if(degrees>360) degrees = degrees % 360;10    11     // MPVideoView在iOS8中Tag為1002，不排除蘋果以后更改的可能性。參考遞歸查看View層次結(jié)構(gòu)的lldb命令： (lldb) po [movePlayerViewController.view recursiveDescription]12     UIView *videoView = [self.view viewWithTag:1002];13     if ([videoView isKindOfClass:NSClassFromString(@"MPVideoView")]) {14         videoView.transform = CGAffineTransformMakeRotation(M_PI * degrees / 180.0);15         videoView.frame = self.view.bounds;16     }17 }18 19 @end

四、HTML5控制視頻方向

在video標(biāo)簽中增加 style="-webkit-transform: rotate(90deg);” ，不過(guò)控件也被旋轉(zhuǎn)了。這就需要將默認(rèn)播放控件隱藏了并且自繪控件，此略。

五、使用ffmpeg寫入Rotation元數(shù)據(jù)

對(duì)于沒有Rotation元數(shù)據(jù)的mp4文件，可通過(guò)ffmpeg等工具寫入。比如視頻需要順時(shí)針旋轉(zhuǎn)90度顯示：

ffmpeg -i input.mp4 -c copy -metadata:s:v:0 rotate=90 output.mp4

注：
如果愿意，寫入非0、90、180或270的值，比如45之類的也是可以的。

六、獲取視頻方向(角度)

+ (NSUInteger)degressFromVideoFileWithURL:(NSURL *)url{    NSUInteger degress = 0;       AVAsset *asset = [AVAsset assetWithURL:url];    NSArray *tracks = [asset tracksWithMediaType:AVMediaTypeVideo];    if([tracks count] > 0) {        AVAssetTrack *videoTrack = [tracks objectAtIndex:0];        CGAffineTransform t = videoTrack.preferredTransform;               if(t.a == 0 && t.b == 1.0 && t.c == -1.0 && t.d == 0){            // Portrait            degress = 90;        }else if(t.a == 0 && t.b == -1.0 && t.c == 1.0 && t.d == 0){            // PortraitUpsideDown            degress = 270;        }else if(t.a == 1.0 && t.b == 0 && t.c == 0 && t.d == 1.0){            // LandscapeRight            degress = 0;        }else if(t.a == -1.0 && t.b == 0 && t.c == 0 && t.d == -1.0){            // LandscapeLeft            degress = 180;        }    }       return degress;}

七、按正確方向?qū)σ曨l進(jìn)行截圖

關(guān)鍵點(diǎn)是將AVAssetImageGrnerator對(duì)象的appliesPreferredTrackTransform屬性設(shè)置為YES。

 1 + (UIImage *)extractImageFromVideoFileWithUrl:(NSURL *)url 2 { 3     NSDictionary *opts = @{AVURLAssetPreferPreciseDurationAndTimingKey:@(NO)}; 4     AVURLAsset *asset = [[AVURLAsset alloc] initWithURL:url options:opts]; 5     AVAssetImageGenerator *gen = [[AVAssetImageGenerator alloc] initWithAsset:asset]; 6     // 應(yīng)用方向 7     gen.appliesPreferredTrackTransform = YES; 8     CMTime time = CMTimeMakeWithSeconds(1, 60); 9     NSError *error = nil;10     CMTime actualTime;11     CGImageRef image = [gen copyCGImageAtTime:time actualTime:&actualTime error:&error];12     if(error)13     {14         DLog(@"%@ %@",__FUNCTION_FILE_LINE__,error);15         return nil;16     }17     UIImage *thumb = [[UIImage alloc] initWithCGImage:image];18     CGImageRelease(image);19    20     return thumb;21 }

八、實(shí)時(shí)視頻的方向處理

使用AVFoundation制作自定義相機(jī)時(shí)，采集出來(lái)的視頻幀保存在CMSampleBufferRef結(jié)構(gòu)中，顏色空間可以設(shè)置為sRGB或YUV。進(jìn)行一些內(nèi)存操作就可實(shí)現(xiàn)旋轉(zhuǎn)。以下代碼是針對(duì)YUV的。

注：
這種涉及大量?jī)?nèi)存拷貝的操作，實(shí)際應(yīng)用中要權(quán)衡其利弊。以下代碼未經(jīng)過(guò)測(cè)試。

1、RGB24旋轉(zhuǎn)90度

 1 // RGB24旋轉(zhuǎn)90度 2 void RGB24Rotate90(int8_t *des, const int8_t *src, int width, int height) 3 { 4     if(!des || !src) return; 5     6     int n = 0; 7     int linesize = width * 3; 8     int i, j; 9     // 逆時(shí)針旋轉(zhuǎn)10     for (j = width; j > 0; j--) {11         for (i = 0; i < height; i++) {12             memccpy(&des[n], &src[linesize * i + j * 3 - 3], 0, 3);13             n += 3;14         }15     }16     /*17     // 順時(shí)針旋轉(zhuǎn)18     for (j = 0 ; j < width; j++) {19         for (i = height; i > 0; i--) {20             memccpy(&des[n], &src[linesize * (i - 1) + j * 3 - 3], 0, 3);21             n += 3;22         }23     }24     */25 }

View Code

2、RGB24旋轉(zhuǎn)90度

 1 // YUV420旋轉(zhuǎn)90度 2 void YUV420Rotate90(int8_t *des, const int8_t *src, int width, int height) 3 { 4     int i = 0, j = 0, n = 0; 5     int hw = width / 2, hh = height / 2; 6     7     const int8_t *ptmp = src; 8     for (j = width; j > 0; j--) { 9         for (i = 0; i < height; i++) {10             des[n++] = ptmp[width * i + j];11         }12     }13    14     ptmp = src + width * height;15     for (j = hw; j > 0; j--) {16         for (i = 0; i < hh; i++) {17             des[n++] = ptmp[hw * i + j];18         }19     }20    21     ptmp = src + width * height * 5 / 4;22     for (j = hw; j > 0; j--) {23         for (i = 0; i < hh; i++) {24             des[n++] = ptmp[hw * i + j];25         }26     }27 }

View Code

或：

 1 int8_t[] rotateYUV420Degree90(int8_t[] data, int imageWidth, int imageHeight) 2 { 3     int8_t [] yuv = new int8_t[imageWidth*imageHeight*3/2]; 4     // Rotate the Y luma 5     int i = 0; 6     for(int x = 0;x < imageWidth;x++) 7     { 8         for(int y = imageHeight-1;y >= 0;y--) 9         {10             yuv[i] = data[y*imageWidth+x];11             i++;12         }13     }14     // Rotate the U and V color components15     i = imageWidth*imageHeight*3/2-1;16     for(int x = imageWidth-1;x > 0;x=x-2)17     {18         for(int y = 0;y < imageHeight/2;y++)19         {20             yuv[i] = data[(imageWidth*imageHeight)+(y*imageWidth)+x];21             i--;22             yuv[i] = data[(imageWidth*imageHeight)+(y*imageWidth)+(x-1)];23             i--;24         }25     }26     return yuv;27 }