修改图片，视频查看等功能
LAPTOP-S9HJSOEB\昊天
1 year ago
parent
7de35609a7
commit
2587f52757
Binary file not shown.
@ -1,218 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title></title>
|
||||
<script src="https://unpkg.com/vue@next"></script>
|
||||
<!-- <script src="./webrtc-vue/vue.global.prod.js" type="text/javascript" charset="utf-8"></script> -->
|
||||
<script src="./ZLMRTCClient.js" type="text/javascript" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div style="text-align: center">
|
||||
<div>
|
||||
<video ref="video" controls autoplay style="text-align: left">
|
||||
Your browser is too old which doesn't support HTML5 video.
|
||||
</video>
|
||||
|
||||
<video ref="selfVideo" controls autoplay style="text-align: right">
|
||||
Your browser is too old which doesn't support HTML5 video.
|
||||
</video>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
const App = {
|
||||
data() {
|
||||
return {
|
||||
streamUrl: document.location.protocol + "//" + window.location.host +
|
||||
"/index/api/webrtc?app=live&stream=test&type=play",
|
||||
player: null,
|
||||
recvOnly: true,
|
||||
resolutions: [],
|
||||
resolution: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let ishttps = "https:" == document.location.protocol ? true : false;
|
||||
let isLocal = "file:" == document.location.protocol ? true : false;
|
||||
if (!ishttps && !isLocal) {
|
||||
|
||||
alert(
|
||||
"本demo需要在https的网站访问 ,如果你要推流的话(this demo must access in site of https if you want push stream)"
|
||||
);
|
||||
}
|
||||
if (isLocal) {
|
||||
streamUrl.value =
|
||||
"http://127.0.0.1" + "/index/api/webrtc?app=live&stream=test&type=play";
|
||||
}
|
||||
ZLMRTCClient.GetAllScanResolution().forEach((r, i) => {
|
||||
let text = r.label + "(" + r.width + "x" + r.height + ")";
|
||||
this.resolutions.push({
|
||||
text: text,
|
||||
value: r
|
||||
});
|
||||
});
|
||||
|
||||
this.resolution = this.resolutions[0].text;
|
||||
},
|
||||
methods: {
|
||||
//点击radio事件
|
||||
radioChange(value) {
|
||||
let url = new URL(this.streamUrl);
|
||||
console.log(value);
|
||||
url.searchParams.set("type", value);
|
||||
this.streamUrl = url;
|
||||
if (value == "play") {
|
||||
this.recvOnly = true;
|
||||
} else if (value == "echo") {
|
||||
this.recvOnly = false;
|
||||
} else {
|
||||
this.recvOnly = false;
|
||||
}
|
||||
},
|
||||
changeResolution(e) {
|
||||
this.resolution = e.target.options[e.target.selectedIndex].text;
|
||||
},
|
||||
start_play() {
|
||||
let res = this.resolution.match(/\d+/g);
|
||||
let h = parseInt(res.pop());
|
||||
let w = parseInt(res.pop());
|
||||
|
||||
this.player = new ZLMRTCClient.Endpoint({
|
||||
element: this.$refs.video, // video 标签
|
||||
debug: true, // 是否打印日志
|
||||
zlmsdpUrl: this.streamUrl, //流地址
|
||||
simulcast: this.$refs.simulcast.checked,
|
||||
useCamera: this.$refs.useCamera.checked,
|
||||
audioEnable: this.$refs.audioEnable.checked,
|
||||
videoEnable: this.$refs.videoEnable.checked,
|
||||
recvOnly: this.recvOnly,
|
||||
resolution: {
|
||||
w: w,
|
||||
h: h
|
||||
},
|
||||
usedatachannel: this.$refs.datachannel.checked,
|
||||
});
|
||||
|
||||
this.player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function(e) {
|
||||
// ICE 协商出错
|
||||
console.log("ICE 协商出错");
|
||||
});
|
||||
|
||||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function(e) {
|
||||
//获取到了远端流，可以播放
|
||||
console.log("播放成功", e.streams);
|
||||
});
|
||||
|
||||
this.player.on(
|
||||
ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,
|
||||
function(e) {
|
||||
// offer anwser 交换失败
|
||||
console.log("offer anwser 交换失败", e);
|
||||
stop();
|
||||
}
|
||||
);
|
||||
|
||||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, function(s) {
|
||||
// 获取到了本地流
|
||||
|
||||
this.$refs.selfVideo.srcObject = s;
|
||||
this.$refs.selfVideo.muted = true;
|
||||
//console.log('offer anwser 交换失败',e)
|
||||
});
|
||||
|
||||
this.player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, function(s) {
|
||||
// 获取本地流失败
|
||||
console.log("获取本地流失败");
|
||||
});
|
||||
|
||||
this.player.on(
|
||||
ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,
|
||||
function(state) {
|
||||
// RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
|
||||
console.log("当前状态==>", state);
|
||||
}
|
||||
);
|
||||
|
||||
this.player.on(
|
||||
ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN,
|
||||
function(event) {
|
||||
console.log("rtc datachannel 打开 :", event);
|
||||
}
|
||||
);
|
||||
|
||||
this.player.on(
|
||||
ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG,
|
||||
function(event) {
|
||||
console.log("rtc datachannel 消息 :", event.data);
|
||||
this.$refs.msgrecv.value = event.data;
|
||||
}
|
||||
);
|
||||
this.player.on(
|
||||
ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR,
|
||||
function(event) {
|
||||
console.log("rtc datachannel 错误 :", event);
|
||||
}
|
||||
);
|
||||
this.player.on(
|
||||
ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE,
|
||||
function(event) {
|
||||
console.log("rtc datachannel 关闭 :", event);
|
||||
}
|
||||
);
|
||||
},
|
||||
startVideo() {
|
||||
console.log("开始");
|
||||
this.stopVideo();
|
||||
let res = this.resolution.match(/\d+/g);
|
||||
let h = parseInt(res.pop());
|
||||
let w = parseInt(res.pop());
|
||||
if (this.$refs.useCamera.checked && !this.recvOnly) {
|
||||
ZLMRTCClient.isSupportResolution(w, h)
|
||||
.then((e) => {
|
||||
this.start_play();
|
||||
})
|
||||
.catch((e) => {
|
||||
alert("not support resolution");
|
||||
});
|
||||
} else {
|
||||
this.start_play();
|
||||
}
|
||||
|
||||
},
|
||||
stopVideo() {
|
||||
console.log("停止");
|
||||
if (this.player) {
|
||||
this.player.close();
|
||||
this.player = null;
|
||||
var remote = this.$refs.video;
|
||||
if (remote) {
|
||||
remote.srcObject = null;
|
||||
remote.load();
|
||||
}
|
||||
var local = this.$refs.selfVideo;
|
||||
local.srcObject = null;
|
||||
local.load();
|
||||
}
|
||||
},
|
||||
send() {
|
||||
if (this.player) {
|
||||
//send msg refernece https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/send
|
||||
this.player.sendMsg(this.$refs.msgsend.value);
|
||||
}
|
||||
},
|
||||
close() {
|
||||
if (this.player) {
|
||||
this.player.closeDataChannel();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Vue.createApp(App).mount('#app');
|
||||
</script>
|
||||
</html>
|
||||
@ -1,269 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title></title>
|
||||
<script src="https://unpkg.com/vue@next"></script>
|
||||
<!-- <script src="./webrtc-vue/vue.global.prod.js" type="text/javascript" charset="utf-8"></script> -->
|
||||
<script src="./ZLMRTCClient.js" type="text/javascript" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div style="text-align: center">
|
||||
<div>
|
||||
<video ref="video" controls autoplay style="text-align: left">
|
||||
Your browser is too old which doesn't support HTML5 video.
|
||||
</video>
|
||||
|
||||
<video ref="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" style="co" ref="url" v-model="streamUrl" />
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="simulcast">simulcast:</label>
|
||||
<input type="checkbox" ref="simulcast" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="useCamera">useCamera:</label>
|
||||
<input type="checkbox" checked="checked" ref="useCamera" />
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="audioEnable">audioEnable:</label>
|
||||
<input type="checkbox" ref="audioEnable" checked="checked" />
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="videoEnable">videoEnable:</label>
|
||||
<input type="checkbox" ref="videoEnable" checked="checked" />
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="method">method(play or push or echo):</label>
|
||||
<input type="radio" name="method" @click="radioChange('echo')" value="echo" />echo
|
||||
<input type="radio" name="method" @click="radioChange('push')" value="push" />push
|
||||
<input type="radio" name="method" @click="radioChange('play')" value="play"
|
||||
checked="true" />play
|
||||
</p>
|
||||
<p>
|
||||
<label for="resolution">resolution:</label>
|
||||
<!-- <select id="resolution" :value="resolution"></select> -->
|
||||
<select @change="changeResolution">
|
||||
<option :value="resolution.value" v-for="resolution in resolutions">
|
||||
{{ resolution.text }}
|
||||
</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="datachannel">datachannel:</label>
|
||||
<input ref="datachannel" name="datachannel" type="checkbox" value="0" />
|
||||
</p>
|
||||
<button @click="startVideo">开始(start)</button>
|
||||
<button @click="stopVideo">停止(stop)</button>
|
||||
|
||||
<p>
|
||||
<label for="msgsend">msgsend:</label>
|
||||
<input type="text" ref="msgsend" value="hello word !" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="msgrecv">msgrecv:</label>
|
||||
<input type="text" ref="msgrecv" disabled />
|
||||
</p>
|
||||
<button @click="send">发送(send by datachannel)</button>
|
||||
<button @click="close">关闭(close datachannel)</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
const App = {
|
||||
data() {
|
||||
return {
|
||||
streamUrl: document.location.protocol + "//" + window.location.host +
|
||||
"/index/api/webrtc?app=live&stream=test&type=play",
|
||||
player: null,
|
||||
recvOnly: true,
|
||||
resolutions: [],
|
||||
resolution: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (isLocal) {
|
||||
streamUrl.value =
|
||||
"http://127.0.0.1" + "/index/api/webrtc?app=live&stream=test&type=play";
|
||||
}
|
||||
ZLMRTCClient.GetAllScanResolution().forEach((r, i) => {
|
||||
let text = r.label + "(" + r.width + "x" + r.height + ")";
|
||||
this.resolutions.push({
|
||||
text: text,
|
||||
value: r
|
||||
});
|
||||
});
|
||||
|
||||
this.resolution = this.resolutions[0].text;
|
||||
},
|
||||
methods: {
|
||||
//点击radio事件
|
||||
radioChange(value) {
|
||||
let url = new URL(this.streamUrl);
|
||||
console.log(value);
|
||||
url.searchParams.set("type", value);
|
||||
this.streamUrl = url;
|
||||
if (value == "play") {
|
||||
this.recvOnly = true;
|
||||
} else if (value == "echo") {
|
||||
this.recvOnly = false;
|
||||
} else {
|
||||
this.recvOnly = false;
|
||||
}
|
||||
},
|
||||
changeResolution(e) {
|
||||
this.resolution = e.target.options[e.target.selectedIndex].text;
|
||||
},
|
||||
start_play() {
|
||||
let res = this.resolution.match(/\d+/g);
|
||||
let h = parseInt(res.pop());
|
||||
let w = parseInt(res.pop());
|
||||
|
||||
this.player = new ZLMRTCClient.Endpoint({
|
||||
element: this.$refs.video, // video 标签
|
||||
debug: true, // 是否打印日志
|
||||
zlmsdpUrl: this.streamUrl, //流地址
|
||||
simulcast: this.$refs.simulcast.checked,
|
||||
useCamera: this.$refs.useCamera.checked,
|
||||
audioEnable: this.$refs.audioEnable.checked,
|
||||
videoEnable: this.$refs.videoEnable.checked,
|
||||
recvOnly: this.recvOnly,
|
||||
resolution: {
|
||||
w: w,
|
||||
h: h
|
||||
},
|
||||
usedatachannel: this.$refs.datachannel.checked,
|
||||
});
|
||||
|
||||
this.player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function(e) {
|
||||
// ICE 协商出错
|
||||
console.log("ICE 协商出错");
|
||||
});
|
||||
|
||||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function(e) {
|
||||
//获取到了远端流，可以播放
|
||||
console.log("播放成功", e.streams);
|
||||
});
|
||||
|
||||
this.player.on(
|
||||
ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,
|
||||
function(e) {
|
||||
// offer anwser 交换失败
|
||||
console.log("offer anwser 交换失败", e);
|
||||
stop();
|
||||
}
|
||||
);
|
||||
|
||||
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, function(s) {
|
||||
// 获取到了本地流
|
||||
|
||||
this.$refs.selfVideo.srcObject = s;
|
||||
this.$refs.selfVideo.muted = true;
|
||||
//console.log('offer anwser 交换失败',e)
|
||||
});
|
||||
|
||||
this.player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, function(s) {
|
||||
// 获取本地流失败
|
||||
console.log("获取本地流失败");
|
||||
});
|
||||
|
||||
this.player.on(
|
||||
ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,
|
||||
function(state) {
|
||||
// RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
|
||||
console.log("当前状态==>", state);
|
||||
}
|
||||
);
|
||||
|
||||
this.player.on(
|
||||
ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN,
|
||||
function(event) {
|
||||
console.log("rtc datachannel 打开 :", event);
|
||||
}
|
||||
);
|
||||
|
||||
this.player.on(
|
||||
ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG,
|
||||
function(event) {
|
||||
console.log("rtc datachannel 消息 :", event.data);
|
||||
this.$refs.msgrecv.value = event.data;
|
||||
}
|
||||
);
|
||||
this.player.on(
|
||||
ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR,
|
||||
function(event) {
|
||||
console.log("rtc datachannel 错误 :", event);
|
||||
}
|
||||
);
|
||||
this.player.on(
|
||||
ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE,
|
||||
function(event) {
|
||||
console.log("rtc datachannel 关闭 :", event);
|
||||
}
|
||||
);
|
||||
},
|
||||
startVideo() {
|
||||
console.log("开始");
|
||||
this.stopVideo();
|
||||
let res = this.resolution.match(/\d+/g);
|
||||
let h = parseInt(res.pop());
|
||||
let w = parseInt(res.pop());
|
||||
if (this.$refs.useCamera.checked && !this.recvOnly) {
|
||||
ZLMRTCClient.isSupportResolution(w, h)
|
||||
.then((e) => {
|
||||
this.start_play();
|
||||
})
|
||||
.catch((e) => {
|
||||
alert("not support resolution");
|
||||
});
|
||||
} else {
|
||||
this.start_play();
|
||||
}
|
||||
|
||||
},
|
||||
stopVideo() {
|
||||
console.log("停止");
|
||||
if (this.player) {
|
||||
this.player.close();
|
||||
this.player = null;
|
||||
var remote = this.$refs.video;
|
||||
if (remote) {
|
||||
remote.srcObject = null;
|
||||
remote.load();
|
||||
}
|
||||
var local = this.$refs.selfVideo;
|
||||
local.srcObject = null;
|
||||
local.load();
|
||||
}
|
||||
},
|
||||
send() {
|
||||
if (this.player) {
|
||||
//send msg refernece https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel/send
|
||||
this.player.sendMsg(this.$refs.msgsend.value);
|
||||
}
|
||||
},
|
||||
close() {
|
||||
if (this.player) {
|
||||
this.player.closeDataChannel();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Vue.createApp(App).mount('#app');
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue