带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(18) https://developer.aliyun.com/article/1243461?groupCode=taobaotech
自此我们已经完成了全景视频控制 API 的提供，后面只需要规范一种数据格式来让程序生成上面的执行代码，即可完成根据配置驱动全景视频视野的目的。
在新零售工作台我们通过默认参数来生成封面视频，也提供了表单的方式允许商家重设这些参数：
媒体流的捕获和上传
最后将 Three.js 渲染用的 Canvas 通过 captureStream 捕获其媒体流(Stream)，使用 MediaRecorder API 将其转换为 Blob 文件对象，即可用于上传。
捕获文件对象：
let recordedBlobs = []; let mediaRecorder; function startRecording() { mediaRecorder = new MediaRecorder( renderer.domElement.captureStream() ); mediaRecorder.ondataavailable = function(event) { if (event.data && event.data.size > 0) { recordedBlobs.push(event.data); } }; mediaRecorder.start(); } function stopRecording() { mediaRecorder.stop(); }
上传文件对象：
import { createUploader } from '@ali/speedster-media-upload'; // 内容中台视频上传库 const file = new File( new Blob(recordedBlobs), 'cover.webm', ); const uploader = await createUploader(); const fileInfo = await uploader.startUpload(file);
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(20) https://developer.aliyun.com/article/1243459?groupCode=taobaotech
