npm i @gvol-org/metastreaming
1、将下载的包中的 metastreaming.js 文件copy到工程相对目录下
2、在html页面中，用标签引入
<script src="./metastreaming.js"></script>
3、获取全局对象，默认对象挂载到了window上
- 创建1个id为 'player'的div，并传入setup方法中
- 将流渲染服务地址，传入setup方法中
<body>
<div id="player" ref="player" />
<script>
function startup() {
var metaClientStreaming = window.GVOL_MST;
// or var metaClientStreaming = window.metastreaming;
if (metaClientStreaming) {
metaClientStreaming.setup("player", "http://127.0.0.1", {
useICE: true,
ice:{
urls: ["stun:stun.l.google.com:19302"],
username: '',
credential: ''
}
}).then((res) => {
if (res.data && res.data.status) {
if (res.data.status === "success") {
//初始化成功
metaClientStreaming.play();
} else {
//初始化失败
alert(res.data.message);
console.log(res.data.message);
}
}
});
}
}
startup();
</script>
</body>
1、通过 npm 安装包
npm i @gvol-org/metastreaming
2、创建1个id为 'player'的div标签
<template>
<div id="player" ref="player"/>
</template>
3、引入metastreaming，并创建对象
- 将'player'标签，传入setup方法中
- 将流渲染服务地址，传入setup方法中
<script setup>
import { ref, onMounted } from "vue";
import { metastreaming } from "@gvol-org/metastreaming";
const player = ref(null);
onMounted(() => {
//等待dom渲染完成后，获取dom中的player组件
if (metastreaming) {
metastreaming.setup("player", "http://127.0.0.1").then((res) => {
if (res.data && res.data.status) {
if (res.data.status === "success") {
//初始化成功
metastreaming.play();
} else {
//初始化失败
alert(res.data.message);
console.log(res.data.message);
}
}
});
}
});
暂无