首先使用node.js 搭建一个简易的 websocket服务器：

var cons = new Array();

var ws = require('ws').Server;

var server = new ws({  port: 8888 });

server.on('connection', function (ws) {

    console.log('new connection founded successfully');

    cons.push(ws);

    ws.on('message', function (data) {

        for (var i = 0; i < cons.length; i++) {

            cons[i].send(data);

        }

    });

    ws.on('close', function () {

        for (var i = 0; i < cons.length; i++) {

            if (cons[i] == ws) cons.splice(i, 1);

        }

    });

});

console.log('websocket-server running...');

接下来为了更容易理解， 我在这分为两个页面，一个为视频者页面，另一个是观看者页面

下面代码为视频者页面：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <title></title>

    <script src="jQuery_1.8.2.min.js"></script>

    <script type="text/javascript">

        $(function () {

            var video = document.getElementById("video");

            var canvas = document.getElementById("canvas"),

                context = canvas.getContext("2d");

            var w;

            if (navigator.webkitGetUserMedia) {

                navigator.webkitGetUserMedia({ video: true }, function (stream) {

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

                    video.play();

                    w = new WebSocket(url);

                    w.onopen = function () {

                        sendImg();

                    }

                    w.onmessage = function (e) {

                        sendImg();

                    }

                }, function () {

                    console.log("video error");

                });

                var host = 'localhost';

                var port = 8888;

                var url = 'ws://' + host + ':' + port + '/';

                function sendImg() {

                    context.drawImage(video, 0, 0, 320, 320);

                    var imgData = canvas.toDataURL();

                    w.send(imgData);

                }

            }

        });

    </script>

</head>

<body>

    <video id="video" width="640" height="480" style="background:#000;" autoplay></video>

    <canvas style="display:none" id="canvas" width="320" height="320"></canvas>

</body>

</html>

接下来是观看者页面：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <title></title>

    <script src="jQuery_1.8.2.min.js"></script>

    <script>

        $(function () {

            var host = 'localhost';

            var port = 8888;

            var url = 'ws://' + host + ':' + port + '/';

            var w = new WebSocket(url);

            w.onmessage = function (e) {

                $("#canvas").attr("src", e.data);

            }

        });

    </script>

</head>

<body>

    <img  id="canvas" width="320" height="320" />

</body>

</html>

效果如下（不要看人！看效果^_^）：

如果用HTML5做一个在线视频聊天【原创】的更多相关文章

  1. 用ServletContext做一个简单的聊天室

    这里主要是ServletContext的一个特性:ServletContext是一个公共的空间,可以被所有的客户访问.由此可见ServletContext比cookie和session的作用范围要大[ ...

  2. 用javascript和html5做一个音乐播放器，附带源码

    效果图: 实现的功能 1.首页 2.底部播放控件 3.播放页面 4.播放列表 5.排行榜 6.音乐搜索 输入搜索关键词,点击放大镜图标 7.侧边栏 目录结构 开发心得与总结 1.轮播图 首先感谢作者S ...

  3. delphi视频聊天

    用Delphi开发视频聊天软件 一.引言 我们知道视频聊天软件的关键技术在于采集视频,并实时传输给聊天软件在线的人.对于视频的采集,这里采用微软公司的关于数字视频的一个软件包VFW(Video for ...

  4. 使用WebRTC搭建前端视频聊天室——信令篇

    博客原文地址 建议看这篇之前先看一下使用WebRTC搭建前端视频聊天室——入门篇 如果需要搭建实例的话可以参照SkyRTC-demo:github地址 其中使用了两个库:SkyRTC(github地址 ...

  5. 用Delphi开发视频聊天软件

    摘要:目前网上视频聊天软件.视频会议软件.可视IP电话软件随处可见,你是否想自己做一个玩玩?其实这类软件无非是视频加上网络而建成的.如果熟悉视频捕捉和网络传输技术,根本就难不倒你.微软为软件开发人员提 ...

  6. WebRTC搭建前端视频聊天室——信令篇

    这篇文章讲述了WebRTC中所涉及的信令交换以及聊天室中的信令交换,主要内容来自WebRTC in the real world: STUN, TURN and signaling,我在这里提取出的一 ...

  7. 在线教学、视频会议 Webus Fox（1）文本、语音、视频聊天及电子白板基本用法

    Webus Fox是基于网页的在线教学.视频会议软件,不用安装,直接使用.它提供文本.语音.视频聊天,文件共享.电子白板等功能. 1. 登录 访问 http://flash.webus.cn/#,用自 ...

  8. Fms3和Flex打造在线多人视频会议和视频聊天(附原代码)

    Flex,Fms3系列文章导航 Flex,Fms3相关文章索引 本篇是视频聊天,会议开发实例系列文章的第3篇,该系列所有文章链接如下: http://www.cnblogs.com/aierong/a ...

  9. 基于 WPF和ASP.NET Core 在线音视频聊天项目

    Dimension 基于 .NET 6 的在线音视频聊天项目 WPF和ASP.NET API开发 使用第三方依赖介绍 公用依赖 log4net 日志记录. SignalR 用于服务器与客户端的通讯手段 ...

随机推荐

  1. 【JZOJ3299】【SDOI2013】保护出题人 三分+凸壳

    题面 ​出题人铭铭认为给SDOI2012 出题太可怕了,因为总要被骂,于是他又给SDOI2013 出题了. 参加SDOI2012 的小朋友们释放出大量的僵尸,企图攻击铭铭的家.而你作为SDOI2013 ...

  2. Android——系统权限

    Android是一个特权分隔的操作系统,每一个应用程序运行在不同的系统身份中(Linux的user ID和group ID).系统部分和不同的身份被隔离开来.因此,Linux隔离了应用程序(与其它程序 ...

  3. Linux硬链接和软连接

    硬链接(hard link): A是B的硬链接(A和B都是文件名),则A的目录项中的inode节点号与B的目录项中的inode节点号相同,即一个inode节点对应两个不同的文件名,两个文件名指向同一个 ...

  4. C++之正则表示，字符串是否为全字母或者全数字

    bool isLetter(std::string& inputtext){ tr1::regex reg("^[A-Za-z]+$"); bool bValid = tr ...

  5. 【水滴石穿】rn_antd_dva_reactnavigation

    这个项目好像就是记录了一个数据的流向,大体思想好像是这个 项目地址:https://github.com/Yangzhuren/rn_antd_dva_reactnavigation 先看效果 第一个 ...

  6. 聊聊jdk http的HeaderFilter

    序 本文主要研究一下jdk http的HeaderFilter. FilterFactory java.net.http/jdk/internal/net/http/FilterFactory.jav ...

  7. Framework7 无限滚动

    html结构 <div class="page"> <div class="page-content infinite-scroll"> ...

  8. Timer和DispatcherTimer简单使用

    1. 设定计时器相关属性,使用委托方法处理事件触发 DispatcherTimer dispatcherTimer= new DispatcherTimer(); dispatcherTimer.Ti ...

  9. 【Django入坑之路】Django与Query Ajax的交互

    1:Jquery.ajax后端交互数据 $.ajax({ Url: /路由处理/, Type: GET/POST, #传送请求类型 Data: {user: “ XXXX”,pass:”XXXX”}, ...

  10. mariadb配置文件优化参数

    mariadb数据库优化需要根据自己业务需求以及根据硬件配置来进行参数优化,下面是一些关于mariadb数据库参数优化的配置文件. 1 如下为128G内存32线程处理器的mariadb配置参数优化: ...