|
@@ -14,6 +14,14 @@
|
|
|
height="400"
|
|
|
></video>
|
|
|
</ContentWrap>
|
|
|
+ <ContentWrap>
|
|
|
+ <video
|
|
|
+ ref="videoPlayer2"
|
|
|
+ controls="true" autoplay="true"
|
|
|
+ width="500"
|
|
|
+ height="400"
|
|
|
+ ></video>
|
|
|
+ </ContentWrap>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</template>
|
|
@@ -21,19 +29,27 @@
|
|
|
<script lang="ts" setup>
|
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
let sdk = null
|
|
|
+let sdk2 = null
|
|
|
const videoPlayer = ref(null)
|
|
|
+const videoPlayer2 = ref(null)
|
|
|
const baseUrl = 'http://123.60.223.250:1985/rtc/v1/whep/?app=live&stream='
|
|
|
let url = `caoyang001`
|
|
|
+let url2 = `caoyang002`
|
|
|
|
|
|
onMounted(() => {
|
|
|
startPlay()
|
|
|
+ startPlay2()
|
|
|
})
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
if (sdk) {
|
|
|
sdk.close()
|
|
|
}
|
|
|
+ if (sdk2) {
|
|
|
+ sdk2.close()
|
|
|
+ }
|
|
|
sdk = null
|
|
|
+ sdk2 = null
|
|
|
})
|
|
|
|
|
|
const startPlay = async () => {
|
|
@@ -61,6 +77,32 @@ const startPlay = async () => {
|
|
|
console.log(error)
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+const startPlay2 = async () => {
|
|
|
+ try {
|
|
|
+ console.log(url)
|
|
|
+ if (url) {
|
|
|
+ if (sdk2) {
|
|
|
+ sdk2.close()
|
|
|
+ sdk2 = null
|
|
|
+ }
|
|
|
+ sdk2 = new SrsRtcWhipWhepAsync()
|
|
|
+ sdk2.play(baseUrl+url2)
|
|
|
+ .then(function (session) {
|
|
|
+ videoPlayer2.value.srcObject = sdk2.stream
|
|
|
+ })
|
|
|
+ .catch(function (reason) {
|
|
|
+ console.error(reason)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ ElMessage.error(
|
|
|
+ '请填写正确地址,地址格式为:http://123.60.223.250:1985/rtc/v1/whep/?app=live&stream=ID'
|
|
|
+ )
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped></style>
|