精华内容
下载资源
问答
  • 用canvas 实现EasyWasmPlayer视频截屏
    2021-08-26 17:45:36

    使用canvas进行截图

     <div :class="'box ' + 'box' + boxIndex" id="con_lf_top_div">
                        <div v-for="(item, index) in videoList" class="box-item" :key="index">
                          <img class="imgImg" v-if="item == null" :src="avatar" />
                          <div :id="'Player' + index" v-else></div>
                          <a-icon
                            v-if="item != null"
                            type="scissor"
                            @click="clickScreenshot(item, index)"
                            class="scissor"
                          />
     </div>
                    //部分代码,展示出来是为了清晰看下方获取的高度和宽度
    
     clickScreenshot(item, index) {
     //最重要的是获取到video
           var _video = this.player[index].h5Video
          //document.createElement() 方法来创建 <canvas> 元素
          const _canvas = document.createElement('canvas')
          // 播放器的宽高
          var _videoWidth = _video.videoWidth
          var _videoHeight = _video.videoHeight
          //getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性,该对象导出一个二维绘图 API。
          const _ctx = _canvas.getContext('2d')
          // 获取当前con_lf_top_div的高和宽
          var a = getComputedStyle(con_lf_top_div, null).width.split('p')
          var b = getComputedStyle(con_lf_top_div, null).height.split('p')
          _canvas.width = a[0]
          _canvas.height = b[0]
          //fillStyle 属性设置用于填充的颜色
          _ctx.fillStyle = '#ffffff'
         //fillRect() 方法绘制“已填色”的矩形
          _ctx.fillRect(0, 0, _videoWidth, _videoHeight)
         // 剪切图像,并在画布上定位被剪切的部分
          _ctx.drawImage(_video, 0, 0, _videoWidth, _videoHeight, 0, 0, _canvas.width, _canvas.height)
          var dataUrl = _canvas.toDataURL('image/png')
    }
    
    更多相关内容
  • 视屏监控中EasyWasmPlayer.js的使用(react)

    千次阅读 热门讨论 2021-02-25 13:27:17
    或 法2 npm 安装 npm install @easydarwin/easywasmplayer --save 引入 import WasmPlayer from '@easydarwin/easywasmplayer' //导入WasmPlayer.js 这样直接new WasmPlayer就好了 1、首先把动态的窗口排一下 1、...

    一、需求

    一开始用的海康服务插件做的视频监控,但是后来需要付费了,于是不得不寻找新的解决方案。
    需要实现的几个功能:
    1、初始按顺序加载所有监控(默认)
    2、窗口可选择,可手动控制监控点和监控窗口,同一窗口可切换监控画面
    3、监控视频(摄像头)可控制方向、缩放
    4、各监控窗口左上角显示当前摄像头的名称及位置信息
    5、切换窗口规格(1x1,2x2,3x3等)
    6、切换规格时,已有的监控画面不更新,直接缩小到对应尺寸(未实现)
    7、全屏
    8、浏览器长连接(浏览器同域名并发限制-我的chrome浏览器限制个数是6;意思就是,如果一个页面是3x3的9个监控,但是只能加载6个,剩下的3个都一直处于等待状态中)2021.12.02 更新:浏览器对ws没有并发限制
    9、监控延时(未实现)
    10、监控画面出现前展示加载动画,黑屏用户体验不友好(未实现)
    11、画面铺满整个播放器

    二、效果

    在这里插入图片描述

    三、实现

    法1:
    首先index.html中引入插件,

    <script src="./video/EasyWasmPlayer.js"></script>
    

    这里有个坑,create react app中new WasmPlayer时会报’WasmPlayer is not defined‘的错,这里提醒一下大家,如果有这个错,改成 new window.WasmPlayer就好了,或者自己修改webpack配置。

    法2
    npm 安装

    npm install @easydarwin/easywasmplayer --save
    

    引入

    import WasmPlayer from '@easydarwin/easywasmplayer' //导入WasmPlayer.js
    

    这样直接new WasmPlayer就好了

    1、首先把动态的窗口排一下

    1、render里面

     <img onClick={this.quanping} src={imgURL } className="quanping"/>
    <div className='VideoMonitorNewMix' ref={fullScreenRef}>//在你想要设置成全屏的div里面写ref
        {this.createGrid()} //父元素用display: flex;flex-wrap: wrap;布局                   
    </div>
    

    2、js里面

    const fullScreenRef = React.createRef();
    quanping = () => {
       fullScreenRef.current.requestFullscreen();//全屏
    }
    componentDidMount() {
    	for(let i=0;i<this.state.Size;i++){
        	window['flvPlayer'+i] = new WasmPlayer(
        		null, 
        		'video'+i, 
        		this.callbackfun,{
    		        Height:true
    		    })
    	}
    }
    // 动态生成Grid
    createGrid() {
        var res = [];
        for (let i = 0; i < this.state.Size; i++) {
            res.push(
                <div className={'video_panel' + Math.sqrt(this.state.Size)}>
                    <div id={'video'+i} onClick={(e)=>{this.getCameraIndex(i+'',e)}}></div>//getCameraIndex控制窗口的选中状态
                    <div id={"info"+i} className="info"></div>
                </div>);
        }
        return res;
    }
    

    3、scss

    .VideoMonitorNewMix{
        width: 100%;
        height: calc(100% - 40px);
        display: flex;
        flex-wrap: wrap;
    	//@mixin video_panel($count) {
    	//width:100% / $count;
    	//height:100% / $count;
    	//border:1px solid #061b31;
    	//}
    	//1x1
    	.video_panel1 {
    	    // @include video_panel(1);//想用scss写的,报错了,尴尬!!
    	    width:100%;
    	    height:100%;
    	    border:1px solid #061b31;
    	    position: relative;
    	    .info{
    	        color: yellow;
    	        position: absolute;
    	        left: 10px;
    	        top: 10px;
    	    }
    	}
    	// 2*2
    	 .video_panel2 {
    	     // @include video_panel(2);
    	     width:50%;
    	     height:50%;
    	     border:1px solid #061b31;
    	     position: relative;
    	     .info{
    	         color: yellow;
    	         position: absolute;
    	         left: 10px;
    	         top: 10px;
    	     }
    	 }
     }
    

    2、初始按顺序加载所有监控(默认)

    在componentDidMount中,确保已经获取所有监控数据this.state.MonitorData过后,开始加载,这里注意一下窗口数量和监控数量的取舍,保证资源的可利用性

    for(let i=0;i<(this.state.Size<=this.state.MonitorData.length?this.state.Size:this.state.MonitorData.length);i++){
       this.flv_reload(this.state.MonitorData[i].Url,i)//初始按顺序加载所有监控
    }
    
    flv_reload(rtspUrl,index=0){
            window['flvPlayer'+index]&&window['flvPlayer'+index].destroy()//释放播放器
            let deleteIndex,camera
            for(let i=0;i<this.state.cameraInfo.length;i++){
                if(this.state.cameraInfo[i].index==index){
                    camera=this.state.cameraInfo[i]
                    deleteIndex=i
                }
            }
    
            if(camera){//如果正在播放,先停止
                this.state.cameraInfo.splice(deleteIndex,1)//从正在播放的监控中删除
                //为了多客户端,不发停止指令
                // getFlvOpt({
                //     opt: 'stop',
                //     rtspaddr:camera.rtspUrl,
                //     FlvAddr:camera.playurl
                // }).then(res => {
                //     this.state.cameraInfo.splice(deleteIndex,1)//从正在播放的监控中删除
                //     console.log(this.state.cameraInfo)
                //     //法1:WasmPlayer.js播放器
                //     // 实例化播放器
                //     // window['flvPlayer'+index] = new WasmPlayer(null, 'video'+key+index, this.callbackfun)
                //     // 调用播放
                //     window['flvPlayer'+index].stop(camera.playurl, 1)
                // })
            }
            getFlvOpt({
                opt: 'start',
                rtspaddr:rtspUrl
            }).then(res => {
                let playurl =res.FlvAddr
                this.state.cameraInfo.push({index:index+'',rtspUrl:rtspUrl,playurl:playurl})//把当前窗口播放的监控url保存
                console.log(this.state.cameraInfo)
                //法1:WasmPlayer.js播放器
                // 实例化播放器
                window['flvPlayer'+index] = new WasmPlayer(null, 'video'+index, this.callbackfun,{
                    Height:true
                })
                // 调用播放--浏览器长连接-6个解决方案
                if(this.state.cameraInfo.length>6){
                    let videoUrl=playurl.split('/')
                    let port=videoUrl[2].split(':')
                    playurl=videoUrl[0]+'//'+'videoService:'+port[1]+'/'+videoUrl[3]+'/'+videoUrl[4]
                }
                window['flvPlayer'+index].play(playurl, 1)
    
                //添加摄像头名称、位置信息
                let moniInfo=this.state.MonitorData.filter(item=>{
                    return item.Url==rtspUrl
                })
                if(moniInfo&&moniInfo.length>0){
                    //1、获取div
                    let div = document.getElementById("info"+index);
                    div.innerHTML = "";
                    div.innerHTML="<p>名称:"+moniInfo[0].Name+"</p>"+
                                "<p>位置:"+moniInfo[0].Location+"</p>"
                }
            })
        }
    

    2021.12.02 更新
    由于浏览器对http请求的并发限制,导致多窗口视频监控时总需要配置hosts更改域名。但是对ws并没有这个限制,于是上段代码示例中 getFlvOpt优化如下:

    getFlvOptNew({
                opt:"getvideobyrtsp",
                rtspaddr:rtspUrl,
                type:'flv'
            }).then(res => {
                if(res.code==200){                
                    //ws播放,浏览器没有长连接限制--2021.12.02优化
                    let ws_addrArr=res.data.ws_url.split('/')
                    let ws_playFlvAddr=ws_addrArr[0]+"//"+window.location.host+"/"+ws_addrArr[3]+"/"+ws_addrArr[4]
                    res.data.ws_url=ws_playFlvAddr
                    let ws_playurl =res.data.ws_url
                    //ws方案-end
                    this.state.cameraInfo.push({index:index+'',rtspUrl:rtspUrl,playurl:playurl,DevId:DevId})//把当前窗口播放的监控url保存
                    console.log(this.state.cameraInfo)
                    //法1:WasmPlayer.js播放器
                    // 实例化播放器
                    window['flvPlayer'+index] = new WasmPlayer(null, 'video'+index, this.callbackfun,{
                        Height:true
                    })
                    window['flvPlayer'+index].play(ws_playurl, 1)
    
                    //添加摄像头名称、位置信息
                    let moniInfo=this.state.MonitorData.filter(item=>{
                        return item.Url==rtspUrl
                    })
                    if(moniInfo&&moniInfo.length>0){
                        //1、获取div
                        let div = document.getElementById("info"+index);
                        div.innerHTML = "";
                        div.innerHTML="<p>名称:"+moniInfo[0].Name+"</p>"+
                                    "<p>位置:"+moniInfo[0].Location+"</p>"
                    }
                }else{
                    Feedback.toast.prompt(res.message);
                }
            })
    

    2021.12.02 更新end

    3、窗口可选择,可手动控制监控点和监控窗口,同一窗口可切换监控画面

    //选择窗口-为了选择监控点
        getCameraIndex=(index,e)=>{
            for(let i=0;i<this.state.Size;i++){
                document.getElementById('video'+i).className = '';
            }
            document.getElementById('video'+index).className = 'active';
            this.setState({
                index:index+'',
                video:''
            })
        }
    
    .active{
       border:1px solid yellow !important;
    }
    

    4、监控视频(摄像头)可控制方向、缩放

    <div className="VideoMixControl">
       <div className='controlBtn'>
            <Icon type="arrow-up" size="small" className="up" onMouseDown={(e)=>this.controlCamera('up',e)} onMouseUp={(e)=>this.stopControlCamera('up',e)}/>
            <div style={{display:"flex"}}>
                <Icon type="arrow-left" size="small" className="left" onMouseDown={(e)=>this.controlCamera('left',e)} onMouseUp={(e)=>this.stopControlCamera('left',e)}/>
                <div className="control"></div>
                <Icon type="arrow-right" size="small" className="right" onMouseDown={(e)=>this.controlCamera('right',e)} onMouseUp={(e)=>this.stopControlCamera('right',e)}/>
            </div>
            <Icon type="arrow-down" size="small" className="down" onMouseDown={(e)=>this.controlCamera('down',e)} onMouseUp={(e)=>this.stopControlCamera('down',e)}/>
        </div>
        <div className="controlZoomBtn">
            <Icon type="add" size="large" className="add" onMouseDown={(e)=>this.controlCamera('add',e)} />
            <Icon type="minus" size="large" className="minus" onMouseDown={(e)=>this.controlCamera('minus',e)}/>
        </div>
        <img onClick={::this.quanping} src={imgURL } className="quanping"/>
    </div>
    
    //控制摄像头方向
        controlCamera=(direction,e)=>{
            if(this.state.index==""){
                Feedback.toast.prompt("请选择窗口");
                return
            }
            let camera=this.state.cameraInfo.filter(item=>{
                return item.index==this.state.index
            })
            if(camera.length==0){
                Feedback.toast.prompt("当前窗口没有监控");
                return
            }
            let CameraisCtrl=this.state.MonitorData.filter(item=>{
                return item.Url==camera[0].rtspUrl
            })
            console.log(CameraisCtrl)
            let opt=''
            switch(direction){
                case 'up':
                    opt='UpStart';break;
                case 'right':
                    opt='RightStart';break;
                case 'down':
                    opt='DownStart';break;
                case 'left':
                    opt='LeftStart';break;
                case 'add':
                    opt='ZoomIn';break;
                case 'minus':
                    opt='ZoomOut';break;
            }
            controlCameraOpt({
                opt:opt,
                ipaddr:CameraisCtrl[0].IPAddr,
            }).then(res => {
    
            })
        }
        //停止摄像头旋转
        stopControlCamera=(direction,e)=>{
            if(this.state.index==""){
                Feedback.toast.prompt("请选择窗口");
                return
            }
            let camera=this.state.cameraInfo.filter(item=>{
                return item.index==this.state.index
            })
            if(camera.length==0){
                Feedback.toast.prompt("当前窗口没有监控");
                return
            }
            let CameraisCtrl=this.state.MonitorData.filter(item=>{
                return item.Url==camera[0].rtspUrl
            })
            console.log(CameraisCtrl)
            let opt=''
            switch(direction){
                case 'up':
                    opt='UpStop';break;
                case 'right':
                    opt='RightStop';break;
                case 'down':
                    opt='DownStop';break;
                case 'left':
                    opt='LeftStop';break;
            }
            controlCameraOpt({
                opt:opt,
                ipaddr:CameraisCtrl[0].IPAddr,
            }).then(res => {
    
            })
        }
    

    四、总结

    主要技术点:
    1、动态排列成栅格布局–参考这个
    2、浏览器长连接–了解详细请点击这里
    3、画面铺满整个播放器–了解详情点击这里

    五、参考

    easyWasmPlayer demo
    开源流媒体服务器-在线演示

    展开全文
  • vue及H5中使用easywasmplayer H265播放器

    千次阅读 热门讨论 2021-03-11 08:36:27
    EasyWasmPlayer播放器,就是一款能够同时支持HTTP、RTMP、...具体的文档在easywasmplayer安装包的readme文档中有介绍。 详细的html、vue示例代码:github示例项目代码 官方的文档地址: 开源中国:https://my.osch

    EasyWasmPlayer播放器,就是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS(m3u8)、WS-FLV视频直播与视频点播等多种协议,重点在于该播放器是一款支持H5的播放器,可以兼容H.265编码格式视频在web浏览器上面的直播。

    参考资料:
    该播放器可以实现在html中集成以及vue中集成。
    具体的文档在easywasmplayer安装包的readme文档中有介绍。
    在这里插入图片描述
    详细的html、vue示例代码:github示例项目代码

    官方的文档地址:
    开源中国:https://my.oschina.net/u/4619556
    CSDN:https://blog.csdn.net/xiejiashu
    github:https://github.com/tsingsee
    博客园:https://www.cnblogs.com/EasyNVR/

    https://gitee.com/organizations/scitechlabs/projects

    一、在vue中使用easywasmplayer

    1、安装插件
     npm install @easydarwin/easywasmplayer --save
    

    安装之后在当前项目文件夹中的node-modules目录中能够找到@easydarwin–>easywasmplayer:
    在这里插入图片描述在这里插入图片描述 在这里插入图片描述

    2、拷贝文件到项目public文件夹中

    将EasyWasmPlayer.js以及libDecoder.wasm文件拷贝到vue项目的public文件夹下:
    在这里插入图片描述

    3、在public目录index.html中添加引用
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
        <title>EasyWasmPlayer-Demo</title>
        <--添加如下引用-->
        <script src="./EasyWasmPlayer.js"></script>   
      </head>
      <body>
        <div id="app"></div>
      </body>
    </html>
    
    4、在vue中使用
    • 定义一个div标签用于播放视频画面
    • 实例化播放器
    • 调用播放器进行播放、暂停、关闭等
    <template>
      <div class="box">
        <div id="Player"></div>
      </div>
    </template>
    <script>
    
    export default {
      data() {
        return {
          player: '',
          url: 'http://127.0.0.1:10080/fvod/PnCsnxdMg/video.m3u8'
        }
      },
      mounted() {
        // 实例化播放器
        this.player = new WasmPlayer(null, 'Player', this.callbackfun)
        // 调用播放
        this.player.play(this.url, 1)
      },
      methods: {
        callbackfun(e) {
          console.log('callbackfun', e);
        }
      }  
    }
    </script>
    <style>
      .box {
        width:600px;
        height:400px;
      }
    </style>
    
    5、参数解释
    var player = new wasmPlayer(url,ID,callbackFun,{cbUserPtr:this,cfKbs: fn, decodeType:"auto" or "soft", openAudio"1" or "0", BigPlay"true" or "false", Height:" true" or "false, HideKbs:" true" or "false});
    

    在这里插入图片描述
    事件的方法名和说明:
    在这里插入图片描述
    其他:
    暂停视频播放:

    this.player.pause(this.video_addr);
    

    关闭视频播放:

    this.player.destroy(this.video_addr)
    

    关闭之后,再需要启动播放则需重新初始化播放器示例:

    this.player = new WasmPlayer(null,"video_player",this.callback,{Height:true})
    this.player.play(this.video_addr,1);
    

    二、在Html中使用easywasmplayer

    新建index.html文件,将EasyWasmPlayer.js以及libDecoder.wasm放在该文件夹中:
    在这里插入图片描述
    index.html代码如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>EasyWasmPlayer</title>
        <script src="./EasyWasmPlayer.js"></script>
    </head>
    
    <body>
        <h4 style="width:600px;margin: auto;">H265播放器</h4>
        <br>
        <div style="width:600px;height: 400px; background-color:pink;margin: auto;">
            <div id="newplay" onClick="onplay"></div>
            <p>列如:http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easywasmplayer/" target="_blank"> 在线演示</a></p>
            <p style="color:red;font-size: 12px;">注意:本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p> 
            <input type="text" id="value">
            <button id="btn">播放</button>
        </div>
        <script>
            // 播放器回调函数
            callbackfun = function (e) { 
                console.log(e);
            }
            // 播放按钮
            var btn = document.getElementById('btn'); 
            // 地址栏
            var value = document.getElementById('value');
            // 实例播放器
            var player = new WasmPlayer(null, 'newplay', callbackfun,{
                Height:true
            })
            //播放事件 传入地址播放
            btn.onclick = function(){
                player.play(value.value,1);
                console.log(value.value);
            }
        
        </script>
    </body>
    </html>
    

    运行后界面显示如下:
    在这里插入图片描述
    备注:需要使用合适的视频地址,否则不能播放。
    需要使用合适的node版本:本例使用node v10.13.0,太高或者太低都可能出现编译不通过的报错,具体node版本管理和选择nvm管理多版本node

    展开全文
  • 其中新的 H.265 播放器分支 EasyWasmPlayer 播放器是网页播放的主流播放器。 当我们在项目中采用 EasyWasmPlayer 播放视频时,控制台会一直出现报错 Uncaught (in promise)DOMException。本文我们分析下该报错是...

    作为TSINGSEE青犀视频开发的视频流媒体播放器,EasyPlayer 系列项目都支持集成以及二次开发,也可以通过下载试用获得真实的测试效果。其中新的 H.265 播放器分支 EasyWasmPlayer 播放器是网页播放的主流播放器。

    当我们在项目中采用 EasyWasmPlayer 播放视频时,控制台会一直出现报错 Uncaught (in promise)DOMException。本文我们分析下该报错是什么问题导致的。

    image.png

    其实这个问题是浏览器阻止自动播放导致的错误,用户设置了自动播放,所以在首屏加载时会出现这个情况,处理这个情况可以将音频禁止即可。

    image.png

    将 openAudio 改为 true 是禁用音频,或者避免首屏一上来就加载播放器,但是该项目中显然不是这个问题,而是打开播放页面,选中设备开始播放,才开始加载播放器,修改后即能正常播放:

    image.png

    TSINGSEE青犀视频自主研发的播放器 EasyPlayer 目前正在多个平台上得到了有效使用,并且支持集成,还包括 EasyPlayer RTSP、EasyPlayer RTMP、EasyPlayerPro 和 EasyPlayer.js 等播放器,具备更高的可用性和更低的延时性,欢迎大家了解。

    展开全文
  • 大家知道在EasyNVR版本更新后,同时兼容了Easyplayer和EasyWasmPlayer两种播放器,EasyWasmPlayer支持H265编码视频的播放。但是在播放录像文件使用EasyDarwin/EasyWasmPlayer播放器播放时,只播放几秒,视频就停下了...
  • 支持播放H.265编码视频的流媒体播放器EasyWasmPlayer.js播放器在测试时,我们发现在运行过程中,生成播放器实例后,必须注销才能重新赋值新的地址,否则就会出现400报错现象。 检查一下报错产生的原因,首先...
  • 基于EasyPlayer的研究基础,TSINGSEE青犀视频进一步顺应互联网视频行业发展的需求,研发了H.265网页播放器EasyWasmPlayer.js,在4.2.0版本之后的EasyNVR视频平台已经可以支持自主选择播放器了。 部分用户会选择...
  • 之前的博文中我们讲过,为了适应现阶段H265编码的发展,TSINGSEE青犀视频在EasyNVR中首次加入了自主选择播放器的功能,可以选择使用EasyPlayer播放器播放H264编码视频,也可以选择使用EasyWasmPlayer播放器播放H265...
  • 在调用此接口时protocol传值为RTMP,得到如下返回: 接着用VLC播放就出现异常情况,发现无法播放,如下图: 但是在EasyCVR平台却发现可以播放: 这时我们就可以发现上图中EasyCVR系统选择的是EasyWasmPlayer播放器...
  • 作为支持H265编码的视频播放器EasyWasmPlayer.js,我们开发后立即在EasyNVR内做了测试,EasyWasmPlayer.js表现出了良好的适配性和优越的稳定性,目前在TSINGSEE青犀视频开发的其他视频平台中也已经集成。 ...
  • 对于很多要求网页直播的用户来说,目前市面上大多数可集成的平台都是要安装插件的,但是插件在某些项目中表现的并不友好,给用户的使用带来不便。因此TSINGSEE青犀视频研发的无插件视频直播平台就在这样的项目场中...
  • 作为支持H265编码的视频播放器EasyWasmPlayer.js,我们开发后立即在EasyNVR内做了测试,EasyWasmPlayer.js表现出了良好的适配性和优越的稳定性,目前在TSINGSEE青犀视频开发的其他视频平台中也已经集成。 ...
  • 播放器对比:EasyPlayer和EasyWasmPlayer EasyPlayer播放器 优点:支持RTMP、WS-flv、flv、hls视频流的web直播,同时视频直播过程中对是通过H5进行视频解码,只有客户端支持h5就可以完美进行视频的无插件直播,同时...
  • 对于TSINGSEE青犀视频开发的各种流媒体平台,大多数平台都已经支持了H.265编码的视频播放,即EasyWasmPlayer.Js播放器。 当然该播放器在编译中,对于不同的屏幕大小或者浏览器播放界面,播放器的屏占比也是不同的...
  • 基于EasyPlayer的研究基础,TSINGSEE青犀视频进一步顺应互联网视频行业发展的需求,研发了H.265网页播放器EasyWasmPlayer.js,在4.2.0版本之后的EasyNVR视频平台已经可以支持自主选择播放器了。 部分用户会选择...
  • 基于EasyPlayer的研究基础,TSINGSEE青犀视频进一步顺应互联网视频行业发展的需求,研发了H265网页播放器EasyWasmPlayer.js,在4.2.0版本之后的EasyNVR视频平台已经可以支持自主选择播放器了。 之前我们在测试...
  • TSINGSEE青犀视频开发的视频流媒体播放器EasyPlayer项目已经开拓了H265播放器EasyWasmPlayer,该播放器支持WS-flv、flv、hls,支持H.264、H.265编码格式的视频直播,在网页H265视频流的播放和集成方面具备很高的可靠...
  • 之前的博文中我们讲过,为了适应现阶段H265编码的发展,TSINGSEE青犀视频在EasyNVR中首次加入了自主选择播放器的功能,可以选择使用EasyPlayer播放器播放H264编码视频,也可以选择使用EasyWasmPlayer播放器播放H265...
  • 对于TSINGSEE青犀视频开发的各种流媒体平台,大多数平台都已经支持了H.265编码的视频播放,即EasyWasmPlayer.Js播放器。 当然该播放器在编译中,对于不同的屏幕大小或者浏览器播放界面,播放器的屏占比也是不同...
  • 在我们做视频开发的过程中,会遇到不少需求,其中视频截图就是一个比较常见的需求,因此TSINGSEE青犀视频不管是在设计视频平台还是视频播放器的时候,我们都会在原有开发的基础上对视频截图进行一些功能拓展。...
  • TSINGSEE青犀视频研发团队经过多年的积累,已经有了视频流媒体平台以及视频播放器等优秀产品,比如EasyWasmPlayer播放器,就是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS(m3u8)、WS-FLV视频直播与视频点播等多种...
  • 作为TSINGSEE青犀视频开发的视频流媒体播放器,EasyPlayer系列项目都是支持集成以及二次开发的,也可以通过下载试用获得真是的测试效果,其中新的H265播放器分支EasywasmPlayer播放器是网页播放的主流播放器。...
  • 播放器对比:EasyPlayer和EasyWasmPlayer EasyPlayer播放器 优点:支持RTMP、WS-flv、flv、hls视频流的web直播,同时视频直播过程中对是通过H5进行视频解码,只有客户端支持h5就可以完美进行视频的无插件直播,同时...
  • TSINGSEE青犀视频研发团队的成果包含了视频相关的很多内容,有视频流媒体平台EasyNVR、EasyGBS、EasyDSS,有视频智能分析平台EasyCVR,有H265视频播放器EasyWasmPlayer及各种专用直播流播放器,还有视频组件及推流...
  • TSINGSEE青犀视频研发团队经过多年的积累,已经有了视频流媒体平台以及视频播放器等优秀产品,比如EasyWasmPlayer播放器,就是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS(m3u8)、WS-FLV视频直播与视频点播等多种...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 124
精华内容 49
关键字:

easywasmplayer