编程视频制作技术大全：从浏览器录屏到AI视频合成的完整方案

// 获取屏幕录制权限
async function startScreenRecording() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: {
        mediaSource: 'screen',
        width: { ideal: 1920 },
        height: { ideal: 1080 },
        frameRate: { ideal: 30 }
      },
      audio: {
        echoCancellation: true,
        noiseSuppression: true
      }
    });

    // 创建录制器
    const mediaRecorder = new MediaRecorder(stream, {
      mimeType: 'video/webm;codecs=vp9',
      videoBitsPerSecond: 2500000 // 2.5Mbps
    });

    const chunks = [];
    
    mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) {
        chunks.push(event.data);
      }
    };

    mediaRecorder.onstop = () => {
      const blob = new Blob(chunks, { type: 'video/webm' });
      const url = URL.createObjectURL(blob);
      
      // 下载视频
      const a = document.createElement('a');
      a.href = url;
      a.download = 'recording.webm';
      a.click();
    };

    mediaRecorder.start(1000); // 每秒收集一次数据
    return mediaRecorder;
  } catch (error) {
    console.error('录制失败:', error);
  }
}

// 使用示例
const recorder = await startScreenRecording();
// 10秒后停止录制
setTimeout(() => recorder.stop(), 10000);

import RecordRTC, { RecordRTCPromisesHandler } from 'recordrtc';

async function advancedScreenRecording() {
  // 获取高质量屏幕流
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: {
      width: { ideal: 1920 },
      height: { ideal: 1080 }
    },
    audio: true
  });

  // 配置录制参数
  const recorder = new RecordRTCPromisesHandler(stream, {
    type: 'video',
    mimeType: 'video/webm;codecs=vp9',
    canvas: {
      width: 1920,
      height: 1080
    },
    frameInterval: 10, // 更低的帧间隔 = 更高的质量
    quality: 0.95,
    videoBitsPerSecond: 5000000 // 5Mbps高码率
  });

  await recorder.startRecording();
  
  // 录制完成后处理
  setTimeout(async () => {
    await recorder.stopRecording();
    const blob = await recorder.getBlob();
    
    // 可选：转换格式或压缩
    await convertToMp4(blob);
  }, 30000); // 录制30秒
}

// 格式转换（需要服务端支持）
async function convertToMp4(webmBlob) {
  const formData = new FormData();
  formData.append('video', webmBlob, 'recording.webm');
  
  const response = await fetch('/api/convert-to-mp4', {
    method: 'POST',
    body: formData
  });
  
  if (response.ok) {
    const mp4Blob = await response.blob();
    downloadBlob(mp4Blob, 'recording.mp4');
  }
}

const puppeteer = require('puppeteer');
const fs = require('fs');

async function automatedScreenRecording(url, outputPath) {
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--enable-usermedia-screen-capturing',
      '--allow-http-screen-capture',
      '--auto-select-desktop-capture-source=录制区域',
      '--disable-web-security',
      '--disable-features=VizDisplayCompositor'
    ]
  });

  const page = await browser.newPage();
  
  // 设置视窗大小
  await page.setViewport({ width: 1920, height: 1080 });
  
  // 注入录制脚本
  await page.evaluateOnNewDocument(() => {
    // 重写时间相关函数，加速动画
    const originalNow = Date.now;
    const originalPerf = performance.now;
    let timeScale = 10; // 10倍速
    
    Date.now = () => originalNow() * timeScale;
    performance.now = () => originalPerf() * timeScale;
  });

  await page.goto(url);
  
  // 开始录制
  const client = await page.target().createCDPSession();
  await client.send('Page.startScreencast', {
    format: 'png',
    quality: 100,
    maxWidth: 1920,
    maxHeight: 1080,
    everyNthFrame: 1
  });

  const frames = [];
  client.on('Page.screencastFrame', async (params) => {
    frames.push(params.data);
    await client.send('Page.screencastFrameAck', {
      sessionId: params.sessionId
    });
  });

  // 等待页面加载并触发事件
  await page.waitForTimeout(5000);
  
  // 停止录制
  await client.send('Page.stopScreencast');
  
  // 将帧转换为视频
  await framesToVideo(frames, outputPath);
  
  await browser.close();
}

async function framesToVideo(frames, outputPath) {
  const ffmpeg = require('fluent-ffmpeg');
  
  // 保存帧为临时图片
  const tempDir = '/tmp/frames/';
  fs.mkdirSync(tempDir, { recursive: true });
  
  frames.forEach((frame, index) => {
    const buffer = Buffer.from(frame, 'base64');
    fs.writeFileSync(`${tempDir}frame_${index.toString().padStart(6, '0')}.png`, buffer);
  });
  
  // 使用FFmpeg合成视频
  return new Promise((resolve, reject) => {
    ffmpeg(`${tempDir}frame_%06d.png`)
      .inputFPS(30)
      .videoCodec('libx264')
      .outputOptions('-pix_fmt', 'yuv420p')
      .output(outputPath)
      .on('end', resolve)
      .on('error', reject)
      .run();
  });
}

const ffmpeg = require('fluent-ffmpeg');
const path = require('path');

class VideoComposer {
  constructor() {
    this.scenes = [];
  }

  // 添加图片场景
  addImageScene(imagePath, duration, audioPath, transitions = {}) {
    this.scenes.push({
      type: 'image',
      source: imagePath,
      duration,
      audio: audioPath,
      transitions
    });
  }

  // 添加文字场景
  addTextScene(text, style, duration, audioPath) {
    this.scenes.push({
      type: 'text',
      content: text,
      style,
      duration,
      audio: audioPath
    });
  }

  // 生成视频
  async generateVideo(outputPath) {
    let command = ffmpeg();
    let filterComplex = [];
    let totalDuration = 0;

    this.scenes.forEach((scene, index) => {
      if (scene.type === 'image') {
        // 添加图片输入
        command = command.input(scene.source);
        command = command.inputOptions([
          '-loop 1',
          `-t ${scene.duration}`
        ]);

        // 添加缩放和淡入淡出效果
        filterComplex.push(
          `[${index}:v]scale=1920:1080:force_original_aspect_ratio=decrease,` +
          `pad=1920:1080:(ow-iw)/2:(oh-ih)/2,setsar=1,` +
          `fade=in:0:30,fade=out:${scene.duration * 30 - 30}:30[v${index}]`
        );

        // 添加音频
        if (scene.audio) {
          command = command.input(scene.audio);
          filterComplex.push(`[${this.scenes.length + index}:a]volume=1.0[a${index}]`);
        }
      }

      totalDuration += scene.duration;
    });

    // 拼接所有视频片段
    const videoInputs = this.scenes.map((_, i) => `[v${i}]`).join('');
    filterComplex.push(`${videoInputs}concat=n=${this.scenes.length}:v=1[outv]`);

    // 拼接所有音频片段
    const audioInputs = this.scenes.map((_, i) => `[a${i}]`).join('');
    if (audioInputs) {
      filterComplex.push(`${audioInputs}concat=n=${this.scenes.length}:v=0:a=1[outa]`);
    }

    return new Promise((resolve, reject) => {
      command
        .complexFilter(filterComplex)
        .outputOptions([
          '-map [outv]',
          audioInputs ? '-map [outa]' : '',
          '-c:v libx264',
          '-preset medium',
          '-crf 23',
          '-c:a aac',
          '-b:a 128k',
          '-movflags +faststart'
        ].filter(Boolean))
        .output(outputPath)
        .on('progress', (progress) => {
          console.log(`处理进度: ${Math.round(progress.percent)}%`);
        })
        .on('end', () => {
          console.log('视频生成完成!');
          resolve(outputPath);
        })
        .on('error', (err) => {
          console.error('视频生成失败:', err);
          reject(err);
        })
        .run();
    });
  }
}

// 使用示例
async function createPresentationVideo() {
  const composer = new VideoComposer();
  
  // 添加标题页面
  composer.addImageScene('./slides/title.png', 3, './audio/intro.mp3');
  
  // 添加内容页面
  composer.addImageScene('./slides/slide1.png', 5, './audio/slide1.mp3');
  composer.addImageScene('./slides/slide2.png', 4, './audio/slide2.mp3');
  
  // 添加结束页面
  composer.addImageScene('./slides/ending.png', 2, './audio/outro.mp3');
  
  // 生成最终视频
  await composer.generateVideo('./output/presentation.mp4');
}

from moviepy.editor import *
import os
from pathlib import Path

class PresentationVideoMaker:
    def __init__(self, output_dir="./output"):
        self.output_dir = Path(output_dir)
        self.output_dir.mkdir(exist_ok=True)
        self.clips = []
        
    def add_slide_with_audio(self, image_path, audio_path, transition_duration=0.5):
        """添加带音频的幻灯片"""
        # 加载图片和音频
        image_clip = ImageClip(image_path)
        audio_clip = AudioFileClip(audio_path)
        
        # 设置图片时长与音频同步
        image_clip = image_clip.set_duration(audio_clip.duration)
        image_clip = image_clip.set_audio(audio_clip)
        
        # 添加淡入淡出效果
        if transition_duration > 0:
            image_clip = image_clip.fadein(transition_duration).fadeout(transition_duration)
            
        # 缩放到统一尺寸
        image_clip = image_clip.resize((1920, 1080))
        
        self.clips.append(image_clip)
        
    def add_text_overlay(self, text, duration, position=('center', 'center'), 
                        fontsize=60, color='white', bg_color='black'):
        """添加文字覆盖层"""
        txt_clip = TextClip(text, 
                           fontsize=fontsize, 
                           color=color, 
                           bg_color=bg_color,
                           size=(1920, 1080),
                           method='caption')
        
        txt_clip = txt_clip.set_duration(duration).set_position(position)
        self.clips.append(txt_clip)
        
    def add_background_music(self, music_path, volume=0.3):
        """添加背景音乐"""
        if self.clips:
            total_duration = sum(clip.duration for clip in self.clips)
            background_music = AudioFileClip(music_path)
            
            # 循环播放直到视频结束
            if background_music.duration < total_duration:
                loops_needed = int(total_duration / background_music.duration) + 1
                background_music = concatenate_audioclips([background_music] * loops_needed)
            
            background_music = background_music.subclip(0, total_duration)
            background_music = background_music.volumex(volume)
            
            # 将背景音乐与现有音频混合
            final_audio = CompositeAudioClip([
                concatenate_audioclips([clip.audio for clip in self.clips if clip.audio]),
                background_music
            ])
            
            return final_audio
        return None
        
    def generate_video(self, filename="presentation.mp4", fps=30, bitrate="5000k"):
        """生成最终视频"""
        if not self.clips:
            raise ValueError("没有添加任何片段!")
            
        # 连接所有片段
        final_video = concatenate_videoclips(self.clips, method="compose")
        
        output_path = self.output_dir / filename
        
        # 渲染视频
        final_video.write_videofile(
            str(output_path),
            fps=fps,
            bitrate=bitrate,
            audio_codec='aac',
            codec='libx264',
            temp_audiofile='temp-audio.m4a',
            remove_temp=True,
            verbose=False,
            logger=None  # 禁用详细日志
        )
        
        print(f"视频已生成: {output_path}")
        return str(output_path)

# 使用示例
def create_ai_presentation():
    maker = PresentationVideoMaker()
    
    # 添加标题页
    maker.add_slide_with_audio(
        "slides/title.png", 
        "audio/title_speech.mp3",
        transition_duration=1.0
    )
    
    # 添加内容页面
    slides_data = [
        ("slides/slide1.png", "audio/slide1_speech.mp3"),
        ("slides/slide2.png", "audio/slide2_speech.mp3"),
        ("slides/slide3.png", "audio/slide3_speech.mp3"),
    ]
    
    for slide_img, slide_audio in slides_data:
        maker.add_slide_with_audio(slide_img, slide_audio)
    
    # 添加结束文字
    maker.add_text_overlay(
        "感谢观看！", 
        duration=3,
        position='center',
        fontsize=80,
        color='white',
        bg_color='black'
    )
    
    # 生成视频
    output_file = maker.generate_video("ai_presentation.mp4")
    return output_file

# 批量处理
def batch_create_videos(presentations_config):
    """批量生成多个视频"""
    results = []
    
    for config in presentations_config:
        maker = PresentationVideoMaker(f"./output/{config['name']}")
        
        for slide_config in config['slides']:
            maker.add_slide_with_audio(
                slide_config['image'],
                slide_config['audio'],
                transition_duration=0.5
            )
            
        output_file = maker.generate_video(f"{config['name']}.mp4")
        results.append(output_file)
        
    return results

import {Composition, continueRender, delayRender} from 'remotion';
import {Audio, Img, useCurrentFrame, useVideoConfig, interpolate} from 'remotion';

// 幻灯片组件
const SlideComponent: React.FC<{
  imageSrc: string;
  audioSrc: string;
  title: string;
  subtitle?: string;
}> = ({imageSrc, audioSrc, title, subtitle}) => {
  const frame = useCurrentFrame();
  const {fps, durationInFrames} = useVideoConfig();
  
  // 淡入效果
  const opacity = interpolate(
    frame,
    [0, 30], // 前30帧淡入
    [0, 1],
    {extrapolateRight: 'clamp'}
  );
  
  // 标题动画
  const titleY = interpolate(
    frame,
    [0, 60], // 60帧内从下方滑入
    [100, 0],
    {extrapolateRight: 'clamp'}
  );

  return (
    <div style={{
      width: '100%', 
      height: '100%', 
      backgroundColor: '#000',
      position: 'relative',
      opacity
    }}>
      {/* 背景图片 */}
      <Img 
        src={imageSrc}
        style={{
          width: '100%',
          height: '100%',
          objectFit: 'cover'
        }}
      />
      
      {/* 音频 */}
      <Audio src={audioSrc} />
      
      {/* 标题覆盖层 */}
      <div style={{
        position: 'absolute',
        bottom: 100,
        left: 50,
        right: 50,
        transform: `translateY(${titleY}px)`,
        background: 'rgba(0, 0, 0, 0.7)',
        padding: 30,
        borderRadius: 10
      }}>
        <h1 style={{
          fontSize: 48,
          color: 'white',
          margin: 0,
          fontFamily: 'Arial, sans-serif'
        }}>
          {title}
        </h1>
        
        {subtitle && (
          <p style={{
            fontSize: 24,
            color: '#ccc',
            margin: '10px 0 0 0'
          }}>
            {subtitle}
          </p>
        )}
      </div>
    </div>
  );
};

// 主视频合成
export const AIPresentation: React.FC = () => {
  return (
    <>
      <Composition
        id="AIPresentation"
        component={PresentationVideo}
        durationInFrames={900} // 30秒，30fps
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

const PresentationVideo: React.FC = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  
  const slides = [
    {
      imageSrc: '/slides/title.png',
      audioSrc: '/audio/intro.mp3',
      title: 'AI Revolution',
      subtitle: 'The Future is Here',
      duration: 300 // 10秒
    },
    {
      imageSrc: '/slides/slide1.png',
      audioSrc: '/audio/slide1.mp3',
      title: 'Machine Learning Basics',
      duration: 300
    },
    {
      imageSrc: '/slides/slide2.png',
      audioSrc: '/audio/slide2.mp3',
      title: 'Deep Learning Applications',
      duration: 300
    }
  ];
  
  // 根据当前帧决定显示哪个幻灯片
  let currentSlideIndex = 0;
  let accumulatedFrames = 0;
  
  for (let i = 0; i < slides.length; i++) {
    if (frame < accumulatedFrames + slides[i].duration) {
      currentSlideIndex = i;
      break;
    }
    accumulatedFrames += slides[i].duration;
  }
  
  const currentSlide = slides[currentSlideIndex];
  
  return (
    <SlideComponent
      imageSrc={currentSlide.imageSrc}
      audioSrc={currentSlide.audioSrc}
      title={currentSlide.title}
      subtitle={currentSlide.subtitle}
    />
  );
};

// 渲染命令
// npx remotion render AIPresentation output/presentation.mp4

import openai
from moviepy.editor import *
from PIL import Image, ImageDraw, ImageFont
import requests
from io import BytesIO

class AIVideoCreator:
    def __init__(self, openai_key):
        openai.api_key = openai_key
        
    def generate_script(self, topic, duration_minutes=5):
        """使用GPT生成视频脚本"""
        prompt = f"""
        为主题"{topic}"创建一个{duration_minutes}分钟的教学视频脚本。
        
        要求：
        1. 分成5-8个段落，每段30-60秒
        2. 每段包含：标题、内容描述、建议的视觉元素
        3. 语言通俗易懂，适合技术分享
        4. 返回JSON格式
        """
        
        response = openai.ChatCompletion.create(
            model="gpt-4",
            messages=[{"role": "user", "content": prompt}],
            temperature=0.7
        )
        
        return json.loads(response.choices[0].message.content)
    
    def generate_slide_image(self, title, content, style="tech"):
        """使用DALL-E生成幻灯片图片"""
        prompt = f"""
        Create a professional presentation slide image with:
        Title: {title}
        Content: {content}
        Style: {style}, clean, modern, tech-focused
        Layout: 16:9 aspect ratio, suitable for presentation
        """
        
        response = openai.Image.create(
            prompt=prompt,
            n=1,
            size="1792x1024"  # 接近16:9比例
        )
        
        image_url = response.data[0].url
        image_response = requests.get(image_url)
        return Image.open(BytesIO(image_response.content))
    
    def text_to_speech(self, text, voice="nova"):
        """使用OpenAI TTS生成语音"""
        response = openai.audio.speech.create(
            model="tts-1-hd",
            voice=voice,
            input=text,
            speed=1.0
        )
        
        return response.content
    
    def create_video_from_script(self, script, output_path):
        """从脚本创建完整视频"""
        clips = []
        temp_dir = Path("./temp")
        temp_dir.mkdir(exist_ok=True)
        
        for i, section in enumerate(script['sections']):
            # 生成图片
            slide_image = self.generate_slide_image(
                section['title'], 
                section['content']
            )
            
            image_path = temp_dir / f"slide_{i}.png"
            slide_image.save(image_path)
            
            # 生成语音
            audio_data = self.text_to_speech(section['narration'])
            audio_path = temp_dir / f"audio_{i}.mp3"
            
            with open(audio_path, 'wb') as f:
                f.write(audio_data)
            
            # 创建视频片段
            audio_clip = AudioFileClip(str(audio_path))
            image_clip = ImageClip(str(image_path))
            image_clip = image_clip.set_duration(audio_clip.duration)
            image_clip = image_clip.set_audio(audio_clip)
            
            # 添加转场效果
            if i > 0:
                image_clip = image_clip.crossfadein(0.5)
            
            clips.append(image_clip)
        
        # 合成最终视频
        final_video = concatenate_videoclips(clips, method="compose")
        final_video.write_videofile(output_path, fps=30, bitrate="5000k")
        
        # 清理临时文件
        import shutil
        shutil.rmtree(temp_dir)
        
        return output_path

# 使用示例
def create_ai_tutorial_video():
    creator = AIVideoCreator("your-openai-key")
    
    # 生成脚本
    script = creator.generate_script("JavaScript动画库介绍", duration_minutes=10)
    
    # 生成视频
    video_path = creator.create_video_from_script(script, "ai_tutorial.mp4")
    
    print(f"AI视频已生成: {video_path}")
    return video_path

// 并行处理多个视频
async function batchProcessVideos(configs) {
  const concurrency = 4; // 限制并发数
  const results = [];
  
  for (let i = 0; i < configs.length; i += concurrency) {
    const batch = configs.slice(i, i + concurrency);
    const batchPromises = batch.map(config => processVideo(config));
    
    const batchResults = await Promise.all(batchPromises);
    results.push(...batchResults);
    
    console.log(`完成批次 ${Math.ceil((i + 1) / concurrency)}/${Math.ceil(configs.length / concurrency)}`);
  }
  
  return results;
}

# MoviePy内存优化
def optimize_memory_usage():
    # 设置临时目录
    os.environ['IMAGEIO_FFMPEG_EXE'] = '/usr/local/bin/ffmpeg'
    
    # 分段处理大文件
    def process_large_video(video_path, chunk_duration=60):
        video = VideoFileClip(video_path)
        total_duration = video.duration
        
        chunks = []
        for start in range(0, int(total_duration), chunk_duration):
            end = min(start + chunk_duration, total_duration)
            chunk = video.subclip(start, end)
            
            # 处理chunk...
            processed_chunk = process_chunk(chunk)
            chunks.append(processed_chunk)
            
            # 清理内存
            chunk.close()
            del chunk
            
        final_video = concatenate_videoclips(chunks)
        return final_video

# FFmpeg预设优化
# 快速编码（适合预览）
ffmpeg -i input.mp4 -c:v libx264 -preset ultrafast -crf 28 preview.mp4

# 高质量编码（适合最终输出）
ffmpeg -i input.mp4 -c:v libx264 -preset slow -crf 18 final.mp4

# 硬件加速（NVIDIA GPU）
ffmpeg -hwaccel nvenc -i input.mp4 -c:v h264_nvenc -preset fast hardware_accelerated.mp4