javascript - Twilio-Video：没有声音/没有音频但视频正在工作

Question

我正在尝试弄清楚如何使用 Twilio-Video 创建一个 Go 房间。视频连接效果很好，所以我猜这个令牌是有效的。但是没有音频。在两个方向。相关的JS如下。

我已经浏览了各种指南和相关问题，但我无法弄清楚我哪里出错了。我认为令牌也是有效的，因为视频连接正在工作。在我测试的设备上，其他视频聊天应用程序运行良好。我什至测试了不同的浏览器，但没有任何成功。

更新 1
我尝试使用 --autoplay-policy=no-user-gesture-required 启动 Chrome 以测试自动播放策略是否存在问题。不幸的是，问题仍然存在。

更新 2
重新启动我的测试设备，但没有任何成功。

更新 3
测试https://networktest.twilio.com/和https://webrtc.github.io/samples/src/content/devices/input-output/成功。

浏览
器日志 如果我和同伴加入并离开视频通话，浏览器日志。

[3998:82691:0530/053811.743187:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[3998:82691:0530/053812.372684:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[3998:82691:0530/053833.884230:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[3998:82691:0530/053833.902541:ERROR:webrtc_video_engine.cc(3350)] Absent receive stream; ignoring clearing encoded frame sink for ssrc 0
[3998:47363:0530/053835.045916:ERROR:turn_port.cc(1855)] Received TURN CreatePermission error response, code=403; pruned connection.
[3998:47363:0530/053835.046129:ERROR:turn_port.cc(1855)] Received TURN CreatePermission error response, code=403; pruned connection.
[3998:82691:0530/053848.634515:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[3998:82691:0530/055416.022796:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[3998:82691:0530/055416.620048:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[3998:82691:0530/055438.608201:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[3998:82691:0530/055438.615202:ERROR:webrtc_video_engine.cc(3350)] Absent receive stream; ignoring clearing encoded frame sink for ssrc 0
[3998:47363:0530/055439.651049:ERROR:turn_port.cc(1855)] Received TURN CreatePermission error response, code=403; pruned connection.
[3998:82691:0530/055458.482652:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[4192:84227:0530/060006.499133:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[4192:84227:0530/060007.109077:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[4306:47107:0530/061047.578035:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[4306:47107:0530/061048.547660:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[4316:84227:0530/061145.241086:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[4316:84227:0530/061145.792233:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[4316:84227:0530/061153.197745:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[4316:84227:0530/061153.206282:ERROR:webrtc_video_engine.cc(3350)] Absent receive stream; ignoring clearing encoded frame sink for ssrc 0
[4316:83971:0530/061154.219117:ERROR:turn_port.cc(1855)] Received TURN CreatePermission error response, code=403; pruned connection.
[4316:84227:0530/061215.332750:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.
[4316:84227:0530/061215.926683:ERROR:audio_rtp_receiver.cc(88)] AudioRtpReceiver::OnSetVolume: No audio channel exists.

JS

let room;

// Called after page load.
const joinRoom = async (token, roomName) => {

    const Video = Twilio.Video;

    const localTracks = await Video.createLocalTracks({
        audio: true,
        video: { width: 1280, height: 720 },
    });
    try {
        room = await Video.connect(token, {
            name: roomName,
            tracks: localTracks,
        });
    } catch (error) {
        console.log(error);
    }

    const localMediaContainer = document.getElementById("local-media-container");
    localTracks.forEach((localTrack) => {
        localMediaContainer.appendChild(localTrack.attach());
    });

    try {
        room.participants.forEach(onParticipantConnected);
        room.on("participantConnected", onParticipantConnected);
        room.on("participantDisconnected", onParticipantDisconnected);
    } catch (error) {
        console.log(error);
    }

    // Mute audio button
    const muteBtn = document.getElementById('mute-btn');
    const unmuteBtn = document.getElementById('unmute-btn');
    muteBtn.onclick = function(event) {
        try {
            room.localParticipant.audioTracks.forEach(track => {
                track.track.disable();
            });
        } catch (error) {
            console.log(error);
        }
        muteBtn.classList.add('d-none');
        unmuteBtn.classList.remove('d-none');
    };
    unmuteBtn.onclick = function(event) {
        try {
            room.localParticipant.audioTracks.forEach(track => {
                track.track.enable();
            });
        } catch (error) {
            console.log(error);
        }
        unmuteBtn.classList.add('d-none');
        muteBtn.classList.remove('d-none');
    };

    // Stop video button
    const stopVideoBtn = document.getElementById('stop-video-btn');
    const startVideoBtn = document.getElementById('start-video-btn');
    stopVideoBtn.onclick = function(event) {
        try {
            room.localParticipant.videoTracks.forEach(track => {
                track.track.disable();
            });
        } catch (error) {
            console.log(error);
        }
        stopVideoBtn.classList.add('d-none');
        startVideoBtn.classList.remove('d-none');
    };
    startVideoBtn.onclick = function(event) {
        try {
            room.localParticipant.videoTracks.forEach(track => {
                track.track.enable();
            });
        } catch (error) {
            console.log(error);
        }
        startVideoBtn.classList.add('d-none');
        stopVideoBtn.classList.remove('d-none');
    };
};

const onParticipantDisconnected = (participant) => {
    const participantDiv = document.getElementById("peer-media-container");
    participantDiv.innerHTML = '<div class="d-flex flex-row w-100 h-100 align-items-center justify-content-center text-center text-white">Call ended.</div>';
};

const onParticipantConnected = (participant) => {
    const participantDiv = document.getElementById("peer-media-container");

    const trackSubscribed = (track) => {
        participantDiv.innerHTML = "";
        participantDiv.appendChild(track.attach());
    };
    participant.on("trackSubscribed", trackSubscribed);

    participant.tracks.forEach((publication) => {
        if (publication.isSubscribed) {
            trackSubscribed(publication.track);
        }
    });

    const trackUnsubscribed = (track) => {
        track.detach().forEach((element) => element.remove());
    };

    participant.on("trackUnsubscribed", trackUnsubscribed);
};

const onLeaveButtonClick = (event) => {
    room.localParticipant.tracks.forEach((publication) => {
        const track = publication.track;
        track.stop();
        const elements = track.detach();
        elements.forEach((element) => element.remove());
    });
    room.disconnect();
    close();
};

标签： javascripttwiliowebrtctwilio-apitwilio-video