英文专业的网站建设,wordpress修改标签页,课程微网站开发技术,wordpress 搜狐视频因为想做一个类似苹果的同播共享功能#xff0c;这一段时间对音视频做了一些浅浅的学习#xff0c;现简单总结记录。
我的需求是找到一个尽可能简单的方案来两人播放一段视频#xff0c;并且能够进度和操作同步#xff0c;所以基本不能有延迟#xff0c;同时能够显示WebV…因为想做一个类似苹果的同播共享功能这一段时间对音视频做了一些浅浅的学习现简单总结记录。
我的需求是找到一个尽可能简单的方案来两人播放一段视频并且能够进度和操作同步所以基本不能有延迟同时能够显示WebVTT字幕最好不需要额外的服务器。
视频流方案
前端视频流主要是用的是hls.jsflv.js和dash.js我最后使用了hls.js。
hls.js
hls.js多用于做在线视频播放原理就是将大视频切片分成几秒一个的小片段这样只需要不停加载小片段就可以完整播放视频了。
使用ffmpeg来生成视频
ffmpeg -i video.mkv -b:v:0 12M -c:v h264_videotoolbox -c:s webvtt -c:a mp3 -map 0:v -map 0:a:0 -map 0:s:34 -f hls -var_stream_map v:0,a:0,s:0,sgroup:subtitle,language:zh -master_pl_name master.m3u8 -hls_time 6 -hls_playlist_type vod -muxdelay 0 video.m3u8 -b:v:0 12M 12M码率h264_videotoolbox是mac的硬解码目前浏览器h264还是主流虽然最近也支持hevc了-map 0:s:34取第34个字幕转成webvtt格式-var_stream_map v:0,a:0,s:0,sgroup:subtitle,language:zh分组-hls_time 6切片6秒-muxdelay 0解决字幕不同步问题。
最后加载master.m3u8就可以播放了。
flv.js
flv.js是bilibili开源的可以用来做视频直播使用RTMP推流但是bilibili不用这个。
使用ffmpeg推流
ffmpeg -re -i video.mkv -c:v h264_videotoolbox -f flv rtmp://localhost/live/livestream 先将视频推到流媒体服务器在从流媒体服务器读取视频。
rtmp://localhost/live/livestream是对应的流媒体服务器简单可用Node-Media-Server复杂一点用srs这个可以将RTMP流转成WebRTC流。
dash.js
dash.js也是将视频切片可以直播也可以点播很多大厂都用这个比如bilibili。
WebRTC
WebRTC同样可以做视频播放但是清晰度是由浏览器控制的WebRTC是点对点的虽说不需要服务器但是需要一个信令服务器来交换信息相当于是创建了房间号另一个人加入房间那这个房间号还是需要一个服务器来传递的。
我找到免费的方案就是用peer.js。
我的思考
最初我考虑的是浏览器直接加载本地视频通过WebRTC传输给对方字幕也可以通过WebRTC传输这样没有任何额外操作而且WebRTC延迟够低。
但是我没有考虑到的一点问题是我下的视频基本都是HEVC HDR所以需要转码字幕也要转WebVTT。但是转码需要时间浏览器可以跑Wasm并且有个项目叫ffmpeg.wasm如果用浏览器解码hevc的话也行结果几百Mb的视频就在报错了根本解不了。
既然浏览器不能解码那我就本地解码推流RTMP浏览器用flv.js来播放再把视频流从浏览器通过WebRTC传输但是flv.js的video标签居然没有captureStream方法不能把视频流传递给WebRTC好家伙再想办法用canvas来播放视频再调用canvas的captureStream问题又来了不支持HDR是一方面主要糊的很。
WebRTC的最佳方案就是用SRS把RTMP转成WebRTC然后浏览器上用WebRTC播放。
经过一番思考我还是选择了hls.js的方案我的M2转码1080p的话1个小时的视频大概是6分钟还能接受主要是我的电脑是动态公网IP直接叫小伙伴访问我的本机用hls.js播放流畅不卡然后再用WebRTC传输播放的操作来做同步。
所以总是在瞎折腾里学习和成长。
最后
整理了75个JS高频面试题并给出了答案和解析基本上可以保证你能应付面试官关于JS的提问。 有需要的小伙伴可以点击下方卡片领取无偿分享
