2013-07-26 111 views
5

我需要構建一個Web應用程序,使用WebRTC獲取網絡攝像機視頻流和麥克風音頻流,並立即將其轉換爲服務器以便進一步廣播給多個客戶端。該應用程序必須在全雙工實時進行。我的意思是這將是一種實時視頻聊天。這將是某種教育應用程序。 所以問題是:現在有可能嗎?我應該使用哪些技術? 我應該在後端使用帶有WebSocket和Node.js的WebRTC嗎?或者我可以使用PHP而不是節點?我可以使用Socket.io嗎?還有其他方法可以實現嗎?可能閃光?現在是否有可能使用GetUserMedia API從網絡攝像頭讀取視頻流並將其直接發送到服務器進行進一步廣播?

回答

4

WebRTC中的PeerConnection API不需要後端服務器在對等點之間進行一個或多個連接。

你需要一個後端服務器的唯一的事情就是作爲一個介質來首先建立對等體之間的連接。爲此,您可以使用WebSocket API,Ajax或任何其他必要的手段來實現這一點。另外,是的,您可以使用PHP爲WebSocket編寫服務器端(或者您希望用於建立對等連接的任何方法)。這真的取決於你。

目前,只有Chrome和Firefox支持足夠的WebRTC API才能使視頻聊天成爲可能。不久之後,Opera很可能會加入這個組合,但是沒有人確定WebRTC是否會被添加到IE11中,並且Apple似乎不打算在短時間內將Safari WebRTC添加到Safari中(因爲他們擁有自己的專有技術)那聽起來很熟悉?!)。

無論如何,WebRTC是你最好的選擇。作爲補充說明,我不認爲有可能使用JS將視頻和音頻發送到服務器,然後讓服務器將該數據轉發給其他對等方。相反,您需要使用WebRTC建立點對點連接,然後從那裏開始。

編輯:如果您使用TURN服務器,你可以重新路由通過服務器的音頻和視頻數據,但是這實際上是最不理想的情況下,你仍然只能做,如果你使用的WebRTC的API 。

+0

感謝您的答案!我知道WebRTC能夠直接連接瀏覽器。但我需要一個Web服務器來進行身份驗證和授權。 – paperstreet7

+0

這完全取決於你。你可以授權和認證任何你想要的,並且只允許WebRTC連接,如果一切正常。 – HartleySan

+0

@ paperstreet7 - 已經有好幾年了,但我遇到過類似的要求,你是否設法找到解決方案? – po10cySA

2

它可能會幫助你。

MediaStreamRecorder是用於記錄getUserMedia()流(仍在執行中)的WebRTC API。它允許網絡應用程序通過實時音頻/視頻會話創建文件。

以下是將流發送到服務器的示例實現。

<video autoplay></video> 

    <script language="javascript" type="text/javascript"> 
    function onVideoFail(e) { 
     console.log('webcam fail!', e); 
     }; 

    function hasGetUserMedia() { 
     // Note: Opera is unprefixed. 
     return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
       navigator.mozGetUserMedia || navigator.msGetUserMedia); 
    } 

    if (hasGetUserMedia()) { 
     // Good to go! 
    } else { 
     alert('getUserMedia() is not supported in your browser'); 
    } 

    window.URL = window.URL || window.webkitURL; 
    navigator.getUserMedia = navigator.getUserMedia || 
          navigator.webkitGetUserMedia || 
           navigator.mozGetUserMedia || 
           navigator.msGetUserMedia; 

    var video = document.querySelector('video'); 
    var streamRecorder; 
    var webcamstream; 

    if (navigator.getUserMedia) { 
     navigator.getUserMedia({audio: true, video: true}, function(stream) { 
     video.src = window.URL.createObjectURL(stream); 
     webcamstream = stream; 
    // streamrecorder = webcamstream.record(); 
     }, onVideoFail); 
    } else { 
     alert ('failed'); 
    } 

    function startRecording() { 
     streamRecorder = webcamstream.record(); 
     setTimeout(stopRecording, 10000); 
    } 
    function stopRecording() { 
     streamRecorder.getRecordedData(postVideoToServer); 
    } 
    function postVideoToServer(videoblob) { 

     var data = {}; 
     data.video = videoblob; 
     data.metadata = 'test metadata'; 
     data.action = "upload_video"; 
     jQuery.post("http://www.kongraju.in/uploadvideo.php", data, onUploadSuccess); 
    } 
    function onUploadSuccess() { 
     alert ('video uploaded'); 
    } 

    </script> 

    <div id="webcamcontrols"> 
     <button class="recordbutton" onclick="startRecording();">RECORD</button> 
    </div> 

可以記錄文件發送到服務器。

參考文獻:

http://www.w3.org/TR/mediastream-recording/

+0

你知道什麼類型的視頻文件/部分是在發送到服務器之前到達'data = {}'部分嗎? – JerryFox

+2

我收到錯誤_Uncaught TypeError:無法讀取第41行的undefined_屬性'record'streamRecorder = webcamstream.record();'在Chrome版本46.0.2490.86 m –

1

直播複式視頻與多個參與者聊天視頻會議,爲此,你需要配的參與者和廣播到他們的音頻和視頻服務器組件。你非常需要這個媒體服務器。對於WebRTC,有幾個可用的;看看Doubango的遠程呈現服務器:https://code.google.com/p/telepresence/

Mobicents具有良好的SIP堆棧,但webRTC的多媒體功能有限。

否則爲什麼不開始寫一個? :)

相關問題