码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-09-05 23:19:01      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:code   处理过程   调用   需要   tp服务器   throw   pen   意图   png   

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

 (一) 实现效果

技术图片

 

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

  1. 适应任何浏览器。ocx主要适应IE浏览器。
  2. ocx与网页在同一个进程。如果ocx不稳定,容易造成浏览器崩溃。
  3. 网页打开关闭也会造成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);
                }
            });
        }

从服务器获取的数据就是base64格式的图像数据,直接赋值就能显示图像。网页端的调用是很简单。关键是在本地实现http服务。

(四)本地app实现http服务

  c#实现http服务并不困难,有封装非常好的类库。由于调用并不频繁,所以对http服务器的性能要求不高。采用最方便的实现方式即可。如果需要非常高效http服务,可以参考我的文章《自己动手,开发轻量级,高性能http服务器》。本文不对如何实现http服务器再做叙述。

(五)实现摄像头视频捕做

    opencv对摄像头调用提供了很好的封装。具体调用方法见文章《基于opencv,开发摄像头播放程序》

后记 本文提供了网页操作本地资源的一种新思路;该解决方案不仅仅可以适应于摄像头播放。本地应用程序可以实现的操作,网页都可以实现;网页用过本地应用借力打力,无所不能。采用此方案不用再担心浏览器兼容问题了,开发人员终于可以睡个好觉了。

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

标签:code   处理过程   调用   需要   tp服务器   throw   pen   意图   png   

原文地址:https://www.cnblogs.com/yuanchenhui/p/11469701.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!