如何嵌入youtube实时流媒体聊天

Question

我正试着在我网站的网页上嵌入youtube直播聊天，

<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/live_chat?v=hHW1oY26kxQ&embed_domain=localhost" width="480"></iframe>

我正在尝试这样做，但聊天根本不显示，如果尝试使用我拥有的真实域名做嵌入域名，但这也不起作用。

Answer 1

在我看来，YouTube禁用了功能以在外部网站上嵌入实时聊天，但随后忘记了更新文档。或者，可能有一个未修复的bug破坏了这个特性。

2021更新:聊天嵌入再次生效。使用与之前相同的语法。根据a helpful comment below。

详细信息

YouTube知识库仍然说，仍然可以使用您发布的网址(see here，在“嵌入实时聊天”部分)将实时聊天iframe嵌入到外部网站中。

但是，当尝试这样做并查看浏览器的控制台时，您将看到如下消息：

拒绝在帧中显示'https://www.youtube.com/live_chat?v=12345&embed_domain=example.com‘，因为它将'X- frame -Options’设置为'sameorigin‘。

在查看对x-frame-options: SAMEORIGIN请求的响应时，您还可以在浏览器的开发人员工具的“网络”选项卡中看到该https://www.youtube.com/live_chat?…标头。

这意味着除非嵌入到youtube.com本身，否则YouTube不希望浏览器将其嵌入到iframe中。(在YouTube本身上，这个嵌入代码仍然有效:当你在YouTube上检查任何当前流媒体直播视频的源代码时，你会发现那里的实时聊天窗口是用同样的/live_chat?…请求在iframe中创建的。)

此功能已被删除的其他指示：

• YouTube文档提到：

实时聊天模块仅存在于YouTube观看页面上-它不关注嵌入式播放器。(source)

我相信这是文档的新部分，“嵌入实时聊天”这一部分已经过时了。

2016年的

• This tutorial使用文档中的URL格式在底部嵌入了一个示例实时聊天，现在显示了相同的“拒绝在帧中显示…，因为它将'X- frame -Options‘设置为’sameorigin‘”。假设这在2016年奏效，那么YouTube方面肯定发生了一些变化。

• 这篇Reddit thread讲述了某人的嵌入式实时聊天在2018年9月初突然停止工作-所以就在这个问题被问到之前不久。

替代方案

• 您可以使用YouTube Livestream API，特别是LiveChatMessages端点来获取和创建聊天消息。可能有开源库可以帮助你做到这一点。到目前为止，我找到了this one (可以显示聊天消息，但不能创建聊天消息)。

• 您可以嵌入您自己的聊天工具，安装在您自己的服务器或a cloud-hosted livestream chat solution上。此解决方案还可以提供YouTube实时聊天不提供的功能，例如允许匿名访问者发帖。

• 你可以反向代理YouTube的网址，转发https://www.youtube.com/live_chat?…的回复，但去掉X-Frame-Options头。

• 如果您只需要一台或几台计算机的解决方案，您可以使用浏览器扩展来删除YouTube响应中的X-Frame-Options头文件。请参阅this question.

Answer 2

这似乎与this change to iframes的引入有关，至少在我遇到这个问题时是这样。

为了解决这个问题，我建议使用如下脚本：

<script>  
 let frame = document.createElement("iframe");  
 frame.referrerPolicy = "origin";  
 frame.src = "https://www.youtube.com/live_chat?v=VIDEO_ID&embed_domain=" + window.location.hostname;  
 frame.frameBorder = "0";  
 frame.id = "chat-embed";  
 let wrapper = document.getElementById("chat-embed-wrapper");  
 wrapper.appendChild(frame); 
</script>

其中chat-embed-wrapper是id为chat-embed的iframe的父对象，VIDEO_ID (在frame.src赋值中)是目标视频的id。您必须针对您的设置稍作修改，但这是一般情况下的解决方案。

Answer 3

Angular的简单解决方案：

HTML部件：

  <iframe frameborder="0" height="470" [src]="url" width="780"></iframe>

TS部分：

constructor(private sanitizer: DomSanitizer) {}

ngOnInit() {
  this.url = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/live_chat?v=[YOUR_LIVESTREAM_ID]&embed_domain=' + window.location.hostname);
}