JSFiddle - React, Tailwind, and code Playground

by MarijnS95

HTML

<audio id="audio" src="<!!!!!!!!ADD AN AUDIO FILE HERE!!!!!!!!!!>" autoplay controls></audio>
<br />
<audio id="play" autoplay controls></audio>

JavaScript

addEventListener('load', init);

function init() {
    window.audio = document.getElementById('audio');
    window.play = document.getElementById('play');
    window.context = new webkitAudioContext();
    window.source = context.createMediaElementSource(audio);
    window.streamer = context.createMediaStreamDestination();
    source.connect(streamer);
    pcLocal = new webkitRTCPeerConnection(null);
    pcLocal.onsignalingstatechange = function () {
        console.log('PC signaling state changed to:', pcLocal.signalingState)
    }
    pcRemote = new webkitRTCPeerConnection(null);
    pcRemote.onsignalingstatechange = function () {
        console.log('PC signaling state changed to:', pcRemote.signalingState)
    }
    pcLocal.addEventListener('icecandidate', function (event) {
        if (!event || !event.candidate) return;
        var candidate = event.candidate;
        console.log('local', candidate);
        pcRemote.addIceCandidate(new RTCIceCandidate(candidate));
    });
    pcRemote.onicecandidate = function (event) {
        if (!event || !event.candidate) return;
        var candidate = event.candidate;
        console.log(candidate);
        pcLocal.addIceCandidate(new RTCIceCandidate(candidate));
    }
    pcLocal.addStream(streamer.stream);
    pcLocal.createOffer(function (sdp) {
        pcLocal.setLocalDescription(sdp);
        pcRemote.setRemoteDescription(sdp);
        pcRemote.createAnswer(function (sdp) {
            pcRemote.setLocalDescription(sdp);
            pcLocal.setRemoteDescription(sdp);
        }, null, {
            'mandatory': {
                'OfferToReceiveAudio': true,
                'OfferToReceiveVideo': false
            }
        });
    }, null, {
        'mandatory': {
            'OfferToReceiveAudio': true,
            'OfferToReceiveVideo': false
        }
    });
    pcRemote.onaddstream = function (e) {
        play.src = webkitURL.createObjectURL(e.stream);
        console.log(e.stream);
       ...