之前公司用的ffmpeg和tutk做的音视频项目,现在准备换成WebRTC。其实之前的ffmpeg也是基于大牛写好的项目上进行修改和迭代,毕竟音视频方面的只是点太太多了,这次是从头开始一项新的技术点学习,从昨天开始了解,到今天才把整个demo跑下来,中间踩了不少坑,按照别的博主写的文走,也是出现了很多小问题,所以来记录一下踩坑的每个阶段。
本篇内容主要是以下两个方面
- 本地WebServer的搭建
- Web 和 AndroidClient 的互call
Android端具体的功能实现我是想后面再单独一篇记录一下,这篇主要是以环境搭建为主跑起项目为主。(其实我也就刚做到这里而已 /挠挠头 嘿嘿嘿)
服务端项目 ProjectRTC https://github.com/pchab/ProjectRTC
Android项目 AndroidRTC https://github.com/pchab/AndroidRTC
ProjectRTC 这个项目是本地服务和Web页面的功能都有,后面会介绍。
本地服务的建立
1. 检查你的本地是否有nodejs,可以用命令行 node -v 查询版本号,如果报错就是没有安装,正确应该是如下图显示版本。(没有安装过? 友情链接送给你 https://nodejs.org/en/download/)
2.将ProjectRTC 项目clone到本地,因为我公司网络不好,clone了三四次都失败了,后来我是直接下载的压缩文件。
git clone https://github.com/pchab/ProjectRTC.git
然后进入项目第一层目录,如下
然后安装,命令 npm install
因为我已经安装过了,所以这里我就不执行了,也就不截图给大家了,一般到这里都是没有问题的。
下一步就是启动服务,这里我踩坑踩了好久,我看的那个博主是用
npm start
我这样会一直报一个错,如下图
然后我去看了error log文件里面的详细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 ]
这个问题我在网上搜了超级超级久也没找到一篇成功解决的方案,最后我准备放弃这个问题,去多找一些教程文章看一看,当我看了第N篇文章的时候,我发现他是用
node app.js
启动的服务,so 我就尝试了一下,真的成功了,超级激动。
启动成功,如图
这个时候就可以打开你的网页,输入localhost:3000
去看下web端的界面啦
因为我第一次用,觉得这样就是ok的,所以就去兴冲冲的修改了android代码里的ip跑起来,手机上此时的画面就是手机摄像头的画面,然后在命令行这里有一个设备加入了,我以为就没问题了,疯狂点死了页面中的view和call的那两个按钮,然并卵。搞了好久 百度了好多,也可能是我真的不知道该怎么搜索这个问题吧,反正我是没找到 /尴尬脸
本着做过webui的经验,按了下F12看了看是不是有什么报错,结果还真有
最后看了下代码,发现就是因为这个在线引用文件失败,导致别的地方一个使用错误,所以页面上就有问题,后来我就把文件下载到本地引用了。下载链接我是真的找不到了,因为我去官网找了一圈,是真的没找到,然后就找了好多别的小哥哥小姐姐的文里的链接,想要的话就找我吧。
改好之后关闭之前打开的命令号,会有提示你正在运行XXX是否全部关闭,点击关闭
然后再重新启动一下,再刷新页面,就会看到酱紫的
这样就没问题咯,下面开始真正的表演吧
Web和android的互call
1.上面提到过,要修改android项目中的ip,位置在这里,把这个ip改成电脑的ip
2.run起来之后手机就会调用你的摄像头,显示你这边的画面
这个时候点击页面的这个按钮
在这个位置就会显示连接上服务的设备,然后就可以看手机端的view了,点击view
右边的那个小框框是预览的电脑的摄像头,我们可以点击start瞄一眼
下面来个call吧
下面没截上,但是页面还是那个页面~(忽略我凌乱的桌面吧 hhh)
至此,本篇要讲解的全部内容就结束了。今天大概看了下代码,但是并不深入,所以代码细节方面下一篇再讲解(我还得再学习学习,嘿嘿嘿)