m3u8 , ts video.js 我正在尝试使用webrtc datachannel播放视频
文件发送成功
但我无法播放视频。
发送到数据通道的文件无法保存到浏览器内存所需的路径
由于ts类型由多个文件组成，因此存在无法在播放器上播放的问题
你有没有尝试过相同的会议记录，请告知。
https://github.com/videojs/video.js
http://webrtc.github.io/samples/src/content/datachannel/filetransfer/
假设WebRTC发信号并提高代码 （peerConnection ice）<!DOCTYPE html>
<!--
* Copyright (c) 2014 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="WebRTC code samples">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
<meta itemprop="description" content="Client-side WebRTC code samples">
<meta itemprop="name" content="WebRTC code samples">
<meta name="mobile-web-app-capable" content="yes">
<meta id="theme-color" name="theme-color" content="#ffffff">
<script src="./js/socket.io.js"></script>
<script src="./js/adapter.js"></script>
<script src="./js/jquery-1.11.3.min.js"></script>
<link href="./video-js.css" rel="stylesheet">
<!-- video.js -->
<script src="./video1.js"></script>
<!-- Media Sources plugin -->
<script src="./videojs-media-sources.js"></script>
<!-- HLS plugin -->
<script src="src/videojs-hls.js"></script>
<!-- segment handling -->
<script src="src/xhr.js"></script>
<script src="src/flv-tag.js"></script>
<script src="src/stream.js"></script>
<script src="src/exp-golomb.js"></script>
<script src="src/h264-extradata.js"></script>
<script src="src/h264-stream.js"></script>
<script src="src/aac-stream.js"></script>
<script src="src/metadata-stream.js"></script>
<script src="src/segment-parser.js"></script>
<!-- m3u8 handling -->
<script src="src/m3u8/m3u8-parser.js"></script>
<script src="src/playlist.js"></script>
<script src="src/playlist-loader.js"></script>
<script src="./pkcs7.unpad.js"></script>
<script src="src/decrypter.js"></script>
<script src="src/bin-utils.js"></script>
<base target="_blank">
<title>Transfer a file</title>
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./css/main2.css">
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div id="container">
<h1><a href="https://webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a> <span>Transfer a file</span></h1>
<section>
<p>This page shows how to transfer a file via WebRTC datachannels.</p>
<p>To accomplish this in an interoperable way, the file is split into chunks which are then transferred via the datachannel. The datachannel is reliable and ordered by default which is well-suited to filetransfers.</p>
<p>Send and receive progress is monitored using HTML5 <i>progress</i> elements.</p>
<p>At the receiver, the file is reassembled using the Blob API and made available for download.</p>
<p>Note: real-world applications require a file transfer protocol to send metadata about the file (such as the filename, type, size, last modification date, hash, ...).This information can be conveyed either via the signaling channel or in-band. The demo elides this by assuming knowledge of the file size at the receiver and closes both the datachannel and the peerconnection when the correct amount of bytes has been received.</p>
</section>
<section>
<div><b>local</b></div><br>
<form id="fileInfo">
<input type="file" id="fileInput" name="files"/>
</form>
<div class="progress">
<div class="label">Send progress: </div>
<progress id="sendProgress" max="0" value="0"></progress>
</div>
<div><b>remote</b></div><br>
<div class="progress">
<div class="label">Receive progress: </div>
<progress id="receiveProgress" max="0" value="0"></progress>
</div>
<div id="bitrate"></div>
<a id="received"></a>
</section>
<section>
<p>View the console to see logging.</p>
<p>The <code>RTCPeerConnection</code> objects <code>localConnection</code> and <code>remoteConnection</code> are in global scope, so you can inspect them in the console as well.</p>
<p>For more information about RTCDataChannel, see <a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-rtcdatachannel" title="RTCDataChannel section of HTML5 Rocks article about WebRTC">Getting Started With WebRTC</a>.</p>
</section>
<a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/datachannel/filetransfer" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
</div>
<video id="videoId"
class="video-js vjs-default-skin"
height="300"
width="600"
controls
autoplay
preload="auto">
<source
type="application/x-mpegURL" src="https://livestream.storage.googleapis.com/hls/video/kite/index.m3u8">
</video>
// see webrtcSignaling.js
<script src="./js/webrtcSignaling.js"></script>
<script>
videojs.options.flash.swf = './video-js.swf';
</script>
</body>
</html>
function createPeerConnection() {
try {
pc = new RTCPeerConnection(null);
pc.onicecandidate = handleIceCandidate;
pc.onaddstream = handleRemoteStreamAdded;
pc.onremovestream = handleRemoteStreamRemoved;
if(isSendData){
sendChannel = pc.createDataChannel('DC1');
sendChannel.binaryType = 'arraybuffer';
sendChannel.onopen = onSendChannelStateChange;
sendChannel.onclose = onSendChannelStateChange;
}
//see receiveChannelCallback
pc.ondatachannel = receiveChannelCallback;
console.log('Created RTCPeerConnection');
} catch (e) {
console.log('Failed to create PeerConnection, exception: ' + e.message);
alert('Cannot create RTCPeerConnection object.');
return;
}
}
function receiveChannelCallback(event) {
trace('Receive Channel Callback');
receiveChannel = event.channel;
receiveChannel.binaryType = 'arraybuffer';
// see onReceiveMessageCallback
receiveChannel.onmessage = onReceiveMessageCallback;
receiveChannel.onopen = onReceiveChannelStateChange;
receiveChannel.onclose = onReceiveChannelStateChange;
receivedSize = 0;
bitrateMax = 0;
downloadDiv.innerHTML = '';
downloadDiv.removeAttribute('download');
if (downloadDiv.href) {
URL.revokeObjectURL(downloadDiv.href);
downloadDiv.removeAttribute('href');
}
}
function onReceiveMessageCallback(event) {
var videoId = document.querySelector("#videoId");
//var flashPlayer = document.querySelector("#flashPlayer");
receiveBuffer.push(event.data);
receivedSize += event.data.byteLength;
receiveProgress.value = receivedSize;
//console.log(event.data);
// we are assuming that our signaling protocol told
// about the expected file size (and name, hash, etc).
var file = {};
file.size = fileInfo.fileSize;
file.name = fileInfo.fileName;
if (receivedSize === file.size) {
var received = new window.Blob(receiveBuffer);
receiveBuffer = [];
downloadDiv.href = URL.createObjectURL(received);
//videoId.type="video/mp2t";
if(!videoFlag){
videoFlag = true;
videoId.src = downloadDiv.href;
//var player = videojs('videoId');
}
downloadDiv.download = file.name;
var text = 'Click to download \'' + file.name + '\' (' + file.size +
' bytes)';
downloadDiv.appendChild(document.createTextNode(text));
downloadDiv.style.display = 'block';
var bitrate = Math.round(receivedSize * 8 /
((new Date()).getTime() - timestampStart));
bitrateDiv.innerHTML = '<strong>Average Bitrate:</strong> ' +
bitrate + ' kbits/sec (max: ' + bitrateMax + ' kbits/sec)';
if (statsInterval) {
window.clearInterval(statsInterval);
statsInterval = null;
}
closeDataChannels();
sendCloseDataChannels();
// re-enable the file select
fileInput.disabled = false;
}
}