时间戳

首页 > 解决方案 > Icecast 用户认证和网络音频 API

javascript - Icecast 用户认证和网络音频 API

问题描述

我运行一个 Icecast2 服务器，可以使用 Web Audio API 从我的网站获得流。我想使用 Icecast User Basic Auth 设置私有流。可以使用以下方式访问这些流：http://Username:Password@example.com/stream。

我面临的问题是，如果可能的话，我想将 URL 作为http://example.com/stream传递给 WEB Audio API 并使用 XMLHTTPRequest 进行身份验证；但是，请求未通过 CORS 预检，我不确定我是否正确设置了标头。

作为说明，我还尝试在不使用任何请求的情况下提供带有用户名和密码的 URL 并获取消息：The HTMLMediaElement passed to createMediaElementSource has a cross-origin resource, the node will output silence.所以我想我无论如何都需要发送请求。

我目前正在本地网络上对此进行测试。Icecast 服务器在 linux 上运行，我正在测试的网页在使用 IIS 的 Windows 上运行。Icecast ip192.168.1.30:6048和 IIS 开启127.0.0.1:80

下面是我的 Icecast 配置文件和我正在使用的 XMLHTTPRequest 的相关部分。我目前还在测试中在 Icecast 配置中关闭了全局标头：

<mount>
    <mount-name>/test-stream.ogg</mount-name>
    <authentication type="htpasswd">
        <option name="filename" value="/usr/share/icecast2/user_auth"/>
        <option name="allow_duplicate_users" value="0"/>
    </authentication>
    <http-headers>
        <header name="Access-Control-Allow-Credentials" value="true" />
        <header name="Access-Control-Allow-Origin" value="http://127.0.0.1" />
        <header name="Access-Control-Allow-Headers" value="Authorization" />
        <header name="Access-Control-Allow-Methods" value="GET, OPTIONS" />
    </http-headers>
</mount>

window.onload = function() {
    let username = "User1";
    let password = "Pass1";

    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://192.168.1.30:6048/test-stream.ogg', true);
    xhr.withCredentials = true;
    xhr.setRequestHeader('Origin','http://127.0.0.1');
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
                
    xhr.onload = function() {
        // Do Stuff...
    }
    xhr.send(null);
}

标签： javascripticecast

解决方案

尝试在 Icecast 配置文件的顶部添加它（这会启用 * CORS）

<icecast>
    <http-headers>
        <header name="Access-Control-Allow-Origin" value="*" />
        <header name="Access-Control-Allow-Headers" value="Origin, Accept, X-Requested-With, Content-Type, If-Modified-Since" />
        <header name="Access-Control-Allow-Methods" value="GET, OPTIONS, HEAD" />
    </http-headers>
    <limits>
...

推荐阅读