如何嵌入YouTube直播聊天 [英] How to embed youtube livestream chat
问题描述
我正在尝试将youtube实时聊天嵌入到我网站上的网页上，
I'm trying to embed a youtube livestream chat onto a webpage on my website,
<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/live_chat?v=hHW1oY26kxQ&embed_domain=localhost" width="480"></iframe>
我正在尝试此操作，但如果尝试进行嵌入操作，则聊天根本不会显示
I'm trying this, but the chat doesn't show up at all, if tried doing embeded domain using a real domain I own, but that doesn't work either.
推荐答案
在我看来， YouTube禁用了该功能，无法在外部网站上嵌入实时聊天，但随后却忘记了更新文档。或者，有一个漏洞破坏了此功能，而YouTube尚未修复。
It seems to me that YouTube disabled the feature to embed a live chat on external websites, but then forgot to update the documentation. Or alternatively, there is a bug that broke this feature and did not yet get fixed by YouTube.
YouTube知识库仍然说，仍然可以使用您发布的URL（参见此处，在嵌入实时聊天部分。）
The YouTube knowledge base still says that embedding a live chat iframe into an external website is still possible, using a URL like the one you posted (see here, in section "Embed Live chat").
但是，尝试并查看时进入浏览器控制台，您将看到以下消息：
However, when trying that and looking into the browser's console, you will see a message like this:
拒绝显示' https://www.youtube.com/live_chat?v=12345&embed_domain=example.com
您还可以看到 https：//www.youtube.com/live_chat？... 请求的响应时使用loper工具。
You can also see that x-frame-options: SAMEORIGIN header in the "Network" tab of the browser's developer tools when looking at the response to the https://www.youtube.com/live_chat?… request.
这意味着，除非嵌入在youtube.com本身上，否则YouTube不希望浏览器将其嵌入到iframe中。 （在YouTube本身上，此嵌入代码仍然有效：当您检查YouTube当前正在流式传输的任何实时视频的源代码时，您会发现其中的实时聊天窗口是由相同的 / live_chat组成的？… 请求，在iframe中。）
This means that YouTube does not want a browser to embed this into an iframe except when embedded on youtube.com itself. (On YouTube itself, this embed code still works: when you inspect the source code of any currently streaming live video on YouTube, you will find that the live chat window there is made with that same /live_chat?… request, in an iframe.)
此功能已被删除的其他指示：
Additional indications that this feature was removed:
-
YouTube文档中提到：
The YouTube documentation mentions:
实时聊天模块仅存在于YouTube观看页面上—它不跟随嵌入式播放器。 （源）
我认为这是文档的新部分，并且下方的嵌入实时聊天部分已经过时。
I believe that's the new part of the documentation, and the section "Embed live chat" further down is outdated.
本教程从2016年开始使用URL格式在底部附近嵌入了一个示例实时聊天，它现在显示相同的拒绝在框架中显示[…]，因为它将'X-Frame-Options'设置为'sameorigin'。假设这在2016年行之有效，那么YouTube方面一定有所改变。
This tutorial from 2016 uses the documented URL format to embed an example live chat near the bottom, and it now shows the same "Refused to display […] in a frame because it set 'X-Frame-Options' to 'sameorigin'." Assuming that this worked in 2016, something must have changed on YouTube's side.
此 Reddit线程讲述了某人的嵌入式实时聊天是如何在2018年9月上旬突然停止工作的-不久这个问题就被提出了。
This Reddit thread tells how somebody's embedded live chat suddenly stopped working in early September 2018 – so shortly before this question got asked.
-
您可以使用YouTube Livestream API，特别是 LiveChatMessages 端点，用于获取和创建聊天消息。可能有开源库可以帮助您解决此问题。到目前为止，我发现了这一个（可以显示但不能创建聊天消息）。
You could use the YouTube Livestream API, in particular the LiveChatMessages endpoint, to get and create chat messages. There are probably open source libraries around to help with this. So far, I found this one (able to display but not create chat messages).
您可以嵌入自己的聊天室，安装在自己的服务器上或云托管的实时流聊天解决方案。此解决方案还可以提供YouTube实时聊天所不提供的功能，例如允许匿名访问者发帖。
You could embed your own chat, either installed on your own server or a cloud-hosted livestream chat solution. This solution can also provide features that YouTube live chat does not provide, such as allowing anonymous visitors to post.
您可以反向代理https://www.youtube.com/live_chat?… URL，转发YouTube的响应，但删除了X-Frame-Options标头。
You could reverse proxy the https://www.youtube.com/live_chat?… URL, forwarding YouTube's response but with the X-Frame-Options header removed.
如果只需要一台或几台计算机的解决方案，则可以使用浏览器扩展程序从YouTube响应中删除X-Frame-Options标头。请参阅此问题。
If you only need a solution for one or a few computers, you could use a browser extension to remove the X-Frame-Options header from YouTube's response. See this question.
这篇关于如何嵌入YouTube直播聊天的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
