用WebRTC在Firefox上实现YouTube直播

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/81125551 ...
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/81125551

640?wx_fmt=jpeg


本文来自Meetecho的联合创始人Lorenzo Miniero,他分享了如何通过Firefox和WebRTC进行YouTube直播。Meetecho是著名的WebRTC服务器 Janus 的出品公司。LiveVideoStack对原文进行了摘译。


文 / Lorenzo Miniero

译 / 元宝

审校 / Ant

原文 http://www.meetecho.com/blog/firefox-webrtc-youtube-kinda/


我们最近都看到了关于YouTube通过WebRTC进行直播的新闻,但它仅仅适用于您使用谷歌浏览器。火狐浏览器和Edge均不适用,对于苹果浏览器,说实话,我并不太关心.....


我需要完成哪些工作,才能让Firefox通过WebRTC发送内容,并能观看到它推送到YouTube上的直播呢?也许用一些HTML5 canvas的东西可以增加一些趣味。随着Kamailio World Dangerous Demos赛季的开幕,这成了修补它的绝佳机会,这正是我所做的!


我需要的是:

  • 一种在浏览器中捕获视频,然后以某种方式编辑它,并在WebRTC的 PeerConnection中使用它的方法;

  • WebRTC服务器从浏览器接收流;

  • 某种技术将该流进行转换,使得YouTube的直播更加圆满。


第一部分是很有趣的,因为我之前从未这样做过。或者更确切地说,在过去的几年中,我已经捕获并发布过大量的WebRTC流,但我从未在浏览器端尝试过捕获视频。我知道你可能会使用一些HTML5 canvas元素,但我从来没有使用过它,所以我现在决定这样做。还有朋友,它真的很有趣!它基本上总结为以下几个步骤:


  1. 创建一个HTML5 canvas元素来进行绘制;

  2. 通过惯用的getUserMedia来获得媒体流;

  3. 将媒体流放入一个HTML5的video视频元素中;

  4. 开始在canvas中绘制视频帧,加上其他可能会很好的元素(文字叠加,图像等);

  5. 从canvas中使用captureStream()获取新的媒体流;

  6. 使用新的媒体流作为新的PeerConnection的源;

  7. 继续在canvas上绘制,就像没有尽头一样!


听起来有很多步骤,但实际上它们很容易设置和完成。在短短几分钟内,我有了一些基本代码来允许我捕捉到我的网络摄像头,并为其添加一些叠加:在右上角加上一个logo,底部加上一个半透明条,还有一些文字的叠加。在修改代码上我也做了动态地修改,以便我可以动态地更新它们。我相信对于很多之前使用过canvas的你们来说,会嘲笑这些例子有多么的荒谬,但对于刚刚入手的我来说,这是一个很大的成就!


640?wx_fmt=png640?wx_fmt=png


不管怎样,最酷的部分是我在测试网页中进行了一些基本的视频编辑工作,以及将其用作PeerConnection源的方法。下一步是将这个WebRTC流送到服务器来让我进行播放。不足为奇的是,我使用了Janus的目的......这个想法很简单:我需要能够接收WebRTC流的东西,然后能够在其它的地方使用上它。考虑到这是我几年前开始研究Janus的关键原因之一,在几年前它是一个完美的选择!具体来说,我决定使用的是Janus VideoRoom插件。实际上,正如预期的那样,我需要一种方法来将传入的WebRTC流提供给外部组件来进行处理,在这种情况下,将其转换为YouTube 直播所期望的用于发布的格式。这个VideoRoom插件,与其集成了SFU功能的相比,还有一个很好的功能,称为“RTP转发器”,这个功能完全允许。我将在后面解释原因以及它的工作原理。


最后,我需要一些东西来将WebRTC流转换为YouTube 直播所期望的格式。正如您可能知道的,传统的方法是使用RTMP。有几种不同的软件可以帮助解决这个问题,但我选择了简单的方式,使用FFmpeg来完成工作:事实上,我并不需要任何剪辑或发布功能(这些我已经实现了),但只有一些东西可以转化为正确的协议和编解码器,这是FFmpeg非常擅长的。显然,为了实现这一点,我首先需要将WebRTC流推送到FFmpeg,在这里上述的“RTP转发器”可以提供帮助。具体来说,顾名思义,“RTP转发器”可以简单地在某处转发RTP数据包:在Janus VideoRoom的文章中,它们提供了一种方法,使用普通(或加密,如果需要的话)的RTP将来自WebRTC发布者的媒体数据包转发到一个或多个远程地址。由于FFmpeg支持普通RTP作为输入格式(使用一个SDP类型来绑定在正确的端口上并指定正在使用的音频/视频编解码器),这是使用WebRTC媒体流提供它的最佳方式!


在这一点上,我得到了我所需要的一切:

  • 浏览器作为编辑/发布软件(canvas + WebRTC);

  • Janus作为媒介(WebRTC-to-RTP);

  • FFmpeg作为转码器(RTP-to-RTMP)。


640?wx_fmt=png


也就是说,最后一步是测试所有的这些。在本地测试中,这一切都预期的工作,在测试中使用优秀的老版red5作为开源RTMP服务器,但很显然,真正的挑战是让它与YouTube的 直播一起工作。所以我进入到Meetecho 的YouTube帐户的控制面板来验证它,等待要通常的24小时才获得发布流的必要信息。这些基本上包括要连接的RTMP服务器,以及用于标识流的唯一(和秘密)密钥。


通过四处搜索,我找到了一些不错的代码片段,展示了如何使用FFmpeg流式传输到YouTube Live,我修改了脚本以使用我的源和目标信息,以便在那上面发布而不是在我的本地RTMP服务器上。令人欣喜的是,我让它开始工作了,但它并不总是完美的工作,在某些地方总有一些问题,但是对于一个demo来说,它已经运行的很好了。


640?wx_fmt=png


就是这样,真的,不需要其他“魔法”。这就可以很容易变成各种各样的服务,可以通过做一些好的canvas上的工作(我做的是非常基础的)来改进编辑部分,并使“RTP Forwarding + FFmpeg + YouTube Live授权证书”部分变得动态化(例如,在端口和帐户的使用方面),以支持多个流媒体和多个事件,但是这些细节都在那里。


是的,我知道你在想什么:我的意思是,我正在使用WebRTC进行推流,并且它最终会进入YouTube 直播中,但这不是一个直接的步骤。我所做的基本上是利用Janus的灵活性来处理WebRTC流,通过使用FFmpeg以YouTube的“Ye Olde”方式进行实际广播。无论如何,它仍然很酷!在客户端使用HTML5 canvas使得以某种方式“编辑”推流部分变得容易了,给了我相当多的创作自由。此外,使用WebRTC仍然给人一种很好的感觉!


640?wx_fmt=jpeg

相关文章
|
Web App开发 编解码 安全
在高版本谷歌Chrome浏览器中用VLC播放海康、大华RTSP实时视频完全方案
随着互联网基础设施的完善以及4G、5G等技术的大规模商用,在Chrome、Firefox、Edge等浏览器播放RTSP视频流也慢慢成为了信息化系统的行业标准。早些年还可用VLC播放器在网页中播放RTSP视频流,好景不长,2015年Chrome、Firefox等浏览器取消了对 NPAPI插件的支持,导致在高版本的Chrome等网页中播放海康威视、大华等摄像头RTSP视频流也成了奢望。
2141 0
|
Web App开发 HTML5 移动开发
谷歌浏览器Chrome播放rtsp视频流解决方案
代码中的具体参数含义,大家可以移步这里: https://wiki.videolan.org/Documentation:WebPlugin/   找半天,HTML5的可以支持RTMP 但是无法播放RTSP,flash也止步于RTMP,最后同事推荐了个开源的好东东 VLC ,请教谷歌大神之后,这货果然可以用来让各浏览器(IE activex方式,谷歌、FF)实现播放RTSP视频流,那真是极好的~~ 废话不多说了附上参考文档和案例,大家自己看吧。
10083 1
|
存储 编解码 缓存
HTTP Live Streaming直播(iOS直播)技术分析与实现
HTTP Live Streaming直播(iOS直播)技术分析与实现
152 1
|
Web App开发 JSON 监控
一次webrtc视频拉流的摸爬滚打全纪录
上周五的上午突然接到了一个需求,要在前端页面中增加的摄像头的画面预览功能,要在周一(昨天)完成,我本来以为接入视频流并不会很困难,毕竟之前也做过视频相关的需求。
616 0
|
Web App开发 缓存 网络协议
用猿大师播放器在Chrome播放多路海康威视RTSP卡顿怎么办?
猿大师播放器由于可以直接直接在Chome、Firefox等浏览器中直接读取海康威视、大华等RTSP视频流,已经广泛应用于智慧城市、智慧交通、智慧园区等领域。
346 0
用猿大师播放器在Chrome播放多路海康威视RTSP卡顿怎么办?
|
JavaScript vr&ar Android开发
24. WebVR播放器: 在豪宅里看电影
#紧接上文 消费升级的必然是体验升级,AR/VR技术是提升用户体验的方式之一。智能手机让用户可以AnyTime、AnyWhere的体验移动生活服务,再结合扁平化UI设计,在小小的手机屏幕上,实现了可以媲美PC的体验,用户已经从开始的惊艳,慢慢变成了适应,认为智能手机就应该是这样子,即我们所说的《审
5449 0
|
Web App开发 编解码 API
Safari上使用WebRTC指南
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/82948390 ...
1958 0
|
Web App开发 前端开发 JavaScript
使用WebRTC和WebVR进行VR视频通话
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/82392695 ...
1558 0
|
Web App开发 网络协议 测试技术
Google Hangouts支持使用Firefox WebRTC
自去年4月Firefox 53删除NPAPI以来,该插件一直无法被正常访问。
1418 0