mirror of
https://github.com/ZLMediaKit/ZLMediaKit.git
synced 2026-06-12 19:24:22 +08:00
开始对接js
This commit is contained in:
ziyue
7466
www/webrtc/ZLMRTCClient.js
Normal file
7466
www/webrtc/ZLMRTCClient.js
Normal file
File diff suppressed because it is too large
Load Diff
1
www/webrtc/ZLMRTCClient.js.map
Normal file
1
www/webrtc/ZLMRTCClient.js.map
Normal file
File diff suppressed because one or more lines are too long
@@ -1,34 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
* Copyright (c) 2015 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>
|
||||
<title>PeerConnection PRANSWER Demo</title>
|
||||
<!-- Load the polyfill to switch-hit between Chrome and Firefox -->
|
||||
<style>
|
||||
video {
|
||||
border:5px solid black;
|
||||
width:800px;
|
||||
height:600px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<video id="vid2" autoplay></video>
|
||||
<br>
|
||||
<p>ip_address</p>
|
||||
<input id="input1" type="text" name="ip_address" value="https://rp.zlmediakit.com:20443/webrtc?app=live&stream=test">
|
||||
<br>
|
||||
<button id="btn1">Call</button>
|
||||
<button id="btn3">Hang Up</button>
|
||||
</body>
|
||||
<script src="js/adapter.js"></script>
|
||||
<script src="js/common.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</html>
|
||||
<meta charset="utf-8">
|
||||
<head>
|
||||
<title>ZLM RTC demo</title>
|
||||
<script src="./ZLMRTCClient.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div>
|
||||
<video id='video' controls autoplay style="text-align:left;">
|
||||
Your browser is too old which doesn't support HTML5 video.
|
||||
</video>
|
||||
|
||||
<video id='selfVideo' controls autoplay style="text-align:right;">
|
||||
Your browser is too old which doesn't support HTML5 video.
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<p>
|
||||
<label for="streamUrl">url:</label>
|
||||
<input type="text" id='streamUrl' value="https://rp.zlmediakit.com:20443/index/api/webrtc?app=live&stream=test">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="simulecast">simulecast:</label>
|
||||
<input type="checkbox" id='simulecast' checked="checked">
|
||||
</p>
|
||||
<button onclick="start()">开始</button>
|
||||
<button onclick="stop()">停止</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var player = null
|
||||
function start()
|
||||
{
|
||||
stop();
|
||||
player = new ZLMRTCClient.Endpoint(
|
||||
{
|
||||
element: document.getElementById('video'),// video 标签
|
||||
debug: true,// 是否打印日志
|
||||
zlmsdpUrl:document.getElementById('streamUrl').value,//流地址
|
||||
simulecast:document.getElementById('simulecast').checked
|
||||
}
|
||||
);
|
||||
|
||||
player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,function(e)
|
||||
{// ICE 协商出错
|
||||
console.log('ICE 协商出错')
|
||||
});
|
||||
|
||||
player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,function(e)
|
||||
{//获取到了远端流，可以播放
|
||||
console.log('播放成功',e.streams)
|
||||
});
|
||||
|
||||
player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,function(e)
|
||||
{// offer anwser 交换失败
|
||||
console.log('offer anwser 交换失败',e)
|
||||
});
|
||||
|
||||
player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,function(s)
|
||||
{// 获取到了本地流
|
||||
|
||||
document.getElementById('selfVideo').srcObject=s;
|
||||
|
||||
//console.log('offer anwser 交换失败',e)
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function stop()
|
||||
{
|
||||
if(player)
|
||||
{
|
||||
player.close();
|
||||
player = null;
|
||||
var local = document.getElementById('selfVideo');
|
||||
local.removeAttribute('srcObject');
|
||||
local.load();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,12 +0,0 @@
|
||||
function trace(text) {
|
||||
// This function is used for logging.
|
||||
if (text[text.length - 1] === '\n') {
|
||||
text = text.substring(0, text.length - 1);
|
||||
}
|
||||
if (window.performance) {
|
||||
var now = (window.performance.now() / 1000).toFixed(3);
|
||||
console.log(now + ': ' + text);
|
||||
} else {
|
||||
console.log(text);
|
||||
}
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2015 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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
|
||||
var vid2 = document.getElementById('vid2');
|
||||
var btn1 = document.getElementById('btn1');
|
||||
var btn3 = document.getElementById('btn3');
|
||||
var input1 = document.getElementById('input1');
|
||||
|
||||
btn1.addEventListener('click', start);
|
||||
|
||||
btn3.addEventListener('click', stop);
|
||||
|
||||
btn1.disabled = false;
|
||||
btn3.disabled = true;
|
||||
|
||||
|
||||
var pc2 = null;
|
||||
var xmlhttp = null;
|
||||
|
||||
function start() {
|
||||
btn1.disabled = true;
|
||||
btn3.disabled = false;
|
||||
trace('Starting Call');
|
||||
|
||||
var servers = null;
|
||||
var addr = input1.value;
|
||||
pc2 = new RTCPeerConnection(servers);
|
||||
trace('Created remote peer connection object pc2');
|
||||
pc2.onicecandidate = iceCallback;
|
||||
pc2.onaddstream = gotRemoteStream;
|
||||
|
||||
if (window.XMLHttpRequest)
|
||||
{
|
||||
// IE7+, Firefox, Chrome, Opera, Safari <20><><EFBFBD><EFBFBD><EFBFBD>ִ<EFBFBD>д<EFBFBD><D0B4><EFBFBD>
|
||||
xmlhttp=new XMLHttpRequest();
|
||||
}
|
||||
else
|
||||
{
|
||||
// IE6, IE5 <20><><EFBFBD><EFBFBD><EFBFBD>ִ<EFBFBD>д<EFBFBD><D0B4><EFBFBD>
|
||||
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
|
||||
xmlhttp.onreadystatechange=function()
|
||||
{
|
||||
if (xmlhttp.readyState==4 && xmlhttp.status==200)
|
||||
{
|
||||
var res = xmlhttp.responseText;
|
||||
gotoffer(res);
|
||||
}
|
||||
}
|
||||
xmlhttp.open("GET",addr,true);
|
||||
xmlhttp.send();
|
||||
|
||||
}
|
||||
|
||||
function onCreateSessionDescriptionError(error) {
|
||||
trace('Failed to create session description: ' + error.toString());
|
||||
stop();
|
||||
}
|
||||
|
||||
function onCreateAnswerError(error) {
|
||||
trace('Failed to set createAnswer: ' + error.toString());
|
||||
stop();
|
||||
}
|
||||
|
||||
function onSetLocalDescriptionError(error) {
|
||||
trace('Failed to set setLocalDescription: ' + error.toString());
|
||||
stop();
|
||||
}
|
||||
|
||||
function onSetLocalDescriptionSuccess() {
|
||||
trace('localDescription success.');
|
||||
}
|
||||
|
||||
function gotoffer(offer) {
|
||||
|
||||
trace('Offer from server \n' + offer);
|
||||
//??????offer sdp????????RTCSessionDescription????
|
||||
var desc = new RTCSessionDescription();
|
||||
desc.sdp = offer;
|
||||
desc.type = 'offer';
|
||||
pc2.setRemoteDescription(desc);
|
||||
// Since the 'remote' side has no media stream we need
|
||||
// to pass in the right constraints in order for it to
|
||||
// accept the incoming offer of audio and video.
|
||||
pc2.createAnswer().then(
|
||||
gotDescription2,
|
||||
onCreateSessionDescriptionError
|
||||
);
|
||||
}
|
||||
|
||||
function gotDescription2(desc) {
|
||||
// Provisional answer, set a=inactive & set sdp type to pranswer.
|
||||
/*desc.sdp = desc.sdp.replace(/a=recvonly/g, 'a=inactive');
|
||||
desc.type = 'pranswer';*/
|
||||
|
||||
pc2.setLocalDescription(desc).then(
|
||||
onSetLocalDescriptionSuccess,
|
||||
onSetLocalDescriptionError
|
||||
);
|
||||
trace('Pranswer from pc2 \n' + desc.sdp);
|
||||
|
||||
//conn.send(JSON.stringify(desc));
|
||||
// send desc.sdp to server
|
||||
}
|
||||
|
||||
function stop() {
|
||||
trace('Ending Call' + '\n\n');
|
||||
pc2.close();
|
||||
pc2 = null;
|
||||
}
|
||||
|
||||
function gotRemoteStream(e) {
|
||||
vid2.srcObject = e.stream;
|
||||
trace('Received remote stream');
|
||||
}
|
||||
|
||||
function iceCallback(event) {
|
||||
if (event.candidate) {
|
||||
trace('Remote ICE candidate: \n ' + event.candidate.candidate);
|
||||
//conn.send(JSON.stringify(event.candidate));
|
||||
}
|
||||
else {
|
||||
// All ICE candidates have been sent
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user