What is the problem of transmitting sound from a microphone over a websocket in a JS-PHP bundle?

  • 0
    Hello.
    I am trying to get a feel for the possibilities of streaming data online via websockets. To begin with, I decided to experiment only with sound, i.e. implement a kind of voice chat. Because I am most familiar with PHP, I can feel the implementation of the server in this language using Workerman. The crux of the problem: there is the simplest JS client code that takes a stream from the microphone, cuts it with a recorder and sends it to the server. I looked at the code from an article on Habré, where the server is written in Go.
    var socket = new WebSocket('ws://10.0.0.5:27801/');
        navigator.mediaDevices.getUserMedia({
            audio: true
        })
        .then(function(stream) {
          var $audio = document.getElementById("audio");
          var mediarecorder = new MediaRecorder(stream, {mimeType: "audio/webm; codecs=\"opus\""});
          // send
          mediarecorder.ondataavailable = function(e) {
            if (e.data && e.data.size > 0) {
              socket.send(e.data);
            }
          }
          mediarecorder.start(1000);
    });


    And there is a simple PHP server that just sends the received data back.
    <?php
    include_once(__DIR__."/Workerman/Autoloader.php");
    
    use Workerman\Lib\Timer;
    use Workerman\Worker;
    
    $worker = new Worker("websocket://0.0.0.0:27801");
    
    $worker->onConnect = function($c){
        echo "Connected\n";
    };
    
    $worker->onMessage = function($c, $data){
        $c->send($data);
    };
    
    Worker::runAll();

    So if you send text with this approach, then everything is ok. But in the situation described above, the js connection simply falls off when transferring data with an error in the connection line.
    WebSocket connection to ' ws: //10.0.0.5: 27801 / ' failed: Could not decode a text frame as UTF-8.

    It was not possible to google the solution, I tried to change the type of connection on the server. Logically, both ends work with Blob.
    Please share tips and experiences.
    JavaScript Anonymous, Dec 8, 2019

  • 2 Answers
  • 0
    The issue was resolved by changing the type of the connection before sending it to the onMessage method instead of onConnect

    $c->websocketType = Websocket::BINARY_TYPE_ARRAYBUFFER;
    Anonymous

  • 0
    use Workerman\Protocols\Websocket;

    $worker->onConnect = function($c){
    echo "Connected\n";
    $c->websocketType = Websocket::BINARY_TYPE_ARRAYBUFFER;
    //или Websocket::BINARY_TYPE_BLOB
    };
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!