如果用HTML5做一个在线视频聊天【原创】

首先使用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>

效果如下(不要看人!看效果^_^):

时间: 2024-10-12 07:12:03

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

做一个群组聊天页面

要做个群组聊天的页面,参考微信的web版本,大致就是分为左右两列,左边是群组列表,右边是群组中的对话 示例图如下: 这个页面风格是使用ACE做的,再次啧啧下,ACE真TMD强大,这个页面的风格很招人喜欢. 做这个页面刚开始的时候我走了弯路,初步想的是使用iframe,左侧群组聊天页面是页面加载的,右侧的群组对话框是个iframe.然后点击左侧的任意一个群组,右侧的对话iframe就修改src,然后更新对话的时候也超简单,直接iframe重新加载一下就ok了. 但是呢,后来发现,我这样需要写的co

手把手教你用苹果cms做一个电影视频网站 可直接在线播放

现在大家在网上看电影很方便了,因为电影网站多如牛毛!那很多人在想,做电影网站难么?能否拥有一个属于自己的电影网站呢?其实真的可以,而且很简单下面我们就来手把手的教你如何做一个电影网站!因为我的空间是PHP的,只能选择PHP CMS,影视网站的CMS有很多,飞飞.苹果.海洋.PHPVOD等等,之所以选择苹果CMS,有几点: 1.选择一套电影网站建站系统(CMS),这个非常重要,建站系统说白了就是集成化后台管理,把网站当成博客来运营,但关键是你得知道有哪些电影建站系统?而自己应该选哪一个比较适合?

安卓入门:加深ListView学习,做一个简单的聊天界面

1,一个简单的聊天窗口也是ListView显示的 首先是Main.xml是要建立一个列ListView,下面是输入框和发送按钮 然后是单独的消息列表项的界面 接着就是要建立一个自定义的适配器,搭建列表项和ListView之间的桥梁 具体的代码如下(注意LineraLayout布局,没说方向的时候默认是水平方向的,还有关于layout_weight权重的理解): activity_main.xml <?xml version="1.0" encoding="utf-8&q

delphi视频聊天

用Delphi开发视频聊天软件 一.引言 我们知道视频聊天软件的关键技术在于采集视频,并实时传输给聊天软件在线的人.对于视频的采集,这里采用微软公司的关于数字视频的一个软件包VFW(Video for Windows).相信很多人对它都很熟习,VFW能使应用程序通过数字化设备从传统的模拟视频源得到数字化的视频剪辑,VFW的一个关键思想是播放时不需要专用硬件.为了解决数字视频数据量大的问题,需要对数据进行压缩,而VFW引进了AVI的文件标准.该标准未规定如何对视频进行捕捉.压缩及播放,仅规定视频和

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

博客原文地址 建议看这篇之前先看一下使用WebRTC搭建前端视频聊天室——入门篇 如果需要搭建实例的话可以参照SkyRTC-demo:github地址 其中使用了两个库:SkyRTC(github地址)和SkyRTC-client(github地址) 这两个库和demo都是我写的,如果有bug或是错误欢迎指出,我会尽力更正 前面的话 这篇文章讲述了WebRTC中所涉及的信令交换以及聊天室中的信令交换,主要内容来自WebRTC in the real world: STUN, TURN and s

首次曝光!在线视频衣物精确检索技术_开启刷剧败明星同款时代

原文地址 CVPR是由全球最大的非营利专业技术学会IEEE(电气和电子工程师协会)举办的计算机视觉领域的国际顶会,2017CVPR收到超过2500篇论文投递,最终收录不到800篇,阿里巴巴集团iDST和AI LAB 有多篇论文被收录. 今天为大家深入解读被CVPR 2017收录的论文之一.来自阿里巴巴iDST 视频分析团队的<从视频到电商:视频衣物精确检索>. <从视频到电商:视频衣物精确检索>围绕视频电商业务场景,提出了一个在线视频衣物精确检索系统.该系统能够满足用户在观看影视剧

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

Flex,Fms3系列文章导航 Flex,Fms3相关文章索引 本篇是视频聊天,会议开发实例系列文章的第3篇,该系列所有文章链接如下: http://www.cnblogs.com/aierong/archive/2008/12/30/Flex.html#sp 1.工作原理NetStream.publish方法的应用publish () 方法:将音频流.视频流和文本消息流从客户端发送到 Flash Media Server,并可选择在传输期间录制该流. 此方法仅供指定的流的发布者使用.第1个参数

实现一个简单的视频聊天室(源码)

在 <实现一个简单的语音聊天室>一文发布后,很多朋友建议我也实现一个视频聊天室给他们参考一下,其实,视频聊天室与语音聊天室的原理是差不多的,由于加入了摄像头.视频的处理,逻辑会繁杂一些,本文就实现一个简单的多人视频聊天系统,让多个人可以进入同一个房间进行语音视频沟通.先看看3个人进行视频聊天的运行效果截图:       上面两张截图分别是:登录界面.标注了各个控件的视频聊天室的主界面. 一. C/S结构 很明显,我这个语音聊天室采用的是C/S结构,整个项目结构相对比较简单,如下所示: 同语音聊

如何做一个自己的开源聊天项目?(仿微信)

万事开头难 在我决定做开源是因为自身工作接触到大多数的项目都是基于开源大佬写的框架,自觉惭愧,工作以来一直忙于业务与功能实现,多多少少做过的几个项目也没能抽出部分好一点的功能业务Maven包什么的提供也同行使用或借鉴,这实在是有悖于自己的初心. 决定做开源是今年(2018)7月末的时候,自己曾做的一个Iot项目刚刚被几个网上的朋友问到,并寻求源码,那么久做了一个Demo,并放到了GitHub上. 之后感觉应该做一个有自己情感注入的项目才行,而不是工作上的现实交易的项目,我想做一个属于自己的项目,