记录－交流－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'流混合是一种将多个音频或视频流组合到云上的一个流技术，广泛应用于直播、在线教育、音频室直播等场景。开发人员可以通过播放混合流来查看屏幕并听到聊天室中所有成员的声音，无需管理聊天室中的每个流。
流混合是一种将多个音频或视频流组合到云上的一个流技术，广泛应用于直播、在线教育、音频室直播等场景。开发人员可以通过播放混合流来查看屏幕并听到聊天室中所有成员的声音，无需管理聊天室中的每个流。
流混合之所以广泛应用于音频和视频领域，是因为它可以给开发人员带来以下好处。
在大型直播或在线教育场景中，如果多方在一个房间内共同主持，房间内的所有用户需要播放多条流。使用流混合技术，只需要播放一个流。即在双方托管的情况下，费用可减半。在多方托管的情况下，成本可以降低(n - 1)/n。如果使用审查机制（比如淫秽内容审核），成本也可以降低(n - 1) /n，因为只需要查看一个流的图像。
当多个主机共同托管并使用流混合时，观众只需播放混合流并进行渲染，而不是播放和渲染多个流。
如果没有流混合，我们无法在多方共同托管方案中将直播转发到 Facebook、YouTube 和其他直播流平台。因为这些平台只有一个 RTMP 地址，我们无法将多个流转发到一个地址。
对于 iPhone 用户，Safari 浏览器不支持同时播放多个音频文件。当播放多个流时，就只能播放一个流，流混合可以解决这个问题。由于手机性能和浏览器性能的限制，手机上的大多数Web浏览器一般可以播放最多四个流。借助流混合技术，可以播放的最大流数会有很大的增加，并且无需额外的带宽和性能消耗。
如下图所示，当一个聊天室中的多个用户发布流时，服务器会根据布局配置将两个流合并为一个流，这样观众就可以播放混合流查看用户 A 和用户 B 的屏幕。
a) …
~~~~~~~
首先要阐明所谓的AVC其实就是H.264标准，是由ITU-T和ISO/IEC组成的联合视频组（JVT，Joint Video Team）一起开发的，ITU-T给这个标准命名为H.264（以前叫做H.26L），而ISO/IEC称它为MPEG-4 高级视频编码（Advanced Video Coding，AVC）它定位于覆盖整个视频应用领域，包括：低码率的无线应用、标准清晰度和高清晰度的电视广播应用、Internet上的视频流应用，传输高清晰度的DVD视频以及应用于数码相机的高质量视频应用等等。
从低到高分别为：Baseline、Main、High。
Baseline（最低Profile）级别支持I/P 帧，只支持无交错（Progressive）和CAVLC，一般用于低阶或需要额外容错的应用，比如视频通话、手机视频等；
Main（主要Profile）级别提供I/P/B 帧，支持无交错（Progressive）和交错（Interlaced），同样提供对于CAVLC 和CABAC 的支持，用于主流消费类电子产品规格如低解码（相对而言）的mp4、便携的视频播放器、PSP和Ipod等；
High（高端Profile，也叫FRExt）级别在Main的基础上增加了8x8 内部预测、自定义量化、无损视频编码和更多的YUV 格式（如4：4：4），用于广播及视频碟片存储（蓝光影片），高清电视的应用。
AVC 的规格主要是针对兼容性的，不同的规格能在相同级别上的平台应用。至于Baseline@L x.x、Main@L x.x、High@L x.x形式则是在不同级别下的码流级别，数值越大码流就越大，更耗费资源。所以就码流而言High@L3.0<High@L4.0<High@L5.1。
H.264有四种画质级别,分别是BP、EP、MP、HP：
1、BP-Baseline Profile：基本画质。支持I/P 帧，只支持无交错（Progressive）和CAVLC；
2、EP-Extended profile：进阶画质。支持I/P/B/SP/SI 帧，只支持无交错（Progressive）和CAVLC；
3、MP-Main profile：主流画质。提供I/P/B 帧，支持无交错（Progressive）和交错（Interlaced），也支持CAVLC 和CABAC 的支持；
4、HP-High
在本文中，我们展示了 7 种不同的技术方法，用于在浏览器的网页上显示来自支持 RTSP 的 IP 摄像机的视频流。
通常，浏览器不支持 RTSP，因此使用中间服务器为浏览器转换视频流。
浏览器不支持 RTMP 协议，但猜猜谁支持？忠实的老版Flash Player，虽然不支持所有浏览器，但运行良好，因此可以显示视频流。
播放器的代码基于 Action Script 3 构建，如下所示：
|
1
2
3
|
var nc:NetConnection = nc.connect("rtmp://192.168.88.59/live",obj);var subscribeStream:NetStream = |
实习期间有个需求，需要前端调用算法模型，封装成npm包，供视频会议组去用，从而在视频会议中实现背景虚化，背景替换功能。后续可能会进一步加入一些好玩的功能，如面部特效(胡子，一字眉)，头发颜色替换等。
实现效果应类似于下面这样
腾讯会议界面：
为了给需求方演示，先采用google的TensorFlow.js的 BodyPix 模型做了一个小demo，先实现背景虚化和背景替换功能，模型的效果较为满意，显示画面流畅。
TensorFlow.js 是一个 JavaScript 库。 我们可以借助于它，来直接用 JavaScript 去创建新的机器学习模型和部署现有模型。对于前端人员入门机器学习十分友好。
TensorFlow.js 提供了很多开箱即用的预训练模型(见下图):
这里选用了图像处理类别里面的BodyPix模型
这是BodyPix的官方演示demo https://storage.googleapis.co...，
demo里的功能对我们的需求来说有些过于复杂，也没有背景替换功能。因此，我自己写了一个针对于背景虚化，背景替换场景的demo。
drawBokehEffect方法；模型没有现成的背景替换的接口，用canvas的绘制方法对模型的toMask方法返回的遮罩对象 WebTransport 是WebRTC体系下的一套浏览器API,提供低延迟,client和server之间双向通信的能力。 核心的能力点包括：
相关的规范如下：
在浏览器中可以通过URL 来实例化一个WebTransport 实例，比如:
const url = ‘quic-首先需要手动搭建RTMP流服务器，搭建过程可以借鉴我的另外一篇文章 传送门 的第六章节。
打开OBS软件，新建 场景->新建 来源。
在控件位置有个设置，选择服务，填写服务器及串流密钥，点击确定
在控件位置，点击开始推流，就OK了
接下来使用VLC软件进行测试下效果
输入网络URL，这块跟上图设置的一致
看看效果
搞定！！！
这个要稍微复杂一点，需要借助OBS的插件去实现该功能。软件地址附上：https://github.com/iamscottxu/obs-rtspserver/releases
另外，OBS还有很多插件，有兴趣的可以去深入学习，具体可以参考
近期评论