首先使用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. js实现HashTable

    1.哈希表使用键值对进行的数据储存,在数据的存储位置和它的关键字之间建立一一对应的关系,从而使关键字和结构中的一个唯一的存储位置相对应,所以在检索数据时 只需要根据这个关系便可以快速定位到要找的数据. ...

  2. Django项目：CRM(客户关系管理系统)--11--04PerfectCRM实现King_admin注册功能03

    #base_admin.py #Django admin 注册功能的形式 # sites = { # 'crm':{ # 'customers':CustomerAdmin, # 'customerf ...

  3. bzoj 2705 [SDOI2012]Longge的问题——欧拉函数大水题

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2705 撕逼题.不就是枚举gcd==d,求和phi[ n/d ]么. 然后预处理sqrt (n ...

  4. 使用新版本5+SDK创建最简Android原生工程（Android studio）http://ask.dcloud.net.cn/article/13232

    1 使用Android Studio创建一个工程 2 删除原生工程中Java目录下系统默认创建的源代码 3 复制SDK->libs->lib.5plus.base-release.aar文 ...

  5. SpringMVC代码复制版

    Lib目录 Java目录 HelloController文件代码 import org.springframework.web.servlet.ModelAndView; import org.spr ...

  6. oracle 索引监控

           索引对于在大量数据里检索出少量数据库的查询操作来说是高效的,可是对于DML操作来说.却是负面的:①其对于insert 操作的反面影响最大.该表的索引越多,更新的索引越多,insert 操 ...

  7. 当node升级后导致webpack打包出错，node-saas出问题的解决办法

    报错信息如下: ERROR in ./node_modules/_extract-text-webpack-plugin@3.0.2@extract-text-webpack-plugin/dist/ ...

  8. Python 使用BeautifulSoup模块抽取数据

  9. day39-Spring 18-Spring的JDBC模板：查询的操作

    package cn.itcast.spring3.demo2; import java.sql.ResultSet; import java.sql.SQLException; import jav ...

  10. python系列之（4）豆瓣图书《平凡的世界》书评及情感分析

    本篇主要是通过对豆瓣图书<平凡的世界>短评进行抓取并进行分析,并用snowNLP对其进行情感分析. 用到的模块有snowNLP,是一个python库,用来进行情感分析. 1.抓取数据 我们 ...