在Geektimes，我经常见面并喜欢阅读DIY系列文章。 在决定对这里收集的宝贵经验的资金来源做出很小的贡献之后，我将详细描述基于Line服务器为Web创建客户端的过程。
线路监视系统提供了一个开放的API，开发人员说，可以根据它编写您自己的客户端，以在线查看视频档案和摄像机。 另外，如果需要，您可以实现一些功能，例如将事件添加到存档，将OSD覆盖在视频顶部。
官方网站上的规范中提供了所有功能的描述。
本文是一个真实的示例，说明了我（一个对JS，HTML有初步了解的用户）如何编写自己的应用程序，该应用程序实现了通过内置Web服务器使用Line服务器的基本原理。
输入数据
作者是HTML客户端开发的初学者，并且涉及Line视频监视系统的开发。
对JS，HTML的了解程度 -初始。
任务是使用站点中的规范编写一个HTML客户端，以用于基于Line软件的设备。
我将立即揭示主要的阴谋-我得出两个结论：
- 该规范是真实的，描述得很清楚，您可以使用C ++，PHP编写客户端。
- 您不能仅使用JS编写完整的HTML客户端，而只能根据RPC之前的规范进行在线监视。
考虑到与第三方程序的大量集成，第一个结论是很合逻辑的。 所有这些都在站点上进行了描述：有
门禁系统 ，
重量 ，
POS系统 ，
确定车号的程序和
1C 。
第二个结论更有趣，请在下面考虑。
为什么不能在HTML + JS中创建完整的客户端？
答：跨域请求。
目前，Line的网络服务器受到限制，仅将代码复制到www文件夹中就无法访问。 但是，开发人员保证在Linux的新版本和“ Line 8.0”中，Web服务器将作为标准服务器工作：如果有请求，则如果有文件，它将返回该文件。
现在创建一个新项目并开始编码。 像所有网络编程新手一样，指定Lines服务器在Access-Control-Allow-Origin标头中回答“ *”，我开始努力编写代码，并在Firefox 57.0.4（64位）上检查结果。 到服务器的请求由XMLHttpRequest发送。
最初，研究有关
该资源的信息将很有用。 此处详细介绍了所有内容，但我确实希望快速完成任务。 而且，不幸的是，由于缺乏信息，现代浏览器的安全策略几乎无法用半天的时间。
在撰写本文时，四个主要的现代浏览器不允许读取从服务器接收的标头。 根据规范，有必要实现摘要式身份验证，如果没有头，则不可能。
在第一天结束时，我意识到没有在Line的网络服务器上添加OPTIONS处理，将无法进行任何操作，因为对于带有“困难”方法或特殊标头的请求，浏览器会进行OPTIONS预先请求，并在Access-Control-Request-Method中进行指示和访问控制请求标头。 因此，我开始寻找其他授权选项，但是真正的Basic或Digest并没有成功。
规范中已经描述了一种替代方法，它仍然需要花费一些时间与“行”的程序部门对应。 由于这种困难不是第一次出现，因此已经有了授权的拐杖，甚至在规范中也提到了这一点：
在无法使用标准方式（HTTP摘要/基本身份验证）授权请求的客户端上，可以使用请求参数之一发送授权标头，例如
/kfd3ado1sdrms/streaming/main.flv?authorization=Basic%20d2ViOg==
完成所有操作后，标准的跨域请求开始正确执行！ 还必须将具有正确类型的Accept标头添加到请求中-我决定使用JSON。
要求代码：
function get_request_url(method,current_server_data, resource, additional){ var request = current_server_data.server_ip + ':' +current_server_data.port +resource+'?authorization=Basic '+ utf8_to_b64(current_server_data.user+':'+current_server_data.password); if (additional != '' && typeof additional != "undefined") { request += '&' + additional; } return request; } function http_request_of_resource (server_index , resource, auth_attempt) { var request = get_request_url('GET', servers_array[server_index], resource,''); var req_ = new XMLHttpRequest(); req_.open('GET', 'http://'+ request, true);
我们根据规范将资源更改为我们所需的资源，并获取该数据或该数据。 必要时，附加变量包含请求的附加参数。 在此基础上，该规范的前半部分（即通过GET请求接收/发送文本数据）的开发可以视为已结束。
此外，我碰到了一个事实，即IE中的IMG标签不会播放MJPEG流，因此您需要独立地实现来自相机的更新图像。 该代码是开放的，可以根据需要查看和更改。 在当前的实现中，最多可以同时播放六个MJPEG流，因此您必须使用显示更多摄像机的视图来完成此工作。 所有这些都在
示例中 ，如果您愿意，可以找到并理解，但是如果有疑问，请务必在评论中提问。
RPC规格
我们邀请我们以JSON（服务器“ Lines 7.1.1”及更高版本）或MessagePack（“ Line 7.0”及更高版本）发送和接收数据。 提到了MessagePack重量更轻且工作更快，但是老实说，如果不是出于一件事，而是出于规范的考虑，我会选择JSON（它已经内置在JS中）：只有在MessagePack中才可以从档案中接收帧。 我必须去他们的
官方网站并下载JS文件，该文件具有内置的编码和解码方法。
请求发送功能已准备就绪！ 但是庆祝胜利还为时过早：当您尝试更改Content-type请求的标头时，浏览器发誓并且不会将数据发送到服务器。 事实是Lines服务器分析此字段并根据类型对其进行解析。 我不能自己做。
我向程序部门发送了一个请求，经过讨论，他们向我添加了一个拐杖，就像在授权的情况下一样，-Content-type将在url请求中传输：
function rpc_request_of_resource (current_server_data , rpc_method, rpc_request) { var request = get_request_url('POST', current_server_data, '/rpc','');
此更改将适用于“ Line 7.4.1”及更高版本。 对于此版本以下的所有服务器，将无法使用/ rpc资源。
最后，我要感谢所有向我们发送了有关基于我们的API的应用程序实现问题/希望的客户。 多亏了您，我们进行了一项研究，在此框架内发现并纠正了一些缺陷。
本文中描述的示例将逐渐发展为Lines的成熟HTML客户端。 所有代码都是可读的，您可以对其进行更改或将其用作构建自己的解决方案的基础。 随着时间的流逝，API将充满甚至更多的功能，我们一定会为您提供这些功能。