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 okjswebrtc.min.jsImport 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 playback
  • onPause(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