WebComponent+WebGl real-time image processing danmu player

github -> Github.com/dwqdaiwenqi…

Real-time image processing bullet screen player with WebGl and Web Componet

Characteristics of the

• Based on Web Components, embrace the Web Components standard, omi is used internally as the development framework of Web Components, OMI is a very good modern framework, strongly recommended!
• High performance, WebGl is used for rendering, the number of bullets in the same frequency reaches 5000+, FPS is still strong
• Want to show the movement of the traditional barrage mode, added the curve mode of barrage sending
• Built-in special effects commands for real-time image processing (do not use in full screen mode), currently have # eye protection, # snow, etc. – more special effects commands will be supported in the future

– > Demo located at dwqdaiwenqi. Making. IO/danmaku – PLA…

screenshots

Usage

The value can be obtained from NPM or CDN

npm i danmaku-player
Copy the code

• Unpkg.com/danmaku-pla…

HTML

The usage is similar to the
tag and can be written directly to THE HTML

  <script src="//unpkg.com/danmaku-player@latest/dist/scripts/danmaku-player.min.js"></script>
  <danmaku-player id="player" autoplay="false"
    danmakuapi="//static.xyimg.net/cn/static/fed/common/danmaku-list.json"
    thumbnail="//static.xyimg.net/cn/static/fed/common/img/thumbnail-tile-90X1-scale-160X90.png"
    thumbnailtile="90"
    poster="//static.xyimg.net/cn/static/fed/common/img/posterx.jpg"
    src="//static.xyimg.net/cn/static/fed/common/media/Galileo180.mp4"></danmaku-player>
  <script>
    var $player = document.querySelector('#player')

    // $player.loop = false
    $player.autoplay =false
    $player.playbackrate=1
    $player.enableSendDanmaku=true
    $player.enableSwitchDanmaku=true
    

    // $player.play()
    
    $player.addEventListener('senddanmaku',(e)=>{
      //debugger
      console.log('senddanmaku')
    })
    $player.addEventListener('progress',e=>{
      console.log('progress')
    })
    $player.addEventListener('loadeddata',e=>{
      console.log('loadeddata')
    })

    $player.addEventListener('canplay',e=>{
      console.log('canplay')
    })
    $player.addEventListener('play',(e)=>{
      console.log('play')
    })
    $player.addEventListener('timeupdate',(e)=>{
     console.log('timeupdate')
    })
    $player.addEventListener('ended',e=>{
      console.log('ended.')})</script>
Copy the code

React

import 'danmaku-player'
/ /...
render(){
  // React requires a ref to retrieve the native DOM object
    return(
      <section>
        <danmaku-player ref={el= >this.$player=el}src="//static.xyimg.net/cn/static/fed/common/media/Galileo180.mp4"></danmaku-player>
      </section>) } componentDidMount(){ this.$player.addEventListener('play',()=>{ //... }) / /... }Copy the code

Special instructions

Special effects command # XXX, the first time type # XXX to turn on special effects, again type # XXX to turn off special effects. Currently there are # snow, more instructions to be developed…

Tag attributes

Related properties & methods

Related events

.sendDanmaku(text=”,options={})

$player.sendDanmaku('Barrage text... ', {fill:'blue'.// Barrage color
  mode:'linear'./ / barrage movement patterns have linear | fixed | curve, the curve of linear fixed | | aboveFontSize:20.// The font size of the barrage
  alpha:1 // Barrage transparency
})
Copy the code

danmakuapi

// The DanmakuAPI should return the following format
{
  // The 0th second of the video
  0: {data:[
      ｛text:'Bullet screen text'.fill:'Barrage color'.mode:'Motion mode'FontSize:'Bullet screen font size'.alpha:'Barrage transparency'}},// The first second of the video
  1: {data:[
      ｛text:'Bullet screen text'.fill:'Barrage color'.mode:'Motion mode'FontSize:'Bullet screen font size'.alpha:'Barrage transparency'},
      ｛text:'Bullet screen text'.fill:'Barrage color'.mode:'Motion mode'FontSize:'Bullet screen font size'.alpha:'Barrage transparency'}}]/ /...
}
Copy the code

You want to ask

Why not use the # XXX effect command in full screen mode

When a special effects command such as # snow is called, the player’s rendering is not using
, but is switched to
to fetch WebGl objects for rendering. In full screen mode, WebGl renders a real-time video texture with too much area, which causes FPS drop. There is no solution at present (please be informed if there is a good solution).

No processing on the mobile end

Yes, the two problems of autoplay and full screen are not solved by mobile browser, so compatibility with mobile terminal is not considered for the time being

Are properties and events consistent with native video

Not exactly. Although many events and properties have the same name, they are wrapped

How do I get a thumbnail of a video

If you want to generate a thumbnail of 90 small images horizontally combined, the video length is 180 seconds, 2(180/90) seconds for a screenshot, the FPS is 24, and every 48 (24*2) frames a 160*90 image is captured.

Then you can execute the ffpmeg command

ffmpeg -i Galileo.mp4 -frames 1 -vf "select=not(mod(n\,48)),scale=160:90,tile=90*1" assets/thumbnail-tile- 90.X1-scale- 160.X90.png
Copy the code

Welcome to help fill the hole. Welcome to Pull Request

Pending…

License

MIT