# 准备工作
上个礼拜老板安排了一个任务，让我实现在 web 上显示摄像头视频。我是做 Web 应用程序的没错，但是对摄像头确一无所知。这个任务看似不可能完成的，但老板说他己经实现过了，就是兼容性不好。没办法只得照着百度，gg，一阵搜。还真搜出来好多介绍如何用 Web 显示摄像头视频的文章，其中比较有用的总体上来讲就三个，最终我也是参考这三个文章，把需求实现了。下面贴出链接：
- html5 播放 rtsp 方案 (opens new window)
- 如何在网页端播放摄像头的实时画面 (opens new window)
- Wowza 4.3.0 安装和使用 并联合海康摄像头（RTSP）实现直播推流 (opens new window)
通过上面的文章知道，无论采用哪种方案都需要有 rtsp 视频源，先是百度了一大堆，用 vlc 测试全都不能用。后来看到一篇文章让我解决了视频源的问题，也为后来的测试打下了基础。这篇文章就是：
这里不得不说 Wowza 这个软件的强大之处，她可以将摄像头的 rtsp 源 直接代理成 Web 上能播放的如 HLS, MPEG-DASH, m3u8 格式。所以特别好用。
# 上手测试
有了 rtsp 视频源，先参照文章 1 的步骤一步一步下载，安装，运行测试，结果确实可以实现在 web 上播放 rtsp。但是老板的需求是左侧弄一个菜单有视频 1，2，3，4...等可以切换。由于文章 1 没有相应的结束，播放 api。所以得查找解决办法，于是第二篇文章便派上了用场。在文章 1 的基础上，文章二作者提供的源码很快跑起来了。测试了一下没问题。由于文章二作者提供了停止，和播放的方法，而且本身是基于 node express 的，可以直接调用接口停止后台推流，于是便顺利成章想到用他的源码。在这里谢谢作者的分享，要不是他我可能得另找办法了。
问题来了，Wowza 自带的测试 demo，rtsp 源在上面的源码上能播放，可是老板提供的两个摄像头的 rtsp 源在上面的源码 demo 上放不出来，但是 vlc 上能放。看到文章三让我想到用 Wowza 于是在本地安装好，按照文章三的方法配置好，但是怎么都放不出来。用 vlc 和上面的 demo 都不行。于是 gg 搜索 wowza camera rtsp stream 在第一页广告的下面找到了这篇文章：Re-stream video from an IP camera (RTSP/RTP re-streaming) in Wowza Streaming Engine (opens new window)。往下拉，看到有一个标题叫 Troubleshooting 。这不正是我需要的吗？于是按照上面介绍的条目一个一个试。这里说下有用的两个 Check your IP camera source 和 Turn audio or video tracks off。翻译过来就是‘检查 ip 摄像头的视频源’和‘关掉音频或视频轨道’。下面贴出老板提供的视频源的编码格式（图片）：
对比人家要求的格式（图片）:
大家是不是看出问题来了。对的，音频格式不符合要求。于是想到了上面提到的第二条 ‘关掉音频或视频轨道’ 。这个功能正好是我们需要的，于是抱着试试的态度按照文档上操作，重启应用服务。然后在 vlc 上先测试，哈哈，成功了，画面出来了。最后放到上面的 demo 上测试，也成功了。至此算是解决了视频源的问题，下面就是前端开发页面，部署到服务器上了。
# 遇到一个小坑
用了半天的时间，下了一个模板，改了一下布局和样式，然后把 demo 上面的代码复制进来。到下午的时候己经在本地测试成功了。下面就是部署到服务器了。这里我用的是 windows 10 专业版加 phpstudy8.1。部署后报错了，这个错还以为是 php 和 node 不能同时使用的原因。127.0.0.1:3000 refused 后来才想通接口地址不能再用本地的了。要改成服务器的 ip 地址（或域名）。至此，总算完成了这个需求。多谢前人的付出和劳动，站在巨人的臂膀上才能看得更远。