无法通过websocket将视频流式传输到Firefox [英] Unable to stream video over a websocket to Firefox
问题描述
我已经通过websocket写了一些代码流视频，所以在Chrome和Edge中可以使用 sourcebuffer
然而，当我在Firefox中运行这个视频时，视频从不回放，只显示一个旋转轮的动画。当我检查<视频> 统计信息时，它读取 HAVE_METADATA 作为就绪状态， NETWORK_LOADING 作为网络状态。
代码如下所示：
pre > <！DOCTYPE html>
< html>
< head>
< meta charset =utf-8/>
< / head>
< body>
<影片控制>< /影片>
< script>
var mime ='video / mp4;编解码器= avc1.4D401E，mp4a.40.2;
var address ='ws：// localhost：54132'
/ * Media Source * /
var source = new MediaSource（）;
var video = document.querySelector（'video'）;
video.src = URL.createObjectURL（source）;
source.addEventListener（'sourceopen'，sourceOpen）;
/ *缓冲区* /
var buffer;
var socket;
var queue = [];
var offset = -1;
var timescale;
//媒体源打开时：
function sourceOpen（）{
buffer = source.addSourceBuffer（mime）;
buffer.addEventListener（'updateend'，processQueue）;
socket = new WebSocket（address）;
socket.binaryType ='arraybuffer';
socket.onmessage = onMessage;
}
//收到更多数据时。
函数onMessage（event）{
queue.push（event.data）;
processQueue（）;
}
//如果可能，处理队列。
function processQueue（）{
if（（queue.length == 0）||（buffer.updating））{
return;
}
var data = queue.shift（）;
if（offset === -1）{
var parsed = parseMP4（data）;
if（parsed.hasOwnProperty（'moov'））{
timescale = parsed.moov.mvhd.timescale;
} else if（parsed.hasOwnProperty（'moof'））{
offset = 0 - （parsed.moof.traf [0] .tfdt.baseMediaDecodeTime / this.timescale - 0.4）;
buffer.timestampOffset = offset;
// console.log（'appending'+ data.byteLength +'bytes'）;
buffer.appendBuffer（data）;
}
//解析偏移量。
函数parseMP4（data）{
// SNIP为了简洁
}
< / script>
< / body>
< / html>
无法重现< video> 元素不会在firefox 47上播放。
合并方法嘲笑Websocket消息事件来创建模拟 p I have written some code stream video over a websocket so a However, when I run this in Firefox, the video never plays back, just a spinning wheel animation is displayed. When I check the The code looks follows:
Could not reproduce Merged approaches at Mocking Websocket Message Events to create mock Included
plnkr http://plnkr.co/edit/RCIqDXTB2BL3lec9bhfz 这篇关于无法通过websocket将视频流式传输到Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ WebSocket 事件; bufferAll.html 演示在让我们制作一个Netflix
介绍流媒体在网络的<$包括< progress> 和
<！DOCTYPE html>< html> < HEAD> < meta charset =utf-8/> < /头> <身体GT; < progress>< / min><进度>< / label>< br>< <视频控制>< /视频> <脚本> // http://nickdesaulniers.github.io/netfix/demo/bufferAll.html // http://jsfiddle.net/adamboduch/JVfkt/ //全球网络套接字。 var sock，sourceBuffer; sock = new WebSocket（ws：// mock）; sock.onerror = function（e）{console.log（sock error，e）} //这是不变的生产代码，不知道//我们在嘲笑web套接字。 sock.onmessage = function（e）{console.log（socket message，e.data）; sourceBuffer.appendBuffer（e.data）; }; var video = document.querySelector（video）; var progress = document.querySelector（progress）; var label = document.querySelector（label）; var assetURL =http://nickdesaulniers.github.io/netfix/+demo / frag_bunny.mp4; //需要针对编解码器的闪烁指定// ./mp4info frag_bunny.mp4 | grep Codec var mimeCodec ='video / mp4; codecs =avc1.42E01E，mp4a.40.2; if（MediaSourcein window& MediaSource.isTypeSupported（mimeCodec））{var mediaSource = new MediaSource; //console.log(mediaSource.readyState）; // closed video.src = URL.createObjectURL（mediaSource）; mediaSource.addEventListener（sourceopen，sourceOpen）; }其他{console.error（不支持的MIME类型或编解码器：，mimeCodec）; } video.addEventListener（canplay，function（）{alert（video canplay）}）function sourceOpen（_）{//console.log(this.readyState）; //打开var mediaSource = this; sourceBuffer = mediaSource.addSourceBuffer（mimeCodec）; fetchAB（assetURL，function（buf）{sourceBuffer.addEventListener（updateend，function（event）{console.log（sourceBuffer updateend event;+mediaSource.readyState：，mediaSource.readyState）; // mediaSource.endOfStream （）; // video.play（）; // console.log（mediaSource.readyState）; // ends}）;}）; }; //模拟`WebSocket`消息函数fetchAB（url，cb）{var xhr = new XMLHttpRequest; xhr.open（get，url）; var file = url.split（/）。pop（）; xhr.responseType =arraybuffer; xhr.onload = function（）{//模拟`WebSocket`消息sock.dispatchEvent（new MessageEvent（message，{data：xhr.response}））; console.log（视频发送到袜子，袜子）; CB（）; }; xhr.onprogress = function（e）{progress.max = e.total;辛辛辛辛辛范范范辛中的信息信范中预预label.innerHTML =loading+ file +...< br> + e.total +加载的字节+。 } xhr.send（）; }; < /脚本> < /体> < / html>
$ b sourcebuffer which works in Chrome and Edge.<video> statistics, It reads HAVE_METADATA as the ready state and NETWORK_LOADING as the network state.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<video controls></video>
<script>
var mime = 'video/mp4; codecs="avc1.4D401E,mp4a.40.2"';
var address = 'ws://localhost:54132'
/* Media Source */
var source = new MediaSource();
var video = document.querySelector('video');
video.src = URL.createObjectURL(source);
source.addEventListener('sourceopen', sourceOpen);
/* Buffer */
var buffer;
var socket;
var queue = [];
var offset = -1;
var timescale;
// When the media source opens:
function sourceOpen() {
buffer = source.addSourceBuffer(mime);
buffer.addEventListener('updateend', processQueue);
socket = new WebSocket(address);
socket.binaryType = 'arraybuffer';
socket.onmessage = onMessage;
}
// When more data is received.
function onMessage(event) {
queue.push(event.data);
processQueue();
}
// Process queue if possible.
function processQueue() {
if ((queue.length == 0) || (buffer.updating)) {
return;
}
var data = queue.shift();
if (offset === -1) {
var parsed = parseMP4(data);
if (parsed.hasOwnProperty('moov')) {
timescale = parsed.moov.mvhd.timescale;
} else if (parsed.hasOwnProperty('moof')) {
offset = 0 - (parsed.moof.traf[0].tfdt.baseMediaDecodeTime / this.timescale - 0.4);
buffer.timestampOffset = offset;
}
}
// console.log('appending ' + data.byteLength + ' bytes');
buffer.appendBuffer(data);
}
// Parse out the offset.
function parseMP4(data) {
// SNIP for brevity
}
</script>
</body>
</html>
<video> element not playing at firefox 47. WebSocket events; bufferAll.html demo at Let's Make a Netflix
An Intro to Streaming Media on the Web for MediaSource usage pattern.<progress> and progress event to notify user of media loading status.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<progress min="0" value="0"></progress><br><label></label><br>
<video controls></video>
<script>
// http://nickdesaulniers.github.io/netfix/demo/bufferAll.html
// http://jsfiddle.net/adamboduch/JVfkt/
// The global web socket.
var sock, sourceBuffer;
sock = new WebSocket( "ws://mock" );
sock.onerror = function(e) {
console.log("sock error", e)
}
// This is unchanging production code that doesn"t know
// we"re mocking the web socket.
sock.onmessage = function( e ) {
console.log("socket message", e.data);
sourceBuffer.appendBuffer(e.data);
};
var video = document.querySelector("video");
var progress = document.querySelector("progress");
var label = document.querySelector("label");
var assetURL = "http://nickdesaulniers.github.io/netfix/"
+ "demo/frag_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
if ("MediaSource" in window
&& MediaSource.isTypeSupported(mimeCodec)) {
var mediaSource = new MediaSource;
//console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
console.error("Unsupported MIME type or codec: ", mimeCodec);
}
video.addEventListener("canplay", function() {
alert("video canplay")
})
function sourceOpen (_) {
//console.log(this.readyState); // open
var mediaSource = this;
sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, function (buf) {
sourceBuffer.addEventListener("updateend", function (event) {
console.log("sourceBuffer updateend event;"
+ "mediaSource.readyState:"
, mediaSource.readyState);
// mediaSource.endOfStream();
// video.play();
// console.log(mediaSource.readyState); // ended
});
});
};
// mock `WebSocket` message
function fetchAB (url, cb) {
var xhr = new XMLHttpRequest;
xhr.open("get", url);
var file = url.split("/").pop();
xhr.responseType = "arraybuffer";
xhr.onload = function () {
// mock `WebSocket` message
sock.dispatchEvent( new MessageEvent( "message", {
data: xhr.response
}));
console.log("video sent to sock", sock);
cb();
};
xhr.onprogress = function(e) {
progress.max = e.total;
progress.value = e.loaded;
label.innerHTML = "loading " + file + " ...<br>"
+ e.loaded + " of "
+ e.total + " bytes loaded";
}
xhr.send();
};
</script>
</body>
</html>
