Jswebrtc library is introduced
- Making the address
- JSWebrtc encapsulates browser Webrtc and supports playback of SRS RTC streams.
- WebRTC (Web Real-Time Communications) is a real-time communication technology that allows Web applications or sites to establish peer-to-peer connections between browsers without resorting to intermediaries. Implement the transmission of video streams and/or audio streams or any other data.
Start using (VUE project)
- Download jswebrtc.min.js locally
- Will download ok
jswebrtc.min.js
Import into the project (in index.html)
Library configuration items and apis
Configuration items
video
– HTML Video element for playing Video.autoplay
– Whether to play automatically. False by default.onPlay(player)
– Callback after playbackonPause(player)
– Pause and callback
api
.play()
– start.pause()
Suspension –.stop()
– stop.destroy()
– Stop playback and clear related playback resources..paused
– Read-only: Whether to suspend the playback
Encapsulate calling code
<template>
<video id="jswebrtc"
ref="jswebrtc"
controls
style="width: 100%; height: 100%; object-fit: fill">
</video>
</template>
<script>
export default {
name: "WebRtcPlayer".props: {
videoSrc: {
type: String.default: ' '}},data() {
return {
player: null}},mounted() {
this.$watch('videoSrc'.() = > {
if (this.videoSrc) {
this.initVideo(this.videoSrc)
console.log('Play video path:'.this.videoSrc)
}
}, {immediate: true})},methods: {
/** * initVideo is called by reference to the ref on the component. /** * initVideo is called by reference to the ref on the component this.$refs.webrtc.initVideo('src') * */
initVideo(url) {
// Player has a clear reset
if (this.player) {
this.player.destroy()
this.player = null
}
// Get the bearer element DOM
let videoDom = document.getElementById('jswebrtc')
// Initialize the player
this.player = new JSWebrtc.Player(url,
{
video: videoDom,
autoplay: true.onPlay: (obj) = > {
// Monitor the state of the video element and play it when it can be played. Autoplay will fail in some cases
// mdn https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/canplay_event
Rookie / / https://www.runoob.com/tags/av-event-canplay.html
videoDom.addEventListener('canplay'.function (e) {
videoDom.play()
})
console.log(obj, 'Player starts playing! ')}})}},beforeDestroy() {
// Player exists to clear player
if (this.player) {
this.player.destroy()
}
}
}
</script>
<style scoped></style>
Copy the code