网页播放摄像头视频一种新的实现方式（非ocx方式）

最新推荐文章于 2024-09-08 11:02:15 发布

源之缘-OFD全方位解决方案

最新推荐文章于 2024-09-08 11:02:15 发布

阅读量604

点赞数

本人研究ofd多年，独立研发了ofd阅读器、ofd轻阅读、ofd与pdf互转、ofd模板设计与生成、ofd拆分合并、ofd签章和验签等工具！

本文链接：https://blog.csdn.net/qq_29939347/article/details/100570753

版权

前言出于安全性考虑，浏览器对网页调用本地资源做了诸多限制。单纯的js是不能调用本地摄像头的，最常用的解决方案是通过ocx来实现。ocx是IE浏览器的扩展插件，并不是通用标准，很多浏览器并不支持ocx。有没有别的方案实现视频播放？作者另辟蹊径，通过非常规手段实现了摄像头视频捕做；这种方案采用标准js代码实现，可以适应任何浏览器。

（一）实现效果

　　图的左边是网页显示的视频，右端是本地app显示的视频。看到此图，你也许猜到实现方案的一点端倪。网页视频也是借助本地程序之力实现的；常规的实现方案是借助ocx。本文实现方案相比于ocx方案有如下优点：

适应任何浏览器。ocx主要适应IE浏览器。
ocx与网页在同一个进程。如果ocx不稳定，容易造成浏览器崩溃。
网页打开关闭也会造成ocx生成和卸载，性能受影响。

（二）实现方案示意图

　　网页通过ajax从应用程序获取视频数据；应用程序实现了http服务，并将视频数据通过http协议发送到网页。下文逐步讲解每一步处理过程。

（三）网页播放视频流

　　视频本质上是图片的连续播放。首先要解决的问题是：ajax获取了图像数据，能实时更新显示。html显示图像可用如下方式：

<img id="idImg" src="data:image/jpg;base64,/9j/4AAQS...(base64表示的图像数据)">

src对应的数据可用通过ajax，从http服务器获取。设置定时器，不断的从服务器获取图像信息，不断的更新img标签的src数据。这就实现了视频播放。

ajax调用代码如下：

  function GetImgFromCarmera() {
            var setValue = {
                'GetImg': "Base64"
            };
            var json_setValue = JSON.stringify(setValue);

            $.ajax({
                type: "Post",
                url: "http://127.0.0.1:18168/Invent/Web/SetAppParam",
                data: json_setValue,
                async: true,
                success: function (result) {

                    var jsonObj = JSON.parse(result);
                    var img = document.getElementById("idImg");
                    img.src = jsonObj.Img;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //alert(textStatus + ":" + errorThrown);
                }
            });
        }