记录－交流－Web开发知识分享
悄悄地，在支持页面上没有任何公告或更新的情况下，Google 修复了 Chrome 中的一个对视频流媒体行业具有重大影响的错误：终于启用了对 HEVC/H.265 视频内容的自适应流媒体的支持！
感谢 Bitmovin（Humble Brag，开个玩笑），我们在大约 6 年前提交了一份关于这件事的错误报告。经过“小”的等待，我们得到了 Chrome 104 现已正式支持的答案，并且经过一番调查还发现它默认为所有平台的 Chrome 105 启用，准备在野外使用。 …
最近需要搭建一个在线课堂的直播平台，考虑到清晰度和延迟性，我们一致认为使用 WebRTC 最合适。
原因有两点：首先是“点对点通信”非常吸引我们，不需要中间服务器，客户端直连，通信非常方便；再者是 WebRTC 浏览器原生支持，其他客户端支持也很好，不像传统直播用 flv.js 做兼容，可以实现标准统一。
然而令我非常尴尬的是，社区看了好几篇文章，理论架构写了一堆，但没一个能跑起来。WebRTC 里面概念很新也很多，理解它的通信流程才是最关键，这点恰恰很少有描述。
于是我就自己捣鼓吧。捣鼓了几天，可算是整明白了。下面我结合自己的实践经验，按照我理解的关键步骤，带大家从应用场景的角度认识这个厉害的朋友 —— WebRTC。…
现在最低建议720p视频的比特率以上，h.264编码，2M比特率合适；1080p就4M足够可以自己拿个高清视频，分别用不同码率转换，再对比画质。最普遍使用的是：h.264编码，1080P，2.5M比特率以上。总结：【h.264编码，比特率2.5M（最大要到4M就行了），最大比特率4M（在目标上加2M就行），大多平台都以是蓝光了。】
1、比特率高过原视频不会有一点高过原视频的。一搬都会选低点把文件压小点。2、1080P比特率1M有失真感电脑端观看，用2M看不出失真，可把比特率制调到4M最佳。以下是某平台比特率上传要求：
启动流媒体服务看起来很复杂，尤其是当您不熟悉为您的视频平台选择正确的编码器设置时。如果您是编码和流媒体领域的新手，那么广泛的选项会让您感到困惑，特别是 CBR 和 VBR 等术语。那么，什么是 CBR 和 VBR 编码？哪个更好——CBR 与 VBR？放松！喝杯咖啡，在接下来的几分钟内，您将得到所有问题的答案。…
/LiveSwitch.io%20(v2)%20-%20Resources/LiveSwitch.io%20(v2)%20-%20Docs/LiveSwitch.io%20(v2)%20-%20Ultimate%20WebRTC%20Guide/webrtc-icon.svg){kind=icon}
什么是 WebRTC？Web 实时通信 (WebRTC) 既是一个开源项目，也是一个规范，它支持实时媒体通信，如语音、视频和数据在浏览器和设备之间的本地传输。这使用户无需复杂的插件或额外的硬件就可以在他们的主要 Web 浏览器中进行通信。
WebRTC 项目于 2011 年 5 月由 Google 首次宣布，作为开发一套通用协议的一种手段，用于在浏览器、移动平台和物联网设备中启用高质量的 RTC 应用程序。当时，Flash 和插件是提供实时通信的唯一方法。两年后，经过大量工作，Chrome 和 Firefox 之间建立了第一个跨浏览器视频通话。随着越来越多的组织增加对规范的支持，开发者社区对 WebRTC 的支持也随之飙升。今天，WebRTC 在 Chrome、Firefox、Safari、Edge、Android 和 iOS 中本地（不同程度地）可用，并且是一种广受欢迎的视频通话工具。…
Web 平台已经允许 Web 应用程序捕获当前选项卡的视频轨道。它现在附带 Region Capture，这是一种裁剪这些视频轨道的机制。Web 应用程序将当前选项卡的一部分指定为其感兴趣的区域，并且浏览器会裁剪该区域之外的所有像素。
Web 应用程序以前可以“手动”裁剪视频轨道。也就是说，Web 应用程序可以直接操作每一帧。这既不稳健也不高效。区域捕获解决了这些缺点。Web 应用程序现在可以指示浏览器代表它完成工作。…
Web 上实现直播推流的方式主要有两种，一种是通过 Flash 推流，一种是通过 WebRTC 推流。目前主流浏览器已经放弃了对 Flash 的支持，Chrome 从 88 版本开始彻底禁用了 Flash。因此，使用 WebRTC 进行直播推流成为了 Web 上最好的选择。
通过 WebRTC 可以让网站在不借助中间媒介的情况下，建立浏览器和浏览器、浏览器和服务器之间的点对点连接，实现视频流和音频流或者其他任意数据的传输。
用在直播的场景下，通过 WebRTC 推流，用户不需要借助 OBS 等推流软件，打开网页就可以发起直播。…
ffmpeg rtsp流转m3u8流
ffmpeg -rtsp_transport tcp -i "rtsp://admin:admin123@192.168.1.123:554/live/av0" -fflags flush_packets -max_delay 1 -an -flags -global_header -hls_time 1 -hls_list_size 3 -vcodec copy -s 216x384 -b 1024k -y test.m3u8
ffmpeg rtsp流转发
ffmpeg -rtsp_transport tcp -i "rtsp://admin:admin123@192.168.1.123:554/live/av0" -vcodec h264 -acodec aac -f …
The leavepictureinpicture event is fired when the HTMLVideoElement leaves picture-in-picture mode successfully.
This event is not cancelable and does not bubble.
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener('leavepictureinpicture'
近期评论