<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. 文件I/O（不带缓冲）之文件共享

    UNIX系统支持在不同进程间共享打开的文件. 内核使用三种数据结构表示打开的文件,它们之间的关系决定了在文件共享方面一个进程对另一个进程可能产生的影响. (1)每个进程在进程表中都有一个记录项,记录项 ...

  2. Expectation Maximization and GMM

    Jensen不等式 Jensen不等式给出了积分的凸函数值必定大于凸函数(convex)的积分值的定理.在凸函数曲线上的任意两点间连接一条线段,那么线段会位于曲线之上,这就是将Jensen不等式应用到 ...

  3. maven管理多模块系统

    1.创建mydemo项目cd d:\myworkmvn archetype:create -DgroupId=com.example.mydemo -DartifactId=mydemo 生成myde ...

  4. 物理CPU、物理核跟逻辑核的区分

    一般来说,物理CPU个数×每颗核数就应该等于逻辑CPU的个数,如果不相等的话,则表示服务器的CPU支持超线程技术 ,所以您的电脑是双核的. 一 概念① 物理CPU 实际Server中插槽上的CPU个数 ...

  5. H5-xhtml+css2-静态百度首页练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Java Concurrency - java.util.concurrent API Class Diagram

    摘自: www.uml-diagrams.org Here we provide several UML class diagrams for the Java™ 7 java.util.concur ...

  7. ActiveMQ(5.10.0) - Connection Configuration URI

    An Apache ActiveMQ connection can be configured by explicitly setting properties on the ActiveMQConn ...

  8. Animated App Boot Example : Fastest animation at app boot time

    This iPhone app shows how to create an animation that is displayed when the app starts. The animatio ...

  9. sqlserver 公有表达式

    了解通用表达式: 为了让代码简洁:在一个查询中引用另外的结果集都是通过视图而不是子查询来进行分解,但是视图是系统级对象,如果数据集仅仅需要在存储过程或是自定义函数中使用一次的话,使用view有些奢侈哈 ...

  10. CI 更新字段

    function update_click_num($brand_id) { $this->db->set('click_num', 'click_num+1', FALSE); $thi ...