javascript - 读取音频流答案

【问题标题】：javascript - Read audio streamjavascript - 读取音频流
【发布时间】：2020-12-06 11:55:03
【问题描述】：

client.html

<!doctype html>
<html>
    <head>
        <script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
    </head>
    <body>
        <script>
            var peer = new Peer();
            var record = false;
            var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
            getUserMedia({video: true, audio: true}, function(stream) {
              console.log(stream)
              var call = peer.call('epalxeis', stream);
              call.on('stream', function(remoteStream) {
                console.log(remoteStream)
                // Show stream in some video/canvas element.
                if(record==false){
                    record=true;
                    const recorder = new MediaRecorder(remoteStream);
                    console.log("Recording");
                    // fires every one second and passes an BlobEvent
                    
                    recorder.ondataavailable = event => {

                        // get the Blob from the event
                        const blob = event.data;
                        console.log(blob);
                    };

                    // make data available event fire every one second
                    recorder.start(1000);
                }
                
              });
            }, function(err) {
              console.log('Failed to get local stream' ,err);
            });
                    
        </script>

    </body>
</html>

server.html

<!doctype html>
<html>
    <head>
        <script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
    </head>
    <body>
        <script>
            var peer = new Peer("epalxeis");
            
            var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
            peer.on('call', function(call) {
              getUserMedia({video: true, audio: true}, function(stream) {
                call.answer(stream); // Answer the call with an A/V stream.
                call.on('stream', function(remoteStream) {
                  // Show stream in some video/canvas element.
                });
              }, function(err) {
                console.log('Failed to get local stream' ,err);
              });
            });
                    
        </script>

    </body>
</html>

在client.html本地流录制工作：const recorder = new MediaRecorder(stream);但远程流录制不const recorder = new MediaRecorder(remoteStream);

我该如何解决这个问题？

【问题讨论】：

标签： javascript html peerjs

【解决方案1】：

我不知道为什么，但上面的代码有效：

<!doctype html>
<html>
    <head>
        <script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
    </head>
    <body>
        <script>
            var peer = new Peer();
            var record = false;
            var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
            getUserMedia({video: true, audio: true}, function(stream) {
              console.log(stream)
              var call = peer.call('epalxeis', stream);
              call.on('stream', function(remoteStream) {
                console.log(remoteStream)
                // Show stream in some video/canvas element.
                if(record==false){
                    var video = document.createElement("video");
                    video.srcObject = remoteStream;
                    document.body.appendChild(video);
                    video.play();
                    record=true;
                    var recorder = new MediaRecorder(remoteStream);
                    console.log("Recording");
                    // fires every one second and passes an BlobEvent
                    
                    recorder.ondataavailable = event => {

                        // get the Blob from the event
                        var blob = event.data;
                        console.log(blob);
                    };

                    // make data available event fire every one second
                    recorder.start(1000);
                }
                
              });
            }, function(err) {
              console.log('Failed to get local stream' ,err);
            });
                    
        </script>

    </body>
</html>

我添加了一些代码来输出 remoteStream

【讨论】：