使用发送的WebRTC数据通道播放视频 文件类型：m3u8，ts 播放器：video.js 浏览器：ChromeV43 信令服务器：node.js
我正在尝试使用webrtc数据频道播放视频 文件发送成功 但我无法播放发送的视频 发送到数据通道的文件无法保存到所需的路径，因此会爬升到浏览器内存 由于ts类型由多个文件组成，因此存在无法在播放器上播放的问题 您是否尝试过同样的分钟，请告知 video.js 代码库 WebRTC假设信号发送并引发代码 （peerConnection ice） webrtcsigning.js使用发送的WebRTC数据通道播放视频 文件类型：m3u8，ts 播放器：video.js 浏览器：ChromeV43 信令服务器：node.js,webrtc,Webrtc,我正在尝试使用webrtc数据频道播放视频 文件发送成功 但我无法播放发送的视频 发送到数据通道的文件无法保存到所需的路径，因此会爬升到浏览器内存 由于ts类型由多个文件组成，因此存在无法在播放器上播放的问题 您是否尝试过同样的分钟，请告知 video.js 代码库 WebRTC假设信号发送并引发代码 （peerConnection ice） webrtcsigning.js 函数createPeerConnection（）{ 试一试{ pc=新的RTPeerConnection（空）； p
函数createPeerConnection（）{
试一试{
pc=新的RTPeerConnection（空）；
pc.onicecandidate=handleIceCandidate；
pc.onaddstream=handleRemoteStreamAdded；
pc.onremovestream=已移除把手移除测试流；
if（isSendData）{
sendChannel=pc.createDataChannel（'DC1'）；
sendChannel.binaryType='arraybuffer'；
sendChannel.onopen=onSendChannelStateChange；
sendChannel.onclose=onSendChannelStateChange；
}
//请参阅receiveChannelCallback
pc.ondatachannel=receiveChannelCallback；
log（'Created rtpeerconnection'）；
}捕获（e）{
console.log（'创建对等连接失败，异常：'+e.message）；
警报（'无法创建RTPeerConnection对象'）；
返回；
}
}
函数receiveChannelCallback（事件）{
跟踪（“接收通道回调”）；
receiveChannel=event.channel；
receiveChannel.binaryType='arraybuffer'；
//请参阅onReceiveMessageCallback
receiveChannel.onmessage=onReceiveMessageCallback；
receiveChannel.onopen=onReceiveChannelStateChange；
receiveChannel.onclose=onReceiveChannelStateChange；
receivedSize=0；
比特率max=0；
downloadDiv.innerHTML=''；
downloadDiv.removeAttribute（“下载”）；
如果（下载div.href）{
revokeObjectURL（downloadDiv.href）；
downloadDiv.removeAttribute（'href'）；
}
}
函数onReceiveMessageCallback（事件）{
var videoId=document.querySelector（“videoId”）；
//var flashPlayer=document.querySelector（“flashPlayer”）；
receiveBuffer.push（事件数据）；
receivedSize+=event.data.bytellength；
receiveProgress.value=receivedSize；
//console.log（事件数据）；
//我们假设我们的信令协议
//关于预期的文件大小（以及名称、哈希等）。
var文件={}；
file.size=fileInfo.fileSize；
file.name=fileInfo.fileName；
if（receivedSize==file.size）{
接收到的var=新的window.Blob（receiveBuffer）；
receiveBuffer=[]；
downloadDiv.href=URL.createObjectURL（已收到）；
//videoId.type=“视频/mp2t”；
if（！videoFlag）{
videoFlag=true；
videoId.src=downloadDiv.href；
//var player=videojs（'videoId'）；
}
downloadDiv.download=file.name；
var text='单击下载\''+file.name+'\'（'+file.size+
'字节'；
downloadDiv.appendChild（document.createTextNode（text））；
downloadDiv.style.display='block'；
var比特率=数学舍入（接收大小*8/
（（new Date（））.getTime（）-timestampStart））；
bitrateDiv.innerHTML='平均比特率：'+
比特率+'kbits/sec（最大：'+bitrateMax+'kbits/sec'）；
国际单项体育联合会（StatintInterval）{
窗口。清除间隔（statsInterval）；
statInterval=null；
}
closeDataChannels（）；
SendCloseDataChannel（）；
//重新启用文件选择
fileInput.disabled=false；
}
}
<!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;
}
}