带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(5)

简介: 带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(5)

带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(4) https://developer.aliyun.com/article/1243476?groupCode=taobaotech



将视频映射到球面或者立方体面


$ ffmpeg -i output.mp4 -vf v360=e:c3x2:cubic:out_pad=0.01 output2.mp4


image.png


选择视角进行截取


image.png


前端方案


前端可以将全景视频渲染出来,然后进行录制,基于规则参数自动操作视频的视角变化,生成普通视频文件。流程如下:


image.png


1. 在浏览器通过 WebGL 渲染全景视频;

2. 根据规则驱动全景视频的画面变化;

3. 通过 captureStream 获取 Canvas 上的媒体流数据;

4. 通过 MediaRecorder 将 Canvas 中的媒体流转化成视频文件;

5. 将视频文件上传到内容中台,从而进行下发透出。


方案对比


image.png

相比较而言,前端方案开发成本低,结合商家人工预览确认、调参的过程,做到视频质量可控,功能快速上线的目的。




带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(6) https://developer.aliyun.com/article/1243474?groupCode=taobaotech


相关文章
|
前端开发
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(4)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(4)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(4)
|
存储 算法
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(2)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(2)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(13)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(13)
|
定位技术 图形学
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(16)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(16)
108 0
|
编解码 算法
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(7)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(7)
|
前端开发
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(15)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(15)
106 0
|
存储 JavaScript 前端开发
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(11)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(11)
127 0
|
算法 前端开发 API
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(6)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(6)
108 0
|
编解码 前端开发
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(20)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(20)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(10)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(10)