摘要：前言經(jīng)過(guò)前面兩篇文章的講解，大家已經(jīng)了解了的基本使用方法，下面我們就根據(jù)我們了解的做一個(gè)直播。因?yàn)闆](méi)有做回音消除，和破音處理，這樣聽(tīng)上去會(huì)很爽。

經(jīng)過(guò)前面兩篇文章的講解，大家已經(jīng)了解了audio的基本使用方法，下面我們就根據(jù)我們了解的api做一個(gè)直播。
web音頻流轉(zhuǎn)發(fā)之AudioNode
web音頻流轉(zhuǎn)發(fā)之音頻源

視頻直播：采集一幀一幀的視頻，轉(zhuǎn)換為base64轉(zhuǎn)發(fā)，接收到base64后，設(shè)置為img的src，然后不停的修改img的src形成視頻

音頻直播：采集一幀一幀的音頻二進(jìn)制數(shù)據(jù)，轉(zhuǎn)發(fā)2進(jìn)制數(shù)據(jù)，在接收端對(duì)2進(jìn)制原始音頻數(shù)據(jù)進(jìn)行播放

獲取攝像頭，和麥克風(fēng)需要https

navigator.getUserMedia已經(jīng)廢棄，使用navigator.mediaDevices.getUserMedia，當(dāng)然需要做兼容

//獲取音頻視頻流數(shù)據(jù)
mediaDevices = navigator.mediaDevices.getUserMedia({audio: true,video: { width: 320, height: 240 }});
mediaDevices.then(stream => {
    //視頻流轉(zhuǎn)換到video標(biāo)簽播放
    video.srcObject = stream;
    video.play();
    //音頻流轉(zhuǎn)換到AudioNode做數(shù)據(jù)采集
    let source = audioCtx.createMediaStreamSource(stream);
    recorder = audioCtx.createScriptProcessor(2048, 1, 1);
    source.connect(recorder);
    recorder.connect(audioCtx.destination);
    recorder.onaudioprocess = function(ev){
    //采集單聲道數(shù)據(jù)
    let inputBuffer = ev.inputBuffer.getChannelData(0);
    //將視頻畫(huà)面轉(zhuǎn)換成base64發(fā)送
    ws.send(canvas.toDataURL("image/jpeg"));
    //發(fā)送音頻pcm數(shù)據(jù)
    ws.send(inputBuffer.buffer);
    };
});
video.onplay = function(){
    //將video繪制到canvas上
    interval = setInterval(function(){
        ctx.drawImage(video, 0, 0);
    },30);
    };

對(duì)接收的文件進(jìn)行一個(gè)緩存，以達(dá)到一個(gè)好的用戶體驗(yàn)

let ws = new WebSocket("wss://192.168.3.102"),
    imgChuncks = [],
    audioChuncks = [],
    img = null;
    //如何處理二進(jìn)制數(shù)據(jù)，默認(rèn)是Blob
    ws.binaryType = "arraybuffer",
    ws.onmessage = function(evt) { 
        if(evt.data.byteLength === undefined) {
            //收到的base64圖片
            imgChuncks.push(evt.data);
        }else{
            //收到的音頻二進(jìn)制pcm數(shù)據(jù)
            audioChuncks.push(new Float32Array(evt.data));
        }
        //緩存2幀的數(shù)據(jù)后開(kāi)始播放
        if(!img && audioChuncks.length > 2){
            myplay();
        }
    };

//創(chuàng)建播放音頻視頻函數(shù)
    function myplay(){
        //創(chuàng)建img標(biāo)簽來(lái)播放base64圖片
        img = new Image();
        document.body.appendChild(img);
        //創(chuàng)建播放音頻對(duì)象
        let    myBuffer = audioCtx.createBuffer(1, 2048, audioCtx.sampleRate),
               source = audioCtx.createBufferSource(),
               recorder = audioCtx.createScriptProcessor(2048, 1, 1);
           source.connect(recorder);
           recorder.connect(audioCtx.destination);
           recorder.onaudioprocess = function(ev){
               //修改img的src達(dá)到視頻的效果
               img.src = imgChuncks.shift();
               //播放audioChuncks里面真正的二進(jìn)制數(shù)據(jù)
            ev.outputBuffer.copyToChannel(audioChuncks.shift() || new Float32Array(2048), 0, 0);
        };
    }

這只是一個(gè)實(shí)例程序，為進(jìn)行任何優(yōu)化

在測(cè)試時(shí)請(qǐng)給揚(yáng)聲器插上耳機(jī)收聽(tīng)，或者讓揚(yáng)聲器和麥克風(fēng)放置到不同的房間。因?yàn)闆](méi)有做回音消除，和破音處理，這樣聽(tīng)上去會(huì)很爽。

自己生成一個(gè)https文件做測(cè)試

index.html

    
     
    
    
    
    


    
    
    
    
    開(kāi)始

servers.js

let https = require("https"),
    fs = require("fs"),
    WebSocket = require("ws"),
    options = {
        key: fs.readFileSync("./key.pem"),
        cert:fs.readFileSync("./key-cert.pem")
    },
    server = https.createServer(options, function(req, res){
        fs.readFile("./index.html", function(err, data){
            res.writeHead(200,{"Content-Type": "text/html"});
            res.end(data);
        });
    }).listen(443, function(){
        console.log("服務(wù)啟動(dòng)成功")
    });
const wss = new WebSocket.Server({server});
    wss.binaryType = "arraybuffer";
    wss.on("connection", (ws) => {
        ws.on("message", function(data) {  
      wss.clients.forEach(function each(client) {
            if (client.readyState === WebSocket.OPEN && client !== ws) {
              client.send(data);
            }
          });
      }); 
    });