webrtc是html5的新特性,當(dāng)然是js了。要最新的瀏覽器支持??梢院芎?jiǎn)單的訪問(wèn)本地的攝像頭和mic,但要訪問(wèn)別人的攝像頭就麻煩很多了,需要用到websocket、后臺(tái)語(yǔ)言(java, php)等技術(shù)?!军c(diǎn)擊免費(fèi)試用,0成本啟動(dòng)】
創(chuàng)新互聯(lián)建站是一家專業(yè)提供任城企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為任城眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
webrtc是一個(gè)建議標(biāo)準(zhǔn)——當(dāng)前正在被W3C完善——用于提供一系列基于網(wǎng)絡(luò)的工具,任何設(shè)備都可以用它來(lái)實(shí)時(shí)共享音頻、視頻和數(shù)據(jù)。當(dāng)然,它仍在早起階段,但是webrtc有可能取代在任何設(shè)備上工作的Skype、Flash和很多基于Web的本地應(yīng)用程序。
想要了解更多關(guān)于webrtc的相關(guān)信息,推薦咨詢ZEGO即構(gòu)科技。公司自成立伊始,就專注自研音視頻引擎,在音頻前處理、網(wǎng)絡(luò)自適應(yīng)和跨平臺(tái)兼容性等方面,達(dá)到國(guó)際一流水平,同時(shí)充分利用基礎(chǔ)云服務(wù)商的能力,構(gòu)建了MSDN海量有序自學(xué)習(xí)數(shù)據(jù)網(wǎng)絡(luò),服務(wù)覆蓋全球,涵蓋上百個(gè)音視頻互動(dòng)業(yè)務(wù)場(chǎng)景。
webrtc多人視頻直播會(huì)議推薦ZEGO即構(gòu)科技。只需4行代碼,30分鐘在APP、Web和小程序等應(yīng)用內(nèi)實(shí)現(xiàn)視頻通話、語(yǔ)音通話,互動(dòng)直播功能?!军c(diǎn)擊免費(fèi)試用,0成本啟動(dòng)】
webrtc多人視頻直播會(huì)議實(shí)現(xiàn)原理:
1、服務(wù)端是用C++配合實(shí)現(xiàn)的,主要作用就是信令控制與轉(zhuǎn)發(fā)。
2、因?yàn)橛性赪EBRTC里面注冊(cè)自己的傳輸模塊,所以在這個(gè)基礎(chǔ)上實(shí)現(xiàn)多人就很容易了,主要就是讓服務(wù)端轉(zhuǎn)發(fā)的時(shí)候知道往哪里轉(zhuǎn)發(fā)。
3、WEBRTC里面有channel機(jī)制,每個(gè)會(huì)話對(duì)應(yīng)一個(gè)channel,如果要實(shí)現(xiàn)多個(gè)會(huì)話,就注冊(cè)多個(gè)channel。
想要了解更多關(guān)于多人視頻直播會(huì)議的信息,推薦咨詢ZEGO即構(gòu)科技。即構(gòu)科技有限公司是為開(kāi)發(fā)者提供高品質(zhì)實(shí)時(shí)音視頻、實(shí)時(shí)語(yǔ)音、互動(dòng)直播和IM即時(shí)通訊等服務(wù)的公司。核心團(tuán)隊(duì)成員均來(lái)自QQ,有超過(guò)20年的互聯(lián)網(wǎng)和音視頻技術(shù)開(kāi)發(fā)經(jīng)驗(yàn),以及億量級(jí)海內(nèi)外用戶運(yùn)營(yíng)服務(wù)能力。專注于實(shí)時(shí)音視頻領(lǐng)域,致力提供全世界范圍內(nèi)最清晰穩(wěn)定實(shí)時(shí)的語(yǔ)音視頻服務(wù),已服務(wù)4000+企業(yè),適用于游戲、娛樂(lè)社交、在線教育、在線醫(yī)療、遠(yuǎn)程會(huì)議、智能硬件等多種用戶場(chǎng)景。
1、可以使用WebRTC庫(kù)-PeerJS來(lái)實(shí)現(xiàn)點(diǎn)對(duì)點(diǎn)視頻聊天。 官網(wǎng)有詳細(xì)的API文檔,以及簡(jiǎn)單的視頻聊天示例,隨機(jī)算法得自己寫(xiě)了。
2、還可以學(xué)習(xí)下canvas,有選擇性的把視頻流畫(huà)到canvas上,可以或許可以減少帶寬壓力。
基于STRATUS +FLEX+MYSQL的簡(jiǎn)易在線隨機(jī)視頻聊天室的開(kāi)發(fā):
1.Flash Builder 4開(kāi)發(fā)的,默認(rèn)用的是Flex SDK4.0
2.開(kāi)發(fā)最好用flash payer 10 debug version(可以進(jìn)行調(diào)試)
3.申請(qǐng)一個(gè) Stratus develper key:8b0f114ef5a20c433d5c2a33-201aeea5601b
WebRTC給我們帶來(lái)了瀏覽器中的視頻、音頻聊天體驗(yàn)。但個(gè)人認(rèn)為,它最實(shí)用的特性莫過(guò)于DataChannel——在瀏覽器之間建立一個(gè)點(diǎn)對(duì)點(diǎn)的數(shù)據(jù)通道。在DataChannel之前,瀏覽器到瀏覽器的數(shù)據(jù)傳遞通常是這樣一個(gè)流程:瀏覽器1發(fā)送數(shù)據(jù)給服務(wù)器,服務(wù)器處理,服務(wù)器再轉(zhuǎn)發(fā)給瀏覽器2。這三個(gè)過(guò)程都會(huì)帶來(lái)相應(yīng)的消耗,占用服務(wù)器帶寬不說(shuō),還減緩了消息從發(fā)送到接收的時(shí)間。其實(shí)最理想的方式就是瀏覽器1直接與瀏覽2進(jìn)行通信,服務(wù)器不需要參與其中。WebRTC DataChannel就提供了這樣一種方式。
如果對(duì)WebRTC和DataChannel不太了解的同學(xué),可以先閱讀如下文章:
- WebRTC的RTCDataChannel
- 使用WebRTC搭建前端視頻聊天室——信令篇
- 使用WebRTC搭建前端視頻聊天室——入門篇
當(dāng)然服務(wù)器完全不參與其中,顯然是不可能的,用戶需要通過(guò)服務(wù)器上存儲(chǔ)的信息,才能確定需要和誰(shuí)建立連接。這里通過(guò)一個(gè)故事來(lái)講述建立連接的過(guò)程:
不如釣魚(yú)去
一些背景:
現(xiàn)在,老劉聽(tīng)說(shuō)老姚釣魚(yú)技術(shù)高超,想和老姚討論釣魚(yú)技巧。只要老劉和老姚相互之間知道對(duì)方的門牌號(hào)以及憑證,就可以串門了:
老劉和老姚相互之間知道了對(duì)方的門牌號(hào)和小區(qū)出入憑證,他們相互之間有什么需要交流的直接串門就行了,消息不再需要門衛(wèi)老大爺來(lái)代為傳達(dá)了
換個(gè)角度
我們把角色做一個(gè)映射:
于是乎故事就變成了這樣:
這樣,就建立了一個(gè)點(diǎn)對(duì)點(diǎn)的信道,流程如下所示:
故事
老劉和老姚已經(jīng)可以相互串門了,經(jīng)過(guò)一段時(shí)間的交流感情越來(lái)越深。老姚的親友送了20斤葡萄給老姚,老姚決定送10斤給老劉。老姚畢竟年事已高,不可能一次帶10斤。于是乎,老姚將葡萄分成了10份,每次去老劉家串門就送一份過(guò)去。
這里可以做如下類比:
這其實(shí)就是通過(guò)datachannel傳輸文件的方式,首先將文件分片,然后逐個(gè)發(fā)送,最后再統(tǒng)一的進(jìn)行組合成一個(gè)新的文件
分片
通過(guò)HTML5的File API可以將type為file的input選中的文件讀取出來(lái),并轉(zhuǎn)換成data url字符串。這也就為我們提供了很方便的分片方式:
組合
通過(guò)datachannel發(fā)送的分片數(shù)據(jù),我們需要將其進(jìn)行組合,由于是data url字符串,在接收到所有包之后進(jìn)行拼接就可以了。拼接完成后就得到了一個(gè)文件完整的data url字符串,那么我們?nèi)绾螌⑦@個(gè)字符串轉(zhuǎn)換成文件呢?
方案一:直接跳轉(zhuǎn)下載
既然是個(gè)dataurl,我們直接將其賦值給window.location.href自然可以下載,但是這樣下載是沒(méi)法設(shè)定下載后的文件名的,這想一想都蛋疼
方案二:通過(guò)a標(biāo)簽下載
這個(gè)原理和跳轉(zhuǎn)下載類似,都是使用dataurl本身的特性,通過(guò)創(chuàng)建一個(gè)a標(biāo)簽,將dataurl字符串賦值給href屬性,然后使用download確定下載后的文件名,就可以完成下載了。但是很快又有新問(wèn)題了,稍微大一點(diǎn)的文件下載的時(shí)候頁(yè)面崩潰了。這是因?yàn)閐ataurl有大小限制
方案三:blob
其實(shí)可以通過(guò)給a標(biāo)簽創(chuàng)建blob url的方式來(lái)進(jìn)行下載,這個(gè)沒(méi)有大小限制。但是我們手上是dataurl,所以需要先進(jìn)行轉(zhuǎn)換:
獲得blob后,我們就可以通過(guò)URL API來(lái)下載了:
這里有幾個(gè)點(diǎn):
1. datachannel其實(shí)是可以直接傳送blob的,但是只有ff支持,所以傳data url
2. chrome下載是直接觸發(fā)的,不會(huì)進(jìn)行詢問(wèn),firefox會(huì)先詢問(wèn)后下載,在詢問(wèn)過(guò)程中如果執(zhí)行了revokeObjectURL,下載就會(huì)取消,囧
升級(jí)
如我們所知,WebRTC最有特點(diǎn)的地方其實(shí)是可以傳輸getUserMedia獲得的視頻、音頻流,來(lái)實(shí)現(xiàn)視頻聊天。但事實(shí)上我們的使用習(xí)慣來(lái)看,一般人不會(huì)一開(kāi)始就打開(kāi)視頻聊天,而且視頻聊天時(shí)很消耗內(nèi)存的(32位機(jī)上一個(gè)連接至少20M左右好像,也有可能有出入)。所以常見(jiàn)的需求是,先建立一個(gè)包含datachannel的連接用于傳輸數(shù)據(jù),然后在需要時(shí)升級(jí)成可以傳輸視頻、音頻。
看看我們之前傳輸?shù)膕ession description,它其實(shí)來(lái)自Session Description Protocol??梢钥吹絯iki上的介紹:
這意味著什么呢?我們之前建立datachannel是沒(méi)有加視頻、音頻流的,而這個(gè)流的描述是寫(xiě)在SDP里面的?,F(xiàn)在我們需要傳輸視頻、音頻,就需要添加這些描述。所以就得重新獲得SDP,然后構(gòu)建offer和answer再傳輸一次。傳輸?shù)牧鞒毯椭耙粯?,沒(méi)什么區(qū)別。但這一次,我們不需要傳輸任何的ice candidate,這里我曾經(jīng)遇到了坑,經(jīng)過(guò)國(guó)外大大的點(diǎn)撥才明白過(guò)來(lái)。
Peertc
我將datachannel和websocket組合,實(shí)現(xiàn)了一個(gè)構(gòu)建點(diǎn)對(duì)點(diǎn)連接的庫(kù)Peertc,它提供非常簡(jiǎn)潔的方式來(lái)建立連接和發(fā)送數(shù)據(jù)、文件和視頻/音頻流,詳情見(jiàn)github。走過(guò)路過(guò)的記得star一下哦,有什么bug也非常希望能夠提出來(lái)。
最后
WebRTC的點(diǎn)對(duì)點(diǎn)方式能夠運(yùn)用在很多場(chǎng)景:
- 如web qq這種Web IM工具,這就不說(shuō)了
- 如象棋這種雙人對(duì)戰(zhàn) 游戲 ,每一步的數(shù)據(jù)服務(wù)器時(shí)不關(guān)心的,所以完全可以點(diǎn)對(duì)點(diǎn)發(fā)送
- 一對(duì)一在線面試、在線教育,這其實(shí)是即時(shí)通信的一個(gè)業(yè)務(wù)方向
目前基于WebRTC的開(kāi)發(fā)其實(shí)有兩個(gè)方向,
一個(gè)是基于瀏覽器的WebRTC應(yīng)用開(kāi)發(fā),編程語(yǔ)言主要是JavaScript、HTML等,
這也是WebRTC作為HTML5標(biāo)準(zhǔn)的組成部分原本的目的;
另一個(gè)是C層面的移植和開(kāi)發(fā),作為一款非常強(qiáng)大的開(kāi)源軟件,
很多領(lǐng)域的軟件項(xiàng)目都可以利用到WebRTC的音視頻通信和處理能力,
這些場(chǎng)合的應(yīng)用程序可能是C語(yǔ)言寫(xiě)的,也不一定與瀏覽器有關(guān)。
轉(zhuǎn)自:網(wǎng)頁(yè)鏈接
本文名稱:webrtchtml5,webrtc html
本文鏈接:http://jinyejixie.com/article32/dsdippc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、虛擬主機(jī)、、ChatGPT、網(wǎng)站收錄
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)