Web开发

首页 » 常识 » 诊断 » 字节这款Github星W
TUhjnbcbe - 2021/7/31 22:22:00
治疗白癜风医院哪个好 http://baidianfeng.39.net/a_cjzz/130905/4251012.html
在字节跳动,有这样一支技术团队:他们开源的项目在GitHub摘得多颗星,除了字节跳动,不少其他互联网公司也在用他们的产品;他们经历过不少极限操作,《囧妈》年春节期间网络首播的一套技术解决方案,他们在36小时内就完成了;他们拥有交叉领域稀有技能,据说是「前端里最懂多媒体的,多媒体里最懂前端的」。他们,就是字节跳动的web多媒体团队。GitHub星的前端开源播放器Web多媒体团队的组建者郭辉年加入字节跳动,当时他负责的是今日头条网页版前端。有一天,郭辉的leader给他提了一个问题:为什么有些网站的播放器里,从p切换到高清是连续播放的;而在今日头条的网站里切换清晰度,就会黑屏一会儿才能切换成功呢?整个视频行业不少产品也面临着类似的问题。郭辉研究之后发现,今日头条的视频是mp4格式,而那些流畅切换的网站则是用的流式传输的webm格式:“用大白话说,就是人家1分钟的视频可以切成6个10秒钟,用户从p切换高清的时候,当前p的10秒钟片段继续播,等到下一个10秒钟的时候就无缝切换成p;而mp4是一个完整文件,从p的视频切换到高清,需要重新打开另一个文件,中间肯定会黑屏。”郭辉说。想要流畅切换清晰度,当然也可以把视频都转换一次格式。但请教了相关同事之后,郭辉意识到这件事情根本划不来:当时的今日头条有上亿个视频,每个都转变一次格式,虽然用户体验可以有微小的提升,但付出的存储、带宽成本实在过高。一边是高额的投入,一边是用户体验,两难之间,郭辉决定做一个开创性的尝试:把修改视频格式这件事儿,从存储视频的服务端,挪到浏览器前端,从底层开始,自研一套新的播放器。要知道,从底层开始开发一个网页上的播放器,并不是传统前端的工作范围,这意味着郭辉要从一个单纯的前端跨行到多媒体领域。郭辉要吃的“苦头”,也就从这时开始了。底层的研发,往往要从最底层的原理开始,郭辉首先要搞懂的是视频容器的底层协议。由于缺少这方面的中文资料,需要研究长达数百页的英文协议原文,郭辉一边用翻译器查询协议中专业术语的意思,一边自己试验并理解,一条一条搞懂其中的原理。当他终于啃完了厚厚的协议,按照协议的内容开始开发浏览器之后,却发现问题一个接一个地出现:一开始,画面不完整,屏幕上一片黑一片白;调试好了之后,画面有了,音频却消失了;再度修改,音频终于有了,但音画并不同步……最艰难的时候,他需要在20MB的数据里找二进制级别的bug,来让播放器能够正常播放。把20MB换算成二进制,就是超过1.6亿个1或者0。1.6亿分之一的概率,这无异于海底捞针,很长一段时间里,郭辉对这个bug束手无措,他每天早上一睁眼,就很绝望:Bug怎么解?问题到底出在哪儿?今天会不会又是毫无进展的一天?他每天看着堆积如山的资料,脑袋嗡嗡作响毫无头绪,代码、文字、视频,在他的脑袋里煮成了一锅粥。两周后,他终于借助第三方工具,从二进制的层面上寻找差异,推测出了问题可能出在哪儿,用逆向推理解决了它。一个bug解决了,但播放器还没那么容易做好。郭辉觉得不能再单打独斗了,他需要队友。奈何,懂前端也懂多媒体的人实在太少,郭辉找了很久,也没有找到合适的人。这时,前端同学于浩出现了。于浩当时刚刚加入字节跳动不久。从山东大学毕业一年半后,因为想做一个“真正的前端工程师”,他从一家老牌软件公司跳槽到了字节跳动。认识他的字节跳动同学可能不在少数,毕竟他也是字节跳动黑轴乐队的主唱+脱口秀演员,如果你看过前不久的字节跳动吐槽会,可能会记得于浩回应别人调侃他“程序员发际线”的段子:因为渴望从技术的底层原理上获得更多的知识和成长,他找到郭辉,表示希望一起研发播放器。于是,一个秘密计划开始了:在中航广场矮楼,白天的上班时间里,郭辉自己研究学习做播放器的知识,于浩完成自己的日常工作;然而一下班,两人就离开各自的办公区,悄悄聚到一间会议室里,郭辉把自己研究明白的东西告诉于浩,然后两人分工做不同视频格式的播放器。这个过程持续了半年,二人周末也不曾停歇,终于完成了各自方向的自研任务。随着更多同学的加入,web多媒体团队正式成立,补充了字节跳动技术团队内视频架构Web多媒体的能力。由于他们研发的这款播放器刚好被西瓜视频所用,也就被命名为了「西瓜播放器」,并在GitHub开源,目前已经获得了超过颗星,是国内唯一一个从底层开始做的开源前端播放器。现在,西瓜播放器已经支撑了字节跳动体系内抖音、今日头条、技术学院、图虫、字节圈、CEO面对面、瓜瓜龙、GoGoKid、住小帮等数百个业务和场景。而在字节跳动公司之外,有道云协作、爱学习、网易云音乐、淘车网等其他公司的业务也都选用了西瓜播放器的开源版本。《囧妈》网络首播背后的开发者西瓜播放器的开源,意味着web多媒体团队终于有了一个广受认可的产品。他们并没有停下脚步,随时准备迎接更大的挑战。年初疫情爆发后,一个艰巨的挑战突然出现。那天是腊月二十九,web多媒体团队的绝大多数同学都已经离开北京回到家乡。中午12点,正在天津和老家亲人们一同吃饭的郭辉接到了leader“郭辉,有个会你接入下吧。”原来,疫情导致春节档下线后,字节跳动决定在抖音、今日头条、西瓜视频线上请全国人民看贺岁电影《囧妈》。抖音视频一般只有几分钟,要播放长达2个多小时的电影,不适配的可能性非常高。因此,技术leader们决定准备多套技术方案,web多媒体团队需要做一套兜底方案,用H5的方式实现电影播放。但大年初一零点,《囧妈》的线上播放就要开始了,留给web多媒体团队的时间只有36小时。用一天时间做一套方案,还要保证全国观众的体验,这对效率的要求极高。接下任务后,郭辉在飞书群通知团队所有人:Web多媒体团队24小时待命,保持电话畅通,做好应急准备。他先找到的是定居北京不需要回老家的张星。张星小组首先要做的是确定合适的视频播放格式,保障用户观看电影的流畅体验。而没有被叫到的同学纷纷主动请缨:“郭辉,请给我分配点任务,大家都这么着急,我在家闲坐着很不舒服。”那一刻,郭辉心里十分感动。第二天,大年三十的早晨,因为家里网络不好,张星一起床就迅速赶到了办公区,和抖音同学一起配合测试,准备上线。由于demo中用到的SDK在移动端使用比较少,兼容性没有被完整地测试过,张星需要在现场与抖音前端、测试团队合作,在iOS和安卓的不同版本上测试,确认可行性。测试的过程中,一个新的问题出现了:抖音本身是竖屏播放的,很难实现良好的横屏播放效果。于是,中午1点,于浩被紧急呼唤,做横屏的用户体验优化。他当时正在老家湖南的叔叔家里。接到要求后,于浩把自己锁在了弟弟的房间开始紧急开发。南方没有暖气,电脑和手指都是冷冰冰的,于浩却很激动:终于找到了一个机会,让家人理解自己在做多么厉害的事情。离开播还有11个小时,于浩需要开发一个在抖音里铺满全屏的横屏效果,还要保证操作顺滑。抖音当时并没有在前端层面做过横屏,这是一次从无到有的开发。于浩需要充分保证兼容性,一方面是横屏旋转的兼容:“竖屏变横屏要旋转90度,前端会让视频旋转90度,系统可能也会旋转90度,在不同的兼容环境下,很可能用户把手机横过来之后,内容却旋转了度。”他找到抖音的同事协商,抖音系统关掉横屏,所有横屏从UI层靠前端来实现。另一方面则是机型和系统版本的兼容,他必须规避一切在新的系统版本中的特性,“连年的安卓5都要兼容。”开发在继续,但新问题还在不断地涌现。离开播还有3个小时,因为播放电影的H5页面在UI层实现横屏,抖音系统并没有横屏,因此视频进度条和原本的情况并不适配。于浩又临时来修复了进度条的坐标系,最终选用了系统默认原生进度条,降低兼容性风险。H5播放页面顺利在最新版的iOS和安卓上线后,开播前2个小时,老旧版本的兼容工作也完成了。经过更多的调整,直到开播前1小时,H5播放器终于稳定,这套兜底方案开发成功。Web多媒体团队就这样5个人在一天的时间里,完成了这项平常要一个星期的时间才能做完的工程。那年,张星是第一次没有和家人一起吃年夜饭。夜里,大家集中开发的大会议室里供应了饺子,他拿起一小盒饺子,在角落里快速吃完又去跟进新进展了。0点,于浩的家人还在守岁。他把《囧妈》投到家里的大屏幕,但完全没有在看电影的内容,一边死死地盯着播放器,一边盯着飞书群,害怕出现什么未知的问题。大年初一凌晨2点,《囧妈》首轮播放圆满结束。于浩发了一条朋友圈,自豪地宣布:大家在抖音看《囧妈》的时候,发现了什么问题都可以找我反馈。凌晨3点,张星也终于坐上了回家的出租车。“总算做成了一件大事”,他心里非常满足。前端×多媒体交叉团队看到这里,你可能明白了,web多媒体团队属于拥有前端×多媒体交叉领域的稀有技能,是「造轮子」的开发者,更是细分领域的佼佼者。现在,web多媒体团队已经有了十余名同学,技术影响力也随着开源的西瓜播放器一起,辐射字节跳动和国内一系列其他互联网公司,新同学不断加入进来。郭辉说,他们的团队非常稳定,因为每个人都是抱着坚定的信念来的,比如有的同学在入职之前就把团队的开源代码从头到尾看了一遍,甚至还提出了优化点。除了工作,团队成员都很有主动学习的意识,业余时间也常常在精进技术,图片、RTC、云游戏等多个方向都是他们正在扩充的能力范围,甚至有同学只用了一周就完成了云游戏的SDK。也许正是这股不断精进、追求极致的信念,让更多优秀的前端开发者,在字节跳动的技术团队中不断涌现出来。了解更多:西瓜播放器开源地址
1
查看完整版本: 字节这款Github星W