<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>live cam 录像页面</title>

</head>

<body>

    <video autoplay id="sourcevid" style="width:320;height:240px"></video>

    <canvas id="output" style="display:none"></canvas>

    <script type="text/javascript" charset="utf-8">

        // 发送画面

        //var socket = new WebSocket("ws://"+document.domain+":8080");

        var back = document.getElementById('output');

        var backcontext = back.getContext('2d');

        var video = document.getElementsByTagName('video')[0];

        var success = function(stream){

            video.src = window.URL.createObjectURL(stream);

        }

        /*

        socket.onopen = function(){

            draw();

        }

        */

        var draw = function(){

            try{

                backcontext.drawImage(video,0,0, back.width, back.height);

            }catch(e){

                if (e.name == "NS_ERROR_NOT_AVAILABLE") {

                    return setTimeout(draw, 100);

                } else {

                    throw e;

                }

            }

            // socket.send(back.toDataURL("image/jpeg", 0.5));

            setTimeout(draw, 100);

        }

        navigator.getUserMedia = navigator.getUserMedia

            || navigator.webkitGetUserMedia

            || navigator.mozGetUserMedia

            || navigator.msGetUserMedia;

        navigator.getUserMedia({video:true, audio:false}, success, console.log);

        /*

        // 接收画面

        var receiver_socket = new WebSocket("ws://"+document.domain+":8008");

        var image = document.getElementById('receiver');

        receiver_socket.onmessage = function(data)

        {

            image.src=data.data;

        }

        */

    </script>

</body>

</html>

　　

HTML5 + SOCKET视频传输的更多相关文章

  1. 基于TCP协议的项目架构之Socket流传输的实现

    项目背景  某银行的影像平台由于使用时间长,服务器等配置原因,老影像系统满足不了现在日益增长的数据量的需求,所以急需要升级改造.传统的影像平台使用的是Oracle数据库和简单的架构来存储数据(视频.图 ...

  2. 基于Live555实现RtspServer及高清高分辨率和高码率视频传输优化

    基于Live555实现RtspServer及高清高码率视频传输优化 最近做了一些pc和嵌入式平台的RTSP服务器项目,大多数的要求是简单但是功能全面,并且性能还要强劲.综合考虑后,基本都是在基于liv ...

  3. linux下视频传输测试

    本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 在上一篇<ubuntu下基于qt+OpenCV控制摄像头>的基础上测试了视频传输. 环境:主 ...

  4. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  5. HTML5笔记2——HTML5音/视频标签详解

    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...

  6. Protobuf3 + Netty4: 在socket上传输多种类型的protobuf数据

    Protobuf序列化的字节流数据是不能自描述的,当我们通过socket把数据发送到Client时,Client必须知道发送的是什么类型的数据,才能正确的反序列化它.这严重影响限制了C/S功能的实现, ...

  7. 不完全解决Android微信HTML5 播放视频的问题(不显示控制条，可交互)

    首先你需要知道以下内容: http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93 这是微信为广告商开放的API,我一直认为只有 ...

  8. Android WebView 总结 —— 使用HTML5播放视频及全屏方案

    在APP开发的过程中,会碰到需要在WebView中播放视频的需求,下面讲解一下如何在WebView中使用html5播放视频. 1.让视频在各个Android版本能够正常播放 在AndroidManif ...

  9. HTML5 Socket通信

    HTML5 Socket通信使用起来也是相当不从的,先将部分JS代码与大家分享: var socket; function connect() { var host = "ws://&quo ...

随机推荐

  1. Windows下用Eclipse搭建C/C++开发环境

    本文假定你已经熟悉Java,Eclipse的安装,并能顺利启动和运行Eclipse.此外因为各软件版本在不断更新,有些地方可能不准确,以最新的.原文资料为准. 距上一次写和调C++程序,已经5.6年了 ...

  2. B - Plane of Tanks: Pro

    Description Vasya has been playing Plane of Tanks with his friends the whole year. Now it is time to ...

  3. jdbc连接池中c3p0的配置文件的详解以及在在java中如何使用

    <c3p0-config> <!-- 默认配置,如果没有指定则使用这个配置 --> <default-config> <property name=" ...

  4. Android进阶笔记05：View、SurfaceView 和GLSurfaceView 的关系和区别

    1.  Android游戏当中主要的除了控制类外就是显示类View.SurfaceView是从View基类中派生出来的显示类.android游戏开发中常用的三种视图是:    (1) view.Sur ...

  5. 查看Oracle执行计划的几种方法

    查看Oracle执行计划的几种方法 一.通过PL/SQL Dev工具 1.直接File->New->Explain Plan Window,在窗口中执行sql可以查看计划结果.其中,Cos ...

  6. Java中String类的format方法使用总结

    可参考: http://www.cnblogs.com/fsjohnhuang/p/4094777.html http://kgd1120.iteye.com/blog/1293633 String类 ...

  7. 原生javascript焦点轮播图

    刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...

  8. 通过读取配置文件App.config来获取数据库连接字符串

    有两种方式://通过读取配置文件来获取连接字符串 第一种方式: App.config 文件的格式: <?xml version="1.0" encoding="ut ...

  9. php对UTF8字体串进行单字分割返回数组

    在网上查了很多字符串分割方法,都无法正确对UTF8字符串进行正确分割返回单个字符的数组.经过对FTU8编码的分析写出了下面的方法对UTF8进行分割.本人测试可用.本方法只支持UTF8编码的,其它编码转 ...

  10. Eclipse 调试maven test

    在eclipse中调试maven test 一般情况下,使用如下方式都不能使myeclipse检测到程序中的断点: 项目 -> Run As -> maven test 或 项目 -> ...