首先使用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. HR招聘_(一)_招聘意识

    最近接触到一点HR的工作,贯穿始终,故有点心得,与众人分享.言辞不尽之处,万望指点一二.不胜感激. HR招聘_(一)_招聘意识HR招聘_(二)_招聘方法论(招聘原因及原则) HR招聘_(三)_招聘方法 ...

  2. 二叉树总结—建树和4种遍历方式（递归&&非递归）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u013497151/article/details/27967155 今天总结一下二叉树.要考离散了 ...

  3. Java.控制层.响应工具类.

    Java.控制层.响应工具类. package cn.com.spdbccc.cds.index.web.base; public class ApiResponse { private int co ...

  4. [Vue CLI 3] 插件开发中的 genCacheConfig 细节研究

    在 @vue/cli-plugin-babel/index.js 中: api.genCacheConfig('babel-loader', {}, []) 我们看一下 api.genCacheCon ...

  5. Leetcode3.Longest Substring Without Repeating Characters无重复字符的最长字串

    给定一个字符串,找出不含有重复字符的最长子串的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 无重复字符的最长子串是 "abc",其长度为 ...

  6. V8引擎实现标准ECMA-262（三）

    推荐英文原址ECMA-262 3.构造函数 构造函数除了通过指定的模式创建对象以外,还有另外一个好处--它能够自动设置新创建对象的原型对象,这个原型对象存储在构造函数的Prototype属性中. 例如 ...

  7. 自定义View系列教程01--常用工具介绍

    站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Android多分辨率适配框架(3)- 使用指南 自定 ...

  8. python ddt 实现数据驱动

    ddt 是第三方模块,需安装, pip install ddt DDT包含类的装饰器ddt和两个方法装饰器data(直接输入测试数据) 通常情况下,data中的数据按照一个参数传递给测试用例,如果da ...

  9. Leetcode728.Self Dividing Numbers自除数

    自除数 是指可以被它包含的每一位数除尽的数. 例如,128 是一个自除数,因为 128 % 1 == 0,128 % 2 == 0,128 % 8 == 0. 还有,自除数不允许包含 0 . 给定上边 ...

  10. 【C++】关于map的遍历 删除

    int main(int argc, char* argv[]) { map<string, string> mapData; mapData["a"] = " ...