1.将srs.sdk.js放到文件中
在vue中使用，需要将js方法中的函数通过 export default{}的方式暴露出来。
2.srs拉流（播放器）
下面是通过srs.sdk.js文件中的SrsRtcPlayerAsync方法进行拉流；
还有一种方法，可以在index.html中通过script引入jswebrtc.min.js文件，调用方法直接使用文章来源：https://www.toymoban.com/news/detail-703787.html
(1)封装组件
<template>
<video :id="videoId"
class="player"
controls
autoplay
style="width:100%;height:100%;">
</video>
</template>
<script>
import Srs from '@/assets/js/srs.sdk'
export default {
name: 'webrtcPlayer2',
props: {
videoId: {
type: String,
default: 'player'
},
url: {
type: String,
default: ''
},
},
data () {
return {
}
},
created () {
},
mounted () {
this.play()
},
methods: {
play () {
var player = document.getElementById(this.videoId);
//方法一：使用srs.sdk.js
const rtcPlayer = new Srs.SrsRtcPlayerAsync()
rtcPlayer.play(this.url)
// video标签
player.srcObject = rtcPlayer.stream
//方法二：使用jswebrtc.min.js
// new JSWebrtc.Player(this.url, { video: player, autoplay: true, });
}
}
}</script>（2）使用
<webrtc-player-2
:videoId="'play1'"
:url="'webrtc://41.128.16.190:1990/live/livestream2'"
style="width:50%">
</webrtc-player-2>3.srs推流（视频、广播）
（1）封装
<template>
<video :id="videoId"
class="pusher"
controls
autoplay
style="width:100%;height:100%;" />
</template>
<script>
import Srs from '@/assets/js/srs.sdk'
export default {
name: 'webrtcPusher',
props: {
videoId: {
type: String,
default: 'pusher'
},
url: {
type: String,
default: ''
},
isVideo: {
type: Boolean,
default: false
}
},
data () {
return {
sdk: null,
}
},
created () {
// this.url = 'webrtc://41.128.16.190:1990/live/livestream'
},
mounted () {
this.$watch('url', () => {
console.log('url', this.url)
if (this.url) {
this.start()
} else {
// this.stop()
}
}, { immediate: true, deep: true })
},
methods: {
start () {
//1.定义播放器
var play = document.getElementById(this.videoId);
// 2. 调用srs.sdk.js的SrsRtcPublisherAsync方法，new一个对象（记得将方法暴漏出来）
this.sdk = new Srs.SrsRtcPublisherAsync()
// 3. 执行SrsRtcPublisherAsync中的publish方法进行推流（jq调用ajax改为原生ajax）
this.sdk.publish(this.url).then(session => {
// 推流成功
console.log('session', session)
}).catch(reason => {
// 推流失败
// 3.1 执行close方法，关闭推流
this.sdk.close();
console.log('reason', reason)
// 3.2错误判断
if (reason.name === 'HttpsRequiredError') {
alert(`WebRTC推流必须是HTTPS或者localhost：` + reason.name + reason.message);
} else if (reason.name === 'NotFoundError') {
alert(`找不到麦克风和摄像头设备：getUserMedia` + reason.name + reason.message);
} else if (reason.name === 'NotAllowedError') {
alert(`你禁止了网页访问摄像头和麦克风：getUserMedia` + reason.name + reason.message);
} else if (reason.name === 'NotAllowedError') {
alert(`你禁止了网页访问摄像头和麦克风：getUserMedia` + reason.name + reason.message);
} else if (['AbortError', 'NotAllowedError', 'NotFoundError', 'NotReadableError', 'OverconstrainedError', 'SecurityError', 'TypeError'].includes(reason.name)) {
alert(`getUserMedia` + reason.name + reason.message);
} else {
alert(reason.name + reason.message);
}
})
// 4.打开播放器
// new JSWebrtc.Player(this.url, { video: play, autoplay: true, });
const rtcPlayer = new Srs.SrsRtcPlayerAsync()
rtcPlayer.play(this.url)
play.srcObject = rtcPlayer.stream
if (this.isVideo) {
play.style.display = 'block'
} else {
play.style.display = 'none'
}
},
play () {
}
}
}</script>（2）使用文章来源地址https://www.toymoban.com/news/detail-703787.html
<webrtc-pusher
:url="'webrtc://41.128.16.190:1990/web/'+case_No"
:isVideo="true"
class="pusher">
</webrtc-pusher>到了这里，关于webrtc视频播放器（srs.sdk.js）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
