之前公司用的ffmpeg和tutk做的音視頻項(xiàng)目，現(xiàn)在準(zhǔn)備換成WebRTC。其實(shí)之前的ffmpeg也是基于大牛寫好的項(xiàng)目上進(jìn)行修改和迭代，畢竟音視頻方面的只是點(diǎn)太太多了，這次是從頭開(kāi)始一項(xiàng)新的技術(shù)點(diǎn)學(xué)習(xí)，從昨天開(kāi)始了解，到今天才把整個(gè)demo跑下來(lái)，中間踩了不少坑，按照別的博主寫的文走，也是出現(xiàn)了很多小問(wèn)題，所以來(lái)記錄一下踩坑的每個(gè)階段。

本篇內(nèi)容主要是以下兩個(gè)方面

• 本地WebServer的搭建
• Web 和 AndroidClient 的互call

Android端具體的功能實(shí)現(xiàn)我是想后面再單獨(dú)一篇記錄一下，這篇主要是以環(huán)境搭建為主跑起項(xiàng)目為主。（其實(shí)我也就剛做到這里而已 /撓撓頭 嘿嘿嘿）

服務(wù)端項(xiàng)目 ProjectRTC https://github.com/pchab/ProjectRTC
Android項(xiàng)目 AndroidRTC https://github.com/pchab/AndroidRTC

ProjectRTC 這個(gè)項(xiàng)目是本地服務(wù)和Web頁(yè)面的功能都有，后面會(huì)介紹。

本地服務(wù)的建立

1. 檢查你的本地是否有nodejs，可以用命令行 node -v 查詢版本號(hào)，如果報(bào)錯(cuò)就是沒(méi)有安裝，正確應(yīng)該是如下圖顯示版本。（沒(méi)有安裝過(guò)？ 友情鏈接送給你 https://nodejs.org/en/download/）

檢查是否安裝了nodejs

2.將ProjectRTC 項(xiàng)目clone到本地，因?yàn)槲夜揪W(wǎng)絡(luò)不好，clone了三四次都失敗了，后來(lái)我是直接下載的壓縮文件。

git clone https://github.com/pchab/ProjectRTC.git

然后進(jìn)入項(xiàng)目第一層目錄,如下

項(xiàng)目目錄

然后安裝，命令 npm install

安裝

因?yàn)槲乙呀?jīng)安裝過(guò)了，所以這里我就不執(zhí)行了，也就不截圖給大家了，一般到這里都是沒(méi)有問(wèn)題的。

下一步就是啟動(dòng)服務(wù)，這里我踩坑踩了好久，我看的那個(gè)博主是用
npm start
我這樣會(huì)一直報(bào)一個(gè)錯(cuò)，如下圖

啟動(dòng)服務(wù)錯(cuò)誤

然后我去看了error log文件里面的詳細(xì)log是這樣的

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'D:\\software\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\yoyo\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start'
1 verbose cli ]
2 info using npm@6.14.4
3 info using node@v12.16.3
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle ProjectRTC@0.4.0~prestart: ProjectRTC@0.4.0
6 info lifecycle ProjectRTC@0.4.0~start: ProjectRTC@0.4.0
7 verbose lifecycle ProjectRTC@0.4.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle ProjectRTC@0.4.0~start: PATH: C:\Users\yoyo\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\material\ProjectInformation\webRTC\ProjectRTC-master\ProjectRTC-master\node_modules\.bin;C:\Users\yoyo\bin;D:\software\Git\Git\mingw64\bin;D:\software\Git\Git\usr\local\bin;D:\software\Git\Git\usr\bin;D:\software\Git\Git\usr\bin;D:\software\Git\Git\mingw64\bin;D:\software\Git\Git\usr\bin;C:\Users\yoyo\bin;C:\Python27;C:\Python27\Scripts;C:\ProgramData\Oracle\Java\javapath;C:\ProgramData\Oracle\Java\javapat;D:\software\Java\jdk1.8.0_131\bin;D:\software\Java\jdk1.8.0_131\jre\bin;.;C:\Program Files (x86)\Intel\iCLS Client;C:\Program Files\Intel\iCLS Client;C:\windows\system32;C:\windows;C:\windows\System32\Wbem;C:\windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\TortoiseSVN\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\WINDOWS\System32\OpenSSH;C:\ProgramData\chocolatey\bin;.;D:\software\android-sdk\platform-tools;D:\software\Git\Git\cmd;C:\Program Files\MySQL\MySQL Server 5.7\bin;.;.;D:\software\apache-maven-3.5.4\bin;C:\Program Files\Intel\WiFi\bin;C:\Program Files\Common Files\Intel\WirelessCommon\";.;C:\Users\yoyo\.gradle\wrapper\dists\gradle-4.10.1-all\455itskqi2qtf0v2sja68alqd\gradle-4.10.1\bin";.;%GRADLE_HOMW%\bin";D:\software\Git\Git\usr\bin;D:\software\nodejs;C:\Users\yoyo\AppData\Local\Microsoft\WindowsApps;C:\Users\yoyo\AppData\Local\Pandoc;C:\Users\yoyo\AppData\Roaming\npm;D:\software\Git\Git\usr\bin\vendor_perl;D:\software\Git\Git\usr\bin\core_perl
9 verbose lifecycle ProjectRTC@0.4.0~start: CWD: D:\material\ProjectInformation\webRTC\ProjectRTC-master\ProjectRTC-master
10 silly lifecycle ProjectRTC@0.4.0~start: Args: [ '/d /s /c', 'forever start app.js' ]
11 silly lifecycle ProjectRTC@0.4.0~start: Returned: code: 9009  signal: null
12 info lifecycle ProjectRTC@0.4.0~start: Failed to exec start script
13 verbose stack Error: ProjectRTC@0.4.0 start: `forever start app.js`
13 verbose stack Exit status 9009
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\yoyo\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:310:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\yoyo\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:310:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid ProjectRTC@0.4.0
15 verbose cwd D:\material\ProjectInformation\webRTC\ProjectRTC-master\ProjectRTC-master
16 verbose Windows_NT 10.0.18362
17 verbose argv "D:\\software\\nodejs\\node.exe" "C:\\Users\\yoyo\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v12.16.3
19 verbose npm  v6.14.4
20 error code ELIFECYCLE
21 error errno 9009
22 error ProjectRTC@0.4.0 start: `forever start app.js`
22 error Exit status 9009
23 error Failed at the ProjectRTC@0.4.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 9009, true ]

這個(gè)問(wèn)題我在網(wǎng)上搜了超級(jí)超級(jí)久也沒(méi)找到一篇成功解決的方案，最后我準(zhǔn)備放棄這個(gè)問(wèn)題，去多找一些教程文章看一看，當(dāng)我看了第N篇文章的時(shí)候，我發(fā)現(xiàn)他是用
node app.js
啟動(dòng)的服務(wù)，so 我就嘗試了一下，真的成功了，超級(jí)激動(dòng)。
啟動(dòng)成功，如圖

服務(wù)啟動(dòng)成功

這個(gè)時(shí)候就可以打開(kāi)你的網(wǎng)頁(yè)，輸入localhost：3000 去看下web端的界面啦

醬紫

因?yàn)槲业谝淮斡茫X(jué)得這樣就是ok的，所以就去興沖沖的修改了android代碼里的ip跑起來(lái)，手機(jī)上此時(shí)的畫面就是手機(jī)攝像頭的畫面，然后在命令行這里有一個(gè)設(shè)備加入了，我以為就沒(méi)問(wèn)題了，瘋狂點(diǎn)死了頁(yè)面中的view和call的那兩個(gè)按鈕，然并卵。搞了好久 百度了好多，也可能是我真的不知道該怎么搜索這個(gè)問(wèn)題吧，反正我是沒(méi)找到 /尷尬臉

設(shè)備加入

本著做過(guò)webui的經(jīng)驗(yàn)，按了下F12看了看是不是有什么報(bào)錯(cuò)，結(jié)果還真有

錯(cuò)誤錯(cuò)誤

錯(cuò)誤行

最后看了下代碼，發(fā)現(xiàn)就是因?yàn)檫@個(gè)在線引用文件失敗，導(dǎo)致別的地方一個(gè)使用錯(cuò)誤，所以頁(yè)面上就有問(wèn)題，后來(lái)我就把文件下載到本地引用了。下載鏈接我是真的找不到了，因?yàn)槲胰ス倬W(wǎng)找了一圈，是真的沒(méi)找到，然后就找了好多別的小哥哥小姐姐的文里的鏈接，想要的話就找我吧。

醬紫

改好之后關(guān)閉之前打開(kāi)的命令號(hào)，會(huì)有提示你正在運(yùn)行XXX是否全部關(guān)閉，點(diǎn)擊關(guān)閉

關(guān)閉服務(wù)

然后再重新啟動(dòng)一下，再刷新頁(yè)面，就會(huì)看到醬紫的

正確頁(yè)面

這樣就沒(méi)問(wèn)題咯，下面開(kāi)始真正的表演吧

Web和android的互call

1.上面提到過(guò)，要修改android項(xiàng)目中的ip，位置在這里，把這個(gè)ip改成電腦的ip

修改Android項(xiàng)目ip

2.run起來(lái)之后手機(jī)就會(huì)調(diào)用你的攝像頭，顯示你這邊的畫面

這是我用我的手機(jī)拍的測(cè)試機(jī)

這個(gè)時(shí)候點(diǎn)擊頁(yè)面的這個(gè)按鈕

點(diǎn)他，沒(méi)錯(cuò)

在這個(gè)位置就會(huì)顯示連接上服務(wù)的設(shè)備，然后就可以看手機(jī)端的view了，點(diǎn)擊view

已經(jīng)連接服務(wù)的設(shè)備

web上的Android畫面

右邊的那個(gè)小框框是預(yù)覽的電腦的攝像頭，我們可以點(diǎn)擊start瞄一眼

電腦攝像頭的畫面

下面來(lái)個(gè)call吧

手機(jī)畫面

電腦畫面

下面沒(méi)截上，但是頁(yè)面還是那個(gè)頁(yè)面~（忽略我凌亂的桌面吧 hhh）

至此，本篇要講解的全部?jī)?nèi)容就結(jié)束了。今天大概看了下代碼，但是并不深入，所以代碼細(xì)節(jié)方面下一篇再講解（我還得再學(xué)習(xí)學(xué)習(xí)，嘿嘿嘿）