首先使用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. C++ operator new和new operator的区别

    new operator 当你写这种代码: string *ps = new string("Memory Management"); 你使用的new是new  operator. ...

  2. 第八章—BOM（一）

    ECMAscript是JS的核心,而要在web上使用JS,那么BOM无疑是真正的核心.BOM叫浏览器对象模型,它提供了许多对象,用于访问浏览器的功能. BOM的核心对象是window,它表示浏览器的一 ...

  3. 请自行检查是否安装VC9运行库？？

    phpStudy是一款PHP调试环境的程序集成包,该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer,一次性安装,无须配置即可使用,是非常方便.好用的 ...

  4. Oracle操作XML各种场景介绍

    版权声明:凭栏处.潇潇雨歇. https://blog.csdn.net/IndexMan/article/details/28130961 近期在研究Oracle PLSQL中对于XML的系列操作. ...

  5. [leetcode] Reverse Words in a String [1]

    一.题目: Given an input string, reverse the string word by word. For example, Given s = "the sky i ...

  6. yii生成Model出错:yii-gii-generators-model-Generator.json No such file or dictory

    讲runtime 这个文件夹添加权限 chmod o+w runtime

  7. Liferay Model Hints

    这篇文章主要介绍如何通过model hint 来修改liferay builder service生成数据库表中默认字段的长度. 1.什么是Model Hints? 它是对liferay builde ...

  8. 弘康人寿基于 RocketMQ 构建微服务边界总线的实践

    随着互联网+和平台化战略的兴起,各个行业的 IT 系统都在向互联网架构发展,涉及的主要技术包括微服务.消息和弹性计算等,采用微服务架构实现服务高内聚.低耦合,通过异步消息完成交易快速响应和高并发.由于 ...

  9. Effective Modern C++：02auto

    05:优先使用auto,而非显示类型声明 显示类型声明有下面一些缺点: int x; //未初始化,或者初始化为0,视语境而定 template<typename It> void dwi ...

  10. Linux进程管理（四、 进程终结）

    进程调用exit()会终结当前进程,可以显式调用,也可以隐式: c语言main函数结束时编译器会自动加入exit调用 exit是系统调用,对应内核里的sys_exit() -> do_exit( ...