zoukankan      html  css  js  c++  java
  • HTML5 + SOCKET视频传输

    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>live cam 录像页面</title>
    </head>
    <body>
        <video autoplay id="sourcevid" style="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>
    

      

  • 相关阅读:
    lua 源码阅读 5.3.5 笔记
    lua 源码阅读 1.1 -> 2.1
    lua 1.0 源码分析 -- 总结
    lua 1.0 源码分析 -- 2 内存回收
    lua 1.0 源码分析 -- 1 lua 的虚拟指令
    protoc-c 阅读笔记
    protoc-c 安装记录
    转前端开发中常用工具函数总结
    sql 设计规范
    web.config文件详解[转]
  • 原文地址:https://www.cnblogs.com/adtuu/p/4688193.html
Copyright © 2011-2022 走看看