html5手机视频直播
2017-11-05 17:08
2086 查看
关键字：手机视频直播、视频直播、html5视频直播
本来想用WebRTC做视频直播，在用之前想了解下用比较原始的方式做出来是什么效果，所以就有了下面的程序。
实现原理：一个视频采集页面，一个视频播放页面，一个node.js服务端程序。视频采集页面采集视频数据通过WebSocket发送到服务端，服务端转发到视频播放页面。
视频采集页面在手机上需要Firefox浏览器才能支持，电脑上支持的浏览器比较多；视频播放页面在手机和电脑上浏览器都能用。
1、启动node.js服务端程序，node.js的安装网上比较多，此处不再阐述。
server.js代码：
2、通过浏览器请求视频采集页面，手机请求需要Firefox浏览器。采集页面的实现方式是通过video标签采集和播放视频，将视频图像绘制到canvas标签上，再通过WebSocket将canvas数据发送到服务端；本示例可通过改变canvas大小以改变发送数据的大小，发送数据较大对网络和服务端的处理能力要求较高。如果哪位同学有好的数据压缩和解析方案请给予指导，谢谢！
视频采集页面代码：
3、通过浏览器请求视频播放页面，手机和电脑上都可以通过大部分浏览器进行播放。实现原理是通过WebSocket连接视频转发地址，将接收到的数据显示到img标签上。
视频播放页面代码：
示例源码下载地址：http://download.csdn.net/download/welliu/10104878
提供了多客户端的支持页面和服务端程序：
本来想用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" onchange="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" onchange="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
提供了多客户端的支持页面和服务端程序：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用 WebSockets 进行 HTML5 视频直播
- html5 Video控件视频播放，电脑和手机上都能兼容。（mp4格式 电脑和android、ios都能播放）
- 手机Android音视频采集与直播推送，实现单兵、移动监控类应用
- HTML5 视频直播一站式扫盲书目录
- 手机Android音视频采集与直播推送，实现单兵、移动监控类应用
- 手机Android音视频采集与直播推送，实现单兵、移动监控类应用
- 手机Android音视频采集与直播推送，实现单兵、移动监控类应用
- 手机视频采集直播 bambuser.com 轻松一个手机，就可以做视频直播！
- 终于用live555 实现了摄像头直播视频，手机视频直播
- 手机Android音视频采集与直播推送，实现单兵、移动监控类应用
- 手机直播源码：常见的视频直播系统相关协议
- HTML5 视频直播
- [转载]EasyDarwin手机直播是如何实现的快速显示视频的方法
- 手机视频一对一直播系统
- [转载]手机发起视频直播的完整图文教程(基于视频云平台)
- 3G手机视频网络直播
- 在线直播源码，手机视频直播搭建解决方案
- 视频直播，手机直播，视频秀的app简介
- 使用 WebSockets 进行 HTML5 视频直播
- 手机视频直播解决方案