如何嵌入 youtube 直播聊天

Posted 2023-02-24

【中文标题】如何嵌入 youtube 直播聊天

【英文标题】：How to embed youtube livestream chat

【发布时间】：2019-02-27 07:32:33

【问题描述】：

我正在尝试将 youtube 直播聊天嵌入到我网站上的网页中，

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

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

【问题讨论】：

嵌入 YouTube 实时聊天功能但不能在移动设备上运行：***.com/a/59349138/470749

我可以确认 127.0.01（无端口）工作，但我没有尝试 localhost。此外，iframe 可以在 Safari 的 Ipad 上运行，但不能在 ios 或 android 上的 Chrome 上运行。

如果您请求网站的桌面版本而不是移动版本，这将在 iPad Chrome（当前）上运行。然而，这可能并不完全适用于所有网站。

【参考方案1】：

这似乎与 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。您必须针对您的设置稍作修改，但这是一般情况下的解决方案。

【参考方案2】：

在我看来，YouTube 禁用了该功能以在外部网站上嵌入实时聊天，但后来忘记更新文档。或者，可能存在破坏此功能的未修复错误。

2021 年更新：聊天嵌入再次起作用。使用与以前相同的语法。根据a helpful comment below。

详情

YouTube 知识库仍然表示，仍然可以使用您发布的 URL（see here，在“嵌入实时聊天”部分）将实时聊天 iframe 嵌入到外部网站。

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

拒绝在框架中显示“https://www.youtube.com/live_chat?v=12345&embed_domain=example.com”，因为它将“X-Frame-Options”设置为“sameorigin”。

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

这意味着 YouTube 不希望浏览器将其嵌入到 iframe 中，除非嵌入到 youtube.com 本身。 （在 YouTube 本身上，此嵌入代码仍然有效：当您检查 YouTube 上任何当前流式传输的实时视频的源代码时，您会发现那里的实时聊天窗口是使用相同的 /live_chat?… 请求在 iframe 中创建的。）

此功能已被删除的其他迹象：

YouTube 文档提到：

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

我认为这是文档的新部分，而更下方的“嵌入实时聊天”部分已过时。

This tutorial 从 2016 年开始使用记录在案的 URL 格式在底部附近嵌入示例实时聊天，现在它显示相同的“拒绝在框架中显示 [...]，因为它将 'X-Frame-Options' 设置为‘同源’。”假设这在 2016 年有效，那么 YouTube 方面肯定发生了一些变化。

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

替代方案

您可以使用 YouTube Livestream API，尤其是 LiveChatMessages 端点来获取和创建聊天消息。周围可能有开源库来帮助解决这个问题。到目前为止，我找到了this one（可以显示但不能创建聊天消息）。

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

您可以反向代理 https://www.youtube.com/live_chat?… URL，转发 YouTube 的响应，但删除 X-Frame-Options 标头。

如果您只需要一台或几台计算机的解决方案，您可以使用浏览器扩展程序从 YouTube 的响应中删除 X-Frame-Options 标头。见this question。

【讨论】：

2021 更新：在外部网站中嵌入 youtube 聊天似乎又可以工作了。关键是在嵌入 iframe URL：?embed_domain=www.your-external-domain.com 中包含 embed_domain URL 查询参数。请参阅此答案 support.google.com/youtube/answer/2524549?hl=en 中的文档。

还要注意 iframe src 属性中的印刷引号。这些 ”。我从带有这些引号的网站复制/粘贴，它坏了，导致我进入这个 ***。错误：<iframe width=”350px” height=”500px” src=”embed-url-in-here” ></iframe>。不过，引号是问题所在，而不是 X-Frame-Options 标头。一旦我使用 ASCII 引号，它就可以正常工作。这些“。

【参考方案3】：

我可以确认这确实有效。但是，当embed_domain 的值为“example.com”时，我收到了相同的 X 帧错误，即使页面的 url 以“https://www.example.com”开头。即确保值匹配window.location.hostname。如果您没有规范的主机重定向工作，Addison Crump 的解决方法可以解决这个问题。

【参考方案4】：

我不确定你最终是否能做到这一点？我们已经设法使用这个 iframe 在我们的网站上运行它，希望它对您有所帮助：

<iframe src="https://www.youtube.com/live_chat?v=YourVidCodeHere&embed_domain=www.YourDomainHere.com" ></iframe> 

希望对您有所帮助：) PS 它不适用于移动设备（YouTube 表示他们已从移动设备中删除了此功能），但它可以在桌面和标签页上运行。

最好的祝愿。

【参考方案5】：

Angular 的简单解决方案：

html 部分：

  <iframe frameborder="0"  [src]="url" ></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);