html5手机视频直播

关键字：手机视频直播、视频直播、html5视频直播

本来想用WebRTC做视频直播，在用之前想了解下用比较原始的方式做出来是什么效果，所以就有了下面的程序。

实现原理：一个视频采集页面，一个视频播放页面，一个node.js服务端程序。视频采集页面采集视频数据通过WebSocket发送到服务端，服务端转发到视频播放页面。
视频采集页面在手机上需要Firefox浏览器才能支持，电脑上支持的浏览器比较多；视频播放页面在手机和电脑上浏览器都能用。

1、启动node.js服务端程序，node.js的安装网上比较多，此处不再阐述。

server.js代码：

var WebSocketServer = require('ws').Server;
//监听端口8888，客户端连接这个端口
var wss = new WebSocketServer({ port: 8888, verifyClient: socketVerify });//连接验证，可以写验证语句
function socketVerify(info) {console.log(info.req.url); return true;
}wss.on('connection', function (ws) {//输出连接客户端信息console.log("connection");console.log(ws._ultron.ee._idleStart);ws.on('message', function (data, flags) {wss.clients.forEach(function each(client) {client.send(data); //读取到的数据发送给所有客户端//console.log(data);});});ws.on('close', function (e) {console.log('colse');});
});

2、通过浏览器请求视频采集页面，手机请求需要 Firefox浏览器。采集页面的实现方式是通过video标签采集和播放视频，将视频图像绘制到canvas标签上，再通过WebSocket将canvas数据发送到服务端；本示例可通过改变canvas大小以改变发送数据的大小，发送数据较大对网络和服务端的处理能力要求较高。如果哪位同学有好的数据压缩和解析方案请给予指导，谢谢！

视频采集页面代码：

<!doctype html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>视频采集</title><script type="text/javascript">var ws;var wid = 50;document.addEventListener('DOMContentLoaded', function () {WSConnect();var video = document.querySelector('video');var canvas = document.querySelector('canvas');var context = canvas.getContext('2d');var iFilter = 0;var filters = ['grayscale','sepia','blur','brightness','contrast','hue-rotate','hue-rotate2','hue-rotate3','saturate','invert','none'];navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.mozGetUserMedia || navigator.msGetUserMedia;window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;if (navigator.getUserMedia) {navigator.getUserMedia({ video: true, audio: false }, onSuccessCallback, onErrorCallback);function onSuccessCallback(stream) {video.src = window.URL.createObjectURL(stream) || stream;video.play();}function onErrorCallback(e) {var expl = 'An error occurred: [Reason: ' + e.code + ']';console.error(expl);alert(expl);return;}} else {document.querySelector('.container').style.visibility = 'hidden';document.querySelector('.warning').style.visibility = 'visible';return;}function getBlob(buffer, format) {try {return new Blob(buffer, { type: format });} catch (e) {var bb = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder);buffer.forEach(function (buf) {bb.append(buf);});return bb.getBlob(format);}}function get_uuid() {var uuid = '';for (var i = 0; i < 32; i++) {uuid += Math.floor(Math.random() * 16).toString(16);}return uuid;}var uuid = get_uuid();function drawVideoAtCanvas(obj, context) {window.setInterval(function () {context.drawImage(obj, 0, 0, wid, wid);var base64 = document.getElementById("icanvas").toDataURL('image/png', 1);document.getElementById("slenth").value = base64.length;var binary = atob(base64.split(',')[1]);var len = binary.length;var buf = new Uint8Array(len)for (var i = 0; i < len; i++){buf[i] = binary.charCodeAt(i);}var blob = getBlob([buf], 'image/png');ws.send(blob);}, 100);}video.addEventListener('play', function () {drawVideoAtCanvas(this, context);}, false);}, false);function WSConnect() {ws = new WebSocket(document.getElementById('serverInput').value);ws.onopen = function (evt) {};ws.onclose = function (evt) {};ws.onmessage = function (evt) {}; ws.onerror = function (evt) {alert('Error: ' + evt.data);};}function SetSize(value) {wid = value;document.getElementById("icanvas").width = wid;document.getElementById("icanvas").height = wid;document.getElementById("ssize").value = wid;}</script>
</head>
<body><div id="input"><!--此处设置视频转发服务地址--><input id="serverInput" type="text" value="ws://localhost:8888"><input type="range" name="points" min="20" max="200" value="50" οnchange="SetSize(this.value)" /><label>发送大小：</label><input id="ssize" type="text" value="50"><label>base64长度：</label><input id="slenth" type="text" value="50"></div><div><div><video webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" width="100%" height="100%" preload="auto"></video></div><div><canvas id="icanvas" width="50" height="50"></canvas></div></div></body></html>

3、通过浏览器请求视频播放页面，手机和电脑上都可以通过大部分浏览器进行播放。实现原理是通过WebSocket连接视频转发地址，将接收到的数据显示到img标签上。

视频播放页面代码：

<!doctype html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>视频播放</title><script type="text/javascript">var ws;document.addEventListener('DOMContentLoaded', function () {WSConnect();}, false);var icount = 0;function WSConnect() {ws = new WebSocket(document.getElementById('serverInput').value);ws.onopen = function (evt) {};ws.onclose = function (evt) {};ws.onmessage = function (evt) {document.getElementById("img1").src = window.URL.createObjectURL(evt.data);}; ws.onerror = function (evt) {alert('Error: ' + evt.data);};}function SetSize(value){document.getElementById("ssize").value = value;var childs = document.getElementById("container").childNodes;for (var i = childs.length - 1; i >= 0; i--) {if(childs[i].tagName == 'IMG'){childs[i].width = value;childs[i].height = value;}}}function ArrayBufferToBase64(buffer) {var binary = '';var bytes = new Uint8Array(buffer);var len = bytes.byteLength;for (var i = 0; i < len; i++) {binary += String.fromCharCode(bytes[i]);}return window.btoa(binary);}</script>
</head>
<body><div id="input"><!--此处设置视频转发服务地址--><input id="serverInput" type="text" value="ws://localhost:8888"><input type="range" name="points" min="20" max="500" value="50" οnchange="SetSize(this.value)" /><label>图像大小：</label><input id="ssize" type="text" value="50"></div><div id="container"><img id="img1" /></div>
</body></html>

示例源码下载地址：http://download.csdn.net/download/welliu/10104878

提供了多客户端的支持页面和服务端程序：

html5手机视频直播相关推荐

直播手机视频app html5,html5做视频直播，iPhone不支持
html5做视频直播 Android可以获取到数据并发送到后台 iphone手机不支持主要在这一块 navigator.getUserMedia 各位大神有什么好的办法能解决这个问题 if( doc ...
HTML5实现视频直播功能思路详解
HTML5实现视频直播功能思路详解最近视频直播比较火,发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主,PC端则以 RTMP 为主实时性较好,接下 ...
手机视频直播解决方案
手机视频直播解决方案一.方案简介本公司的手机视频直播.点播解决系统,是以2.75G.3G.WLAN网络的音视频压缩.传输技术为核心,将广电网.通信网.互联网的音视频应用无缝整合,为电视台.媒体.教 ...
一对一视频直播源码|手机视频直播平台android源码/可打包视频直播
源码介绍一对一视频直播源码|手机视频直播平台android源码集视频.语音.动态.直播.社交等功能于一身. 前端功能说明: 登入注册:手机验证码登入.编辑个人信息.上传头像首页直播:查看主播用户. ...
手机视频直播系统开发关于Js敏感词替换成*功能介绍
手机视频直播系统开发关于Js敏感词替换成*功能介绍,实现字符串过滤的方式有很多种,每个编程语言都有相应的处理方式,因语言不同,所使用的函数就有所不同,但最终的目的都是为达到用户的绿色上网,及安全上网, ...
手机视频直播系统源码，直播平台用户登陆签到分析
2.一套完整的手机视频直播系统源码,必须具备完善的功能机制,才能使自己的产品达到行业市场当中的佼佼者.每家开发的直播平台在功能细节上都会略有不同,就拿云豹科技来说,我们所开发的直播平台,功能细节优化的 ...
3G手机视频网络直播
3G手机视频网络直播是指通过手机内置的摄像头,将正在拍摄的视频直接用3G网络上传到网站进行直播,让全世界的网友可以同时.无时差的欣赏即时视频现场. 3G手机视频直播系统是南京索品科技有限公司长期研发. ...
王子恢：手机视频牌照与行政权力租界
2010年2月12日作者:王子恢转载出处:王子恢的BLOG 推荐人:一切随缘虽然晚了点,但广电总局发放手机视频牌照的事情太露骨,必须我来说两句.首批手机视频牌照,广电总局全给了国资背景的嫡亲,民 ...
手机视频重头戏不好演
2010年4月13日作者:倪兰转载出处:通信世界周刊推荐人:fflinda 在某咨询公司2009年底的一份调研数据中,手机视频仅位列中国手机网民最常使用的约20项手机增值服务的第15位,手机电视 ...

html5手机视频直播

html5手机视频直播相关推荐

最新文章

热门文章