本文已参与「新人创作礼」活动，一起开启掘金创作之路。
<!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 type="text/javascript">
//window.onload = function () { }
var ws;//WebSocket对象
var wsUrl = "ws://192.168.1.120:2012";//支持WebSocket协议的服务器端地址
//var wsUrl = "ws://192.168.1.233:559/192.168.1.205:8000:admin:admin12345:0:33?live=0";
function connection() {
//判断该使用哪种WebSocket对象
if ("WebSocket" in window) {
}
else if ("MozWebSocket" in window) {
ws = new MozWebSocket(wsUrl);
ws.binaryType = 'arraybuffer';//获取字节数据
} else {
alert("您的浏览器不支持 WebSocket!");
return;
}
try {
var readyState = new Array("正在连接", "已建立连接", "正在关闭连接", "已关闭连接");
ws = new WebSocket(wsUrl);
var message = document.getElementById("message");
message.innerHTML += "<p>Socket状态 连接尚未建立：" + readyState[ws.readyState] + "</p>";
//注册各类回调
//与服务器建立连接
ws.onopen = function ()
{
message.innerHTML += "<p>Socket状态 连接已建立：" + readyState[ws.readyState] + "</p>";
}
//接收数据
ws.onmessage = function (msg)
{
message.innerHTML += "<p>接收信息：" + msg.data + "</p>";
console.log(msg.data);
}
//与服务器断开连接
ws.onclose = function ()
{
message.innerHTML += "<p>Socket状态 断开：" + readyState[ws.readyState] + "</p>";
}
ws.onerror = function () {
message.innerHTML += "<p>Socket状态：" + "数据传输发生错误" + " " + readyState[ws.readyState] + "</p>";
}
}
catch (exception)
{
message.innerHTML += "<p>有错误发生</p>";
}
}
//向服务端发送消息
function sendMessage()
{
var text = document.getElementById("text").value;
var message = document.getElementById("message");
if (text == "") {
message.innerHTML += "<p>请输入一些文字</p>";
return;
}
try {
ws.send(text);
message.innerHTML += "<p>发送数据：" + text + "</p>";
}
catch (exception) {
message.innerHTML += "<p>发送数据出错</p>";
}
document.getElementById("text").value = "";
}
//关闭连接
function disconnect() {
ws.close();
}
function sendMessageEx() {
ws.onmessage = function (e) {
sourceBuffer.appendBuffer(e);
};
}
function MediaSource()
{
var videoMp4 = document.querySelector('.js-player-mp4');
if (window.MediaSource) {
// 创建MediaSource对象，并使用URL.createObjectURL来创建指向MediaSource对象的URL供video播放
let mediaSource = new MediaSource();
//video.src 通过 URL.createObjectURL 链接 mediaSource
videoMp4.src = URL.createObjectURL(mediaSource);
//监听sourceopen
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.log("您的浏览器不支持 Media Source");
return;
}
//异步处理
function sourceOpen(e) {
URL.revokeObjectURL(videoMp4.src);
// 设置 媒体的编码类型
//var mime = 'video/webm; codecs="vorbis, vp8"';
var mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'//video/webm、audio/mpeg、audio/mp4
var mediaSource = e.target;
//创建一个新的 SourceBuffer 对象，然后会将它追加到 MediaSource 的 SourceBuffers 列表中。
var sourceBuffer = mediaSource.addSourceBuffer(mime);
var videoUrl = videoMp4.src;
//监听 SourceBuffer 上的 updateend 事件，确定空闲后，再加入新的 chunk
fetchAB(videoUrl, function (buf) {
sourceBuffer.addEventListener('updateend', function (_) {
//在数据请求完成后,调用 endOfStream()。改变 MediaSource.readyState 为 ended 并且触发 sourceended 事件。
mediaSource.endOfStream();// 结束当前的接受
videoMp4.play(); //可以播放当前获得的流
console.log(mediaSource.readyState); // ended
});
console.log("buf", buf);
sourceBuffer.appendBuffer(buf); //请求资源
});
}
function fetchAB(url, cb) {
console.log(url);
var xhr = new XMLHttpRequest;
xhr.open('get', url);
xhr.responseType = 'blob';
xhr.onload = function () {
cb(xhr.response);
};
xhr.send();
};
}
</script>
</head>
<body>
<h1>WebSocket客户端</h1>
<input id="text" type="text">
<input type="button" value="连接服务" onclick="connection()" />
<input type="button" value="发送消息" onclick="sendMessage()" />
<input type="button" value="发送MSE" onclick="MediaSource()" />
<input type="button" value="断开连接" onclick="disconnect()" />
<div style="width:100%;margin-top:20px;">
<!--<img id ="receiver" style="width:100%;height:900px;" />-->
<video class="js-player-mp4" autoplay="autoplay" controls="controls" style="width:400px;height :400px; border:3px solid blue;" src="Video/movie.mp4">
<!-- <source src="Video/movie.mp4" type="video/mp4">-->
</video>
</div>
<div id="message"></div>
</body>
</html>
