国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

web音頻流轉發之音視頻直播

鄒強 / 1116人閱讀

摘要:前言經過前面兩篇文章的講解,大家已經了解了的基本使用方法,下面我們就根據我們了解的做一個直播。因為沒有做回音消除,和破音處理,這樣聽上去會很爽。

前言

經過前面兩篇文章的講解,大家已經了解了audio的基本使用方法,下面我們就根據我們了解的api做一個直播。
web音頻流轉發之AudioNode
web音頻流轉發之音頻源

原理

視頻直播:采集一幀一幀的視頻,轉換為base64轉發,接收到base64后,設置為img的src,然后不停的修改img的src形成視頻

音頻直播:采集一幀一幀的音頻二進制數據,轉發2進制數據,在接收端對2進制原始音頻數據進行播放

采集和推流

獲取攝像頭,和麥克風需要https

navigator.getUserMedia已經廢棄,使用navigator.mediaDevices.getUserMedia,當然需要做兼容

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

對接收的文件進行一個緩存,以達到一個好的用戶體驗

let ws = new WebSocket("wss://192.168.3.102"),
    imgChuncks = [],
    audioChuncks = [],
    img = null;
    //如何處理二進制數據,默認是Blob
    ws.binaryType = "arraybuffer",
    ws.onmessage = function(evt) { 
        if(evt.data.byteLength === undefined) {
            //收到的base64圖片
            imgChuncks.push(evt.data);
        }else{
            //收到的音頻二進制pcm數據
            audioChuncks.push(new Float32Array(evt.data));
        }
        //緩存2幀的數據后開始播放
        if(!img && audioChuncks.length > 2){
            myplay();
        }
    };
處理流
//創建播放音頻視頻函數
    function myplay(){
        //創建img標簽來播放base64圖片
        img = new Image();
        document.body.appendChild(img);
        //創建播放音頻對象
        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達到視頻的效果
               img.src = imgChuncks.shift();
               //播放audioChuncks里面真正的二進制數據
            ev.outputBuffer.copyToChannel(audioChuncks.shift() || new Float32Array(2048), 0, 0);
        };
    }
注意

這只是一個實例程序,為進行任何優化

在測試時請給揚聲器插上耳機收聽,或者讓揚聲器和麥克風放置到不同的房間。因為沒有做回音消除,和破音處理,這樣聽上去會很爽。

自己生成一個https文件做測試

完整代碼

index.html




    
     
    
    
    
    


    
    
    
    
    


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("服務啟動成功")
    });
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);
            }
          });
      }); 
    });
    

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51362.html

相關文章

  • web音頻轉發音頻

    摘要:前言音頻流轉發之音視頻直播音頻流轉發之能直播為什么不可以看完本系列文章,你就能做一個直播,真正的直播,包括音頻流的轉發,這也是我最近查看發現有相關能實現音頻流的轉發,所有打算分享系列文章供大家交流,如有不對之處請指正。 前言 web音頻流轉發之音視頻直播web音頻流轉發之AudioNodeapp能直播,web為什么不可以?看完本系列文章,你就能做一個直播,真正的直播,包括音頻流的轉發,...

    FingerLiu 評論0 收藏0
  • web音頻轉發之AudioNode

    摘要:概述是一個處理音頻的通用模塊比如一個音頻源一個元素一個音頻地址或者一個中間處理模塊一個過濾器如或一個音量控制器如一個既有輸入也有輸出。下面一章就開始介紹音頻流的轉發了。 前言 上一章地址: web音頻流轉發之音頻源下一張地址:web音頻流轉發之音視頻直播在這一章我說幾個我們需要用到的音頻處理模塊也就3個吧,包括我們轉發流是需要用到的核心模塊。更多模塊請看MDN,或者看HTML5音頻AP...

    twohappy 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<