Javascript 如何从chrome扩展流式播放音频

我曾尝试使用WebRTC为流媒体音频点对点扩展chrome，但问题是，由于该扩展将在一段时间内处于活动状态，我尝试将对等连接数据和描述作为本地发送以获取本地音频，我对远程音频也做了同样的操作

async function addStreamtoPeerConnection(pc) {
    await chrome.extension.sendMessage({ type: "local", pc: pc });
}

// Remote  audio which is created after the above function and the connection was initialized
friends[pub].pc.ontrack = (event) => {
        console.log("ontrack", event);
        if (remoteAudio.src !== event.streams) {
            //createResonanceScence(event.streams[0]);

            chrome.extension.sendMessage({ type: "remote", event: event });
            console.log("received remote stream", event);
        }
    };

在收到请求后，后台脚本应该创建音频元素并从后台播放它们

document.write(
    "<div class='audioComponent'><audio class='localAudio'></audio><audio class='remoteAudio'></audio></div>"
);
var localAudio = document.getElementsByClassName(".localAudio");
var remoteAudio = document.getElementsByClassName(".remoteAudio");
chrome.runtime.onMessage.addListener((request, sender, response) => {
    console.log("Req:", request);
    if (request.type == "local") {
        var constraints = { audio: true, video: false };
        navigator.mediaDevices
            .getUserMedia(constraints)
            .then((userMediaStream) => {
                userMediaStream.getTracks().forEach((track) => {
                    request.pc.addTrack(track, userMediaStream);
                });
                localAudio.src = userMediaStream;
                localAudio.onloadedmetadata = function () {
                    localAudio.play();
                    console.log(">>>>LOCAL AUDIO HERE<<<<<");
                    localAudio.muted = true;
                };
                localAudio.attr("disabled", true);
            });

        console.log(document.getElementsByClassName(".audioComponent"));
    }
    if (request.type == "remote") {
        remoteAudio.muted = true;
        createResonanceScence(request.event.streams);
        remoteAudio.src = request.event.streams;
        remoteAudio.onloadedmetadata = function () {
            remoteAudio.play();
            console.log("metadata loaded");
        };
        document.getElementsByClassName(".audioComponent").append(remoteAudio);
    }
});

document.write(
""
);
var localAudio=document.getElementsByClassName（“.localAudio”）；
var remoteAudio=document.getElementsByClassName（“.remoteAudio”）；
chrome.runtime.onMessage.addListener（（请求、发送方、响应）=>{
日志（“请求：”，请求）；
if（request.type==“本地”）{
var约束={audio:true，video:false}；
navigator.mediaDevices
.getUserMedia（限制条件）
。然后（（userMediaStream）=>{
userMediaStream.getTracks（）.forEach（（曲目）=>{
request.pc.addTrack（track，userMediaStream）；
});
localAudio.src=userMediaStream；
localAudio.onloadedmetadata=函数（）{
localAudio.play（）；
console.log（“>>>>>本地音频在此localAudio以文档的形式返回数组。getElementsByClassName始终返回数组。尝试用localAudio[0]替换localAudio。它修复了localAudio.play不是函数的一个错误，但仍然会产生DomeException错误，这可能是因为navigator.mediaDevices中的承诺