首先使用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. 怎样判断一个exe可执行程序(dll文件)是32位的还是64位的

    看到一个比较简单粗暴的方式,做个记录. 直接用记事本或者notepad++(文本编辑软件都可)打开exe文件(dll文件), 会有很多乱码,接下来只需要在第二段中找到PE两个字母,在其后的不远出会出现 ...

  2. 从0开始学习 GitHub 系列之「04.向GitHub 提交代码」

    之前的这篇文章「从0开始学习 GitHub 系列之「Git速成」」相信大家都已经对 Git 的基本操作熟悉了,但是这篇文章只介绍了对本地 Git 仓库的基本操作,今天我就来介绍下如何跟远程仓库一起协作 ...

  3. golang数组 排序和查找

    package main import "fmt" func BubbleSort(arr *[5]int){ fmt.Println("排序前arr=",(* ...

  4. AutoDesk产品，Maya 2018 安装，Microsoft Visual C++ 2012 安装失败，结果 = -2147024546，安装Microsoft Visual C++ 2012 Redistributable 错误0x80070005 等等

    今日老弟装Maya 2018出现问题,我帮忙解决了一下问题,过程颇为曲折,记录一下,看能否帮到有类似困惑的朋友. 我和老弟的电脑牌子一样,就现在自己电脑上装了,竟然开始和他的错误是一样的!都是Micr ...

  5. 为什么不用原生的Spring Cloud Config

    引言 近几年传统应用架构已经逐渐朝着微服务架构演进.那么随着业务的发展,微服务越来越庞大,此时服务配置的管理变得会复杂起来.为了方便服务配置文件统一管理,实时更新,配置中心应运而生.其实,所谓配置中心 ...

  6. 【POJ 3294】Life Forms

    [链接]h在这里写链接 [题意] 给你n个字符串. 让你找最长的字符串s; 这个s在超过一半的子串里面都有出现过且长度大于n/2; 如果有多个,输出多行. (按字典序输出) 也没说会不会出现大写. [ ...

  7. log4j日志系统

    在项目开发中,记录错误日志是一个很有必要功能.一是方便调试:二是便于发现系统运行过程中的错误:三是存储业务数据,便于后期分析: 在java中,记录日志,有很多种方式. 比如,自己实现. 自己写类,将日 ...

  8. PHP学习(语言结构语句）

    switch case语句 for循环语句: foreach循环语句 常用于遍历数组,一般有两种使用方式:不取下标.取下标. (1)只取值,不取下标 <?php foreach (数组 as 值 ...

  9. 洛谷1602 Sramoc问题

      刚看到这道题的时候感觉像spfa. 然后发现其实bfs就可以做了. //Serene #include<algorithm> #include<iostream> #inc ...

  10. 2017校赛 问题 F: 懒人得多动脑

    题目描述 小D的家A和学校B都恰好在以点F为焦点的双曲线上,而小D每日所需的生活水源在一条平行该双曲线准线的直线上,设它的值为v.大家都知道,每天都是要喝水的,但是小D有点懒,他希望自己能在去上学或者 ...