使用ffmpeg.js在Web上实现流媒体处理

// 引入ffmpeg.js库
ffmpeg.load().then(async () => {
  // 获取用户选择的视频文件
  const file = document.getElementById('input').files[0];
  const videoElement = document.getElementById('video');
 
  // 创建FileReader实例
  const reader = new FileReader();
  reader.onload = (e) => {
    // 当文件读取完成后，将视频源设置给video元素
    videoElement.src = e.target.result;
  };
 
  // 读取视频文件
  reader.readAsDataURL(file);
 
  // 等待视频加载完成
  await new Promise((resolve, reject) => {
    videoElement.onloadeddata = resolve;
    videoElement.onerror = reject;
  });
 
  // 执行视频滤镜操作
  const buffer = await ffmpeg.write('mpegts', {
    // 设置输出格式为mpegts
    muxer: 'mpegts',
  });
 
  // 将处理后的视频流发送到服务器或进行其他操作
  // 例如，可以将buffer发送到服务器进行进一步处理
  // 这里仅为示例，通常需要使用fetch或XMLHttpRequest来发送数据
  console.log('视频处理完成，输出的buffer为：', buffer);
});

这段代码展示了如何在Web应用中使用ffmpeg.js来处理用户上传的视频文件。首先，它引入并初始化ffmpeg.js库，然后获取用户选择的文件并将其读取为DataURL。接下来，使用ffmpeg.js的write方法将视频流转换为mpegts格式的数据，最后打印出转换后的数据。在实际应用中，可以将转换后的数据发送到服务器进行进一步处理或者创建下载链接供用户下载处理后的视频。