Browse Source

add metaRTC P2P信令拉流

m7s
superxxd 2 years ago
parent
commit
7857436a5c
  1. 207
      test/http.js
  2. 6
      test/jquery-1.10.2.min.js
  3. 1
      test/jquery-1.10.2.min.map
  4. 29
      test/main.html
  5. 199
      test/metaRTC.js
  6. 124
      test/miniAjax.js
  7. 48
      test/srs.sdk.p2p.js
  8. 4
      test/start.js
  9. 34
      test/video.js

207
test/http.js

@ -0,0 +1,207 @@
// https://qxbjz-20210528.blog.csdn.net/article/details/101430551
// 常用工具函数
var tools = {
/* ajaxget
* @param url string 请求的路径
* @param query object 请求的参数query
* @param succCb function 请求成功之后的回调
* @param failCb function 请求失败的回调
* @param isJson boolean true 解析json false文本请求 默认值true
*/
ajaxGet: function (url, query, succCb, failCb, isJson) {
// 拼接url加query
if (query) {
var parms = tools.formatParams(query);
url += '?' + parms;
// console.log('-------------',url);
}
// 1、创建对象
var ajax = new XMLHttpRequest();
// 2、建立连接
// true:请求为异步 false:同步
ajax.open("GET", url, true);
// ajax.setRequestHeader("Origin",STATIC_PATH);
// ajax.setRequestHeader("Access-Control-Allow-Origin","*");
// // 响应类型
// ajax.setRequestHeader('Access-Control-Allow-Methods', '*');
// // 响应头设置
// ajax.setRequestHeader('Access-Control-Allow-Headers', 'x-requested-with,content-type');
// ajax.withCredentials = true;
// 3、发送请求
ajax.send(null);
// 4、监听状态的改变
ajax.onreadystatechange = function () {
if (ajax.readyState === 4) {
if (ajax.status === 200) {
// 用户传了回调才执行
// isJson默认值为true,要解析json
if (isJson === undefined) {
isJson = true;
}
var res = isJson ? JSON.parse(ajax.responseText == "" ? '{}' : ajax.responseText) : ajax.responseText;
succCb && succCb(res);
} else {
// 请求失败
failCb && failCb();
}
}
}
},
/* ajaxpost
* @param url string 请求的路径
* @param data object 请求的参数query
* @param succCb function 请求成功之后的回调
* @param failCb function 请求失败的回调
* @param isJson boolean true 解析json false文本请求 默认值true
*/
ajaxPost: function (url, data, succCb, failCb, isJson) {
var formData = new FormData();
for (var i in data) {
formData.append(i, data[i]);
}
//得到xhr对象
var xhr = null;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post", url, true);
// 设置请求头 需在open后send前
// 这里的CSRF需自己取后端获取,下面给出获取代码
// xhr.setRequestHeader("X-CSRFToken", CSRF);
xhr.setRequestHeader('Content-Type','application/json');
xhr.send(formData);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 判断isJson是否传进来了
isJson = isJson === undefined ? true : isJson;
succCb && succCb(isJson ? JSON.parse(xhr.responseText) : xhr.responseText);
}else{
isJson = isJson === undefined ? true : isJson;
failCb && failCb(isJson ? JSON.parse(xhr.responseText) : xhr.responseText);
}
}
}
},
formatParams: function (data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".", ""));
return arr.join("&");
}
}
// // 调用
// // 接口地址
// let url = ""
// // 传输数据 为object
// let data = {}
// tools.ajaxGet(url, data, function(res){
// console.log('返回的数据:',res)
// // ....
// })
var Ajax = {
get: function(url,callback){
// XMLHttpRequest对象用于在后台与服务器交换数据
var xhr=new XMLHttpRequest();
xhr.open('GET',url,false);
xhr.onreadystatechange=function(){
// readyState == 4说明请求已完成
if(xhr.readyState==4){
if(xhr.status==200 || xhr.status==304){
console.log(xhr.responseText);
callback(xhr.responseText);
}
}
}
xhr.send();
},
// data应为'a=a1&b=b1'这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式
post: function(url,data,callback){
var xhr=new XMLHttpRequest();
xhr.open('POST',url,false);
// 添加http头,发送信息至服务器时内容编码类型
//xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); ////text/plain application/json
xhr.setRequestHeader('Content-Type','application/json');
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
if (xhr.status==200 || xhr.status==304){
// console.log(xhr.responseText);
callback(xhr.responseText);
}
}
}
xhr.send(data);
}
}
const getJSON = function(url) {
const promise = new Promise(function(resolve, reject){
const handler = function() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
});
return promise;
};
getJSON("promise.json").then(function(json) {
console.log('Data: ', json);
}, function(error) {
console.error('err', error);
});
function initXMLhttp(){
var e;
return e=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP")
}
function minAjax(e){
if(!e.url)return
void(1==e.debugLog&&console.log("No Url!"));
if(!e.type)return
void(1==e.debugLog&&console.log("No Default type (GET/POST) given!"));
e.method||(e.method=!0),e.debugLog||(e.debugLog=!1);
var o=initXMLhttp();
o.onreadystatechange=function(){
4==o.readyState&&200==o.status?(e.success&&e.success(o.responseText,o.readyState),1==e.debugLog&&console.log("SuccessResponse"),1==e.debugLog&&console.log("Response Data:"+o.responseText)):1==e.debugLog&&console.log("FailureResponse --> State:"+o.readyState+"Status:"+o.status)
};
var t=[],n=e.data;
if("string"==typeof n)for(var s=String.prototype.split.call(n,"&"),r=0,a=s.length;a>r;r++){var c=s[r].split("=");t.push(encodeURIComponent(c[0])+"="+encodeURIComponent(c[1]))}else if("object"==typeof n&&!(n instanceof String||FormData&&n instanceof FormData))for(var p in n){var c=n[p];if("[object Array]"==Object.prototype.toString.call(c))for(var r=0,a=c.length;a>r;r++)t.push(encodeURIComponent(p)+"[]="+encodeURIComponent(c[r]));else t.push(encodeURIComponent(p)+"="+encodeURIComponent(c))}t=t.join("&"),"GET"==e.type&&(o.open("GET",e.url+"?"+t,e.method),o.send(),1==e.debugLog&&console.log("GET fired at:"+e.url+"?"+t)),"POST"==e.type&&(o.open("POST",e.url,e.method),o.setRequestHeader("Content-type","application/x-www-form-urlencoded"),o.send(t),1==e.debugLog&&console.log("POST fired at:"+e.url+" || Data:"+t))}

6
test/jquery-1.10.2.min.js

File diff suppressed because one or more lines are too long

1
test/jquery-1.10.2.min.map

File diff suppressed because one or more lines are too long

29
test/main.html

@ -54,7 +54,34 @@
<!-- <canvas id="playCanvas" width="852" height="480"></canvas>
-->
<!-- <div style="margin-top: 10px"> -->
<canvas id="playCanvas" width="1280" height="720"></canvas>
<!-- <div class="video-main">
<br><video controlsList="nodownload noplaybackrate nofullscreen noremoteplayback"
disablePictureInPicture id="remote-video" autoplay class="m-0 p-0"
style="position: relative; top: 0; left: 0; z-index: 1;width:100%; height:100%;object-fit:fill">
<style type="text/css">
video::-webkit-media-controls {
display: none !important;
}
/*video隐藏全屏按钮*/
video::-webkit-media-controls-fullscreen-button {
display: none !important;
}
/*video隐藏音量控制*/
video::-webkit-media-controls-volume-control-container {
display: none !important;
}
video::-webkit-progress-bar {
display: none !important;
}
</style>
</video>
</div>
</div> -->
<canvas id="playCanvas" width="1920" height="1080"></canvas>
<!-- </div> -->
</div>
<div class="sideBar">

199
test/metaRTC.js

@ -0,0 +1,199 @@
// Internal APIs.
var __internal = {
defaultPath: '/rtc/v1/play/',
prepareUrl: function (webrtcUrl) {
var urlObject = self.__internal.parse(webrtcUrl);
var schema="http:";
var port = urlObject.port || 1985;
if (schema === 'https:') {
port = urlObject.port || 443;
}
// @see https://github.com/rtcdn/rtcdn-draft
var api = urlObject.user_query.play || self.__internal.defaultPath;
if (api.lastIndexOf('/') !== api.length - 1) {
api += '/';
}
apiUrl = schema + '//' + urlObject.server + ':' + port + api;
for (var key in urlObject.user_query) {
if (key !== 'api' && key !== 'play') {
apiUrl += '&' + key + '=' + urlObject.user_query[key];
}
}
// Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
var apiUrl = apiUrl.replace(api + '&', api + '?');
var streamUrl = urlObject.url;
return {
apiUrl: apiUrl, streamUrl: streamUrl, schema: schema, urlObject: urlObject, port: port,
tid: Number(parseInt(new Date().getTime()*Math.random()*100)).toString(16).substr(0, 7)
};
},
parse: function (url) {
// @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
var a = document.createElement("a");
a.href = url.replace("rtmp://", "http://")
.replace("webrtc://", "http://")
.replace("rtc://", "http://");
var vhost = a.hostname;
var app = a.pathname.substr(1, a.pathname.lastIndexOf("/") - 1);
var stream = a.pathname.substr(a.pathname.lastIndexOf("/") + 1);
// parse the vhost in the params of app, that srs supports.
app = app.replace("...vhost...", "?vhost=");
if (app.indexOf("?") >= 0) {
var params = app.substr(app.indexOf("?"));
app = app.substr(0, app.indexOf("?"));
if (params.indexOf("vhost=") > 0) {
vhost = params.substr(params.indexOf("vhost=") + "vhost=".length);
if (vhost.indexOf("&") > 0) {
vhost = vhost.substr(0, vhost.indexOf("&"));
}
}
}
// when vhost equals to server, and server is ip,
// the vhost is __defaultVhost__
if (a.hostname === vhost) {
var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
if (re.test(a.hostname)) {
vhost = "__defaultVhost__";
}
}
// parse the schema
var schema = "rtmp";
if (url.indexOf("://") > 0) {
schema = url.substr(0, url.indexOf("://"));
}
var port = a.port;
if (!port) {
if (schema === 'http') {
port = 80;
} else if (schema === 'https') {
port = 443;
} else if (schema === 'rtmp') {
port = 1935;
}
}
var ret = {
url: url,
schema: schema,
server: a.hostname, port: port,
vhost: vhost, app: app, stream: stream
};
self.__internal.fill_query(a.search, ret);
// For webrtc API, we use 443 if page is https, or schema specified it.
if (!ret.port) {
if (schema === 'webrtc' || schema === 'rtc') {
if (ret.user_query.schema === 'https') {
ret.port = 443;
} else if (window.location.href.indexOf('https://') === 0) {
ret.port = 443;
} else {
// For WebRTC, SRS use 1985 as default API port.
ret.port = 1985;
}
}
}
return ret;
},
fill_query: function (query_string, obj) {
// pure user query object.
obj.user_query = {};
if (query_string.length === 0) {
return;
}
// split again for angularjs.
if (query_string.indexOf("?") >= 0) {
query_string = query_string.split("?")[1];
}
var queries = query_string.split("&");
for (var i = 0; i < queries.length; i++) {
var elem = queries[i];
var query = elem.split("=");
obj[query[0]] = query[1];
obj.user_query[query[0]] = query[1];
}
// alias domain for vhost.
if (obj.domain) {
obj.vhost = obj.domain;
}
}
};
function StartMetaRTC(url,player){
var conf = __internal.prepareUrl(url);
pc = new RTCPeerConnection({
iceServers: ICEServerkvm,//ICEServer
});
if(bVideo) {
const { receivervideo } = pc.addTransceiver('video', { direction: 'recvonly' });
OnTrack(pc)
}
if(bAudio) {
const { receiveraudio } = pc.addTransceiver('audio', { direction: 'recvonly' });
OnTrack(pc)
}
// Populate SDP field when finished gathering
pc.oniceconnectionstatechange = e => {
log(pc.iceConnectionState)
var state ={
t: kconnectStatusResponse,
s: pc.connectionState
}
player.postMessage(state)
}
pc.onicecandidate = event => {
if (event.candidate === null) {
var offer=pc.localDescription
var data = {
api: conf.apiUrl, tid: conf.tid, streamurl: conf.streamUrl,
clientip: null, sdp: offer.sdp
};
console.log("Generated offer: ", data);
Ajax.post(conf.apiUrl, offer.sdp+"}", function(res){
console.log('返回的数据:',res)
// ....
})
// ajax({
// type: "POST", url: conf.apiUrl, data: offer.sdp+"}",
// contentType:'text/plain', dataType: 'json',
// crossDomain:true
// }).done(function(data) {
// if (data.code) {
// reject(data); return;
// }
// console.log("Got sdp: ", data.sdp);
// resolve(data);
// }).fail(function(reason){
// reject(reason);
// });
}
}
pc.createOffer().then(d => pc.setLocalDescription(d)).catch(log)
}

124
test/miniAjax.js

@ -0,0 +1,124 @@
/*|--minAjax.js--|
|--(A Minimalistic Pure JavaScript Header for Ajax POST/GET Request )--|
|--Author : flouthoc (gunnerar7@gmail.com)(http://github.com/flouthoc)--|
|--Contributers : Add Your Name Below--|
*/
function initXMLhttp() {
var xmlhttp;
if (window.XMLHttpRequest) {
//code for IE7,firefox chrome and above
xmlhttp = new XMLHttpRequest();
} else {
//code for Internet Explorer
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function minAjax(config) {
/*Config Structure
url:"reqesting URL"
type:"GET or POST"
method: "(OPTIONAL) True for async and False for Non-async | By default its Async"
debugLog: "(OPTIONAL)To display Debug Logs | By default it is false"
data: "(OPTIONAL) another Nested Object which should contains reqested Properties in form of Object Properties"
success: "(OPTIONAL) Callback function to process after response | function(data,status)"
*/
if (!config.url) {
if (config.debugLog == true)
console.log("No Url!");
return;
}
if (!config.type) {
if (config.debugLog == true)
console.log("No Default type (GET/POST) given!");
return;
}
if (!config.method) {
config.method = true;
}
if (!config.debugLog) {
config.debugLog = false;
}
var xmlhttp = initXMLhttp();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (config.success) {
config.success(xmlhttp.responseText, xmlhttp.readyState);
}
if (config.debugLog == true)
console.log("SuccessResponse");
if (config.debugLog == true)
console.log("Response Data:" + xmlhttp.responseText);
} else {
if (config.debugLog == true)
console.log("FailureResponse --> State:" + xmlhttp.readyState + "Status:" + xmlhttp.status);
if(config.errorCallback){
console.log("Calling Error Callback");
config.errorCallback();
}
}
}
var sendString = [],
sendData = config.data;
if( typeof sendData === "string" ){
var tmpArr = String.prototype.split.call(sendData,'&');
for(var i = 0, j = tmpArr.length; i < j; i++){
var datum = tmpArr[i].split('=');
sendString.push(encodeURIComponent(datum[0]) + "=" + encodeURIComponent(datum[1]));
}
}else if( typeof sendData === 'object' && !( sendData instanceof String || (FormData && sendData instanceof FormData) ) ){
for (var k in sendData) {
var datum = sendData[k];
if( Object.prototype.toString.call(datum) == "[object Array]" ){
for(var i = 0, j = datum.length; i < j; i++) {
sendString.push(encodeURIComponent(k) + "[]=" + encodeURIComponent(datum[i]));
}
}else{
sendString.push(encodeURIComponent(k) + "=" + encodeURIComponent(datum));
}
}
}
sendString = sendString.join('&');
if (config.type == "GET") {
xmlhttp.open("GET", config.url + "?" + sendString, config.method);
xmlhttp.send();
if (config.debugLog == true)
console.log("GET fired at:" + config.url + "?" + sendString);
}
if (config.type == "POST") {
xmlhttp.open("POST", config.url, config.method);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(sendString);
if (config.debugLog == true)
console.log("POST fired at:" + config.url + " || Data:" + sendString);
}
}

48
test/srs.sdk.p2p.js

@ -300,7 +300,7 @@ function SrsRtcPlayerAsync() {
}
datachannel.onmessage = function(event) {
console.log("receive message: ", event.data);
$('#datachannel_recv').val(event.data);
// $('#datachannel_recv').val(event.data);
}
datachannel.onerror=function(event) {
console.log("datachannel error: ", event.data);
@ -348,21 +348,37 @@ function SrsRtcPlayerAsync() {
};
console.log("Generated offer: ", data);
//text/plain application/json
$.ajax({
type: "POST", url: conf.apiUrl, data: offer.sdp+"}",
contentType:'text/plain', dataType: 'json',
crossDomain:true
}).done(function(data) {
if (data.code) {
reject(data); return;
}
console.log("Got sdp: ", data.sdp);
resolve(data);
}).fail(function(reason){
reject(reason);
});
// tools.ajaxPost(conf.apiUrl, offer.sdp+"}", function(res){
// console.log('返回的数据:',res)
// if (res.code) {
// reject(daresta); return;
// }
// console.log("Got sdp: ", res.sdp);
// resolve(res);
// })
// let data = {
// data: offer.sdp+"}"
// }
// Ajax.post(conf.apiUrl, data, function(res){
// console.log('返回的数据:',res)
// // ....
// })
// $.ajax({
// type: "POST", url: conf.apiUrl, data: offer.sdp+"}",
// contentType:'text/plain', dataType: 'json',
// crossDomain:true
// }).done(function(data) {
// if (data.code) {
// reject(data); return;
// }
// console.log("Got sdp: ", data.sdp);
// resolve(data);
// }).fail(function(reason){
// reject(reason);
// });
});
await self.pc.setRemoteDescription(
new RTCSessionDescription({type: 'answer', sdp: session.sdp})

4
test/start.js

@ -18,6 +18,10 @@ importScripts("./h265dc.js")
importScripts("https://cdn.bootcdn.net/ajax/libs/mqtt/2.18.8/mqtt.min.js")
importScripts("adapter-7.4.0.min.js")
importScripts("srs.sdk.p2p.js")
importScripts("http.js")
importScripts("metaRTC.js")
// importScripts("miniAjax.js")
// importScripts("jquery-1.10.2.min.js")
// importScripts("./adapter-latest.js")

34
test/video.js

@ -6,25 +6,27 @@ var sdk = null; // Global handler to do cleanup when replaying.
// var DECODER_TYPE = kDecoder_prod_h265_wasm_combine_js;
function startPlay(url) {
if(url===undefined){
if(url===undefined||url.value===""){
alert("url is null")
return;
}
// Close PC when user replay.
if (sdk) {
sdk.close();
}
sdk = new SrsRtcPlayerAsync();
StartMetaRTC(url,player)
// // Close PC when user replay.
// if (sdk) {
// sdk.close();
// }
// sdk = new SrsRtcPlayerAsync();
// https://webrtc.org/getting-started/remote-streams
// $('#rtc_media_player').prop('srcObject', sdk.stream);
// var url = $("#txt_url").val();
// // parse_webrtc(url);
sdk.play(url.value).then(function(session){
console.log("play url ",url.value);
// $('#datachannel_form').show();
}).catch(function (reason) {
sdk.close();
});
// // https://webrtc.org/getting-started/remote-streams
// // $('#rtc_media_player').prop('srcObject', sdk.stream);
// // var url = $("#txt_url").val();
// // // parse_webrtc(url);
// sdk.play(url.value).then(function(session){
// console.log("play url ",url.value);
// // $('#datachannel_form').show();
// }).catch(function (reason) {
// sdk.close();
// });
};
function onSelectProto(){
var porotocol=document.getElementById("protocol");

Loading…
Cancel
Save