Swift应用中实现视频上下区域模糊效果的可行性咨询

Absolutely! This is totally feasible with Swift on iOS — in fact, it’s a straightforward implementation using Apple’s built-in frameworks. Let’s break down both the feasibility and how to actually build it.

Feasibility Overview #

iOS provides all the tools you need to add blur effects to video, whether you want a real-time overlay during playback (like Twitter’s in-app player) or want to permanently apply the blur to a video file for export:

• Real-time overlay: Uses UIVisualEffectView (part of UIKit) to add blur layers on top of your video player. This is lightweight, performance-friendly, and doesn’t modify the original video.
• Permanent video modification: Uses AVFoundation and CoreImage to process video frames, apply blur to specific regions, and export a new video file. This is ideal if you need to save or share the blurred video.

Twitter’s implementation likely uses the first approach (overlay) for playback, since it’s efficient and avoids reprocessing the video file every time it’s played.

Implementation Steps & Code Examples #

1. Real-Time Blur Overlay (For Video Playback) #

This is the simplest way to replicate Twitter’s effect. You’ll add blur views directly on top of your AVPlayer layer.

import UIKit
import AVKit

class VideoPlayerViewController: UIViewController {
    private var player: AVPlayer!
    private var playerLayer: AVPlayerLayer!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Set up your video player
        guard let videoURL = Bundle.main.url(forResource: "sample", withExtension: "mp4") else { return }
        player = AVPlayer(url: videoURL)
        playerLayer = AVPlayerLayer(player: player)
        playerLayer.frame = view.bounds
        view.layer.addSublayer(playerLayer)
        
        // Add top blur view
        let topBlurView = createBlurView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height * 0.15))
        view.addSubview(topBlurView)
        
        // Add bottom blur view
        let bottomBlurView = createBlurView(frame: CGRect(x: 0, y: view.bounds.height - (view.bounds.height * 0.15), width: view.bounds.width, height: view.bounds.height * 0.15))
        view.addSubview(bottomBlurView)
        
        // Start playback
        player.play()
    }
    
    private func createBlurView(frame: CGRect) -> UIVisualEffectView {
        let blurEffect = UIBlurEffect(style: .systemMaterialDark) // Adjust style for light/dark mode
        let blurView = UIVisualEffectView(effect: blurEffect)
        blurView.frame = frame
        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight] // Keep blur view sized correctly on rotation
        return blurView
    }
}

• Adjust the height multiplier (0.15 in the example) to control how much of the top/bottom is blurred.
• Use UIBlurEffect.Style options like .systemMaterial, .systemUltraThinMaterial, or .dark to match your app’s design.

2. Permanent Blur for Video Export #

If you need to save the video with blur baked in, use AVFoundation and CoreImage to process the video frames:

import AVFoundation
import CoreImage

func applyBlurToVideo(inputURL: URL, outputURL: URL, completion: @escaping (Bool, Error?) -> Void) {
    let asset = AVAsset(url: inputURL)
    let composition = AVMutableComposition()
    
    guard let videoTrack = asset.tracks(withMediaType: .video).first else {
        completion(false, NSError(domain: "VideoError", code: -1, userInfo: [NSLocalizedDescriptionKey: "No video track found"]))
        return
    }
    
    let videoCompositionTrack = composition.addMutableTrack(withMediaType: .video, preferredTrackID: kCMPersistentTrackID_Invalid)
    try? videoCompositionTrack?.insertTimeRange(CMTimeRangeMake(start: .zero, duration: asset.duration), of: videoTrack, at: .zero)
    
    // Create a video composition with a custom filter
    let videoComposition = AVMutableVideoComposition(asset: asset) { request in
        let sourceImage = request.sourceImage
        let filter = CIFilter(name: "CIGaussianBlur")!
        filter.setValue(sourceImage, forKey: kCIInputImageKey)
        filter.setValue(10, forKey: kCIInputRadiusKey) // Adjust blur strength
        
        // Crop the blurred image to only top and bottom regions
        let originalSize = sourceImage.extent.size
        let topBlurRect = CGRect(x: 0, y: 0, width: originalSize.width, height: originalSize.height * 0.15)
        let bottomBlurRect = CGRect(x: 0, y: originalSize.height - (originalSize.height * 0.15), width: originalSize.width, height: originalSize.height * 0.15)
        
        let topBlurredImage = filter.outputImage?.cropped(to: topBlurRect)
        let bottomBlurredImage = filter.outputImage?.cropped(to: bottomBlurRect)
        
        // Combine original image with blurred regions
        let combinedImage = sourceImage.composited(over: topBlurredImage!)
        let finalImage = combinedImage.composited(over: bottomBlurredImage!)
        
        request.finish(with: finalImage, context: nil)
    }
    
    // Export the processed video
    guard let exportSession = AVAssetExportSession(asset: composition, presetName: AVAssetExportPresetHighestQuality) else {
        completion(false, NSError(domain: "ExportError", code: -1, userInfo: [NSLocalizedDescriptionKey: "Could not create export session"]))
        return
    }
    exportSession.outputURL = outputURL
    exportSession.outputFileType = .mp4
    exportSession.videoComposition = videoComposition
    
    exportSession.exportAsynchronously {
        switch exportSession.status {
        case .completed:
            completion(true, nil)
        case .failed, .cancelled:
            completion(false, exportSession.error)
        default:
            break
        }
    }
}

• Adjust kCIInputRadiusKey (10 in the example) to control blur intensity.
• The cropped(to:) method ensures only the top/bottom regions are blurred, leaving the middle of the video intact.

Key Notes #

• For real-time playback, the overlay approach is preferred since it uses minimal system resources and works seamlessly with rotation.
• For video export, be mindful of processing time — longer videos will take more time to export, so consider showing a progress indicator to users.
• Test with different blur styles and heights to match Twitter’s exact look (they use a subtle, system-aligned blur that adapts to dark/light mode).

内容的提问来源于stack exchange，提问作者sathish