在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/ HTML5問答
凝雅 回答

微信開發(fā)團隊：呵呵噠，小樣，敢在我面前耍小聰明

還吻 回答

找到了一個好用的免費開源JS庫——streamedian

當當當~上鏈接：https://streamedian.com

介紹中講到，Multifunctional HTML5 RTSP streaming video player over WebSocket
就是說，利用websocket實現(xiàn)多功能的H5的rtsp視頻流播放器

這里是使用文檔：https://streamedian.com/docs/

對于對websocket、linux、服務器、甚至英文一知半解（一竅不通）并看了文檔也不理解的同學，請繼續(xù)看手把手中文教程：

首先我們理解一下個中原理：

目標：在你的瀏覽器（browser）上播放rtsp視頻流
問題：然而，H5的標簽<video>不支持這樣的播放
方案：這里利用我們的streamedian在你的服務端開啟一個websocket代理（proxy），負責接收rtsp流，并轉(zhuǎn)播給你的瀏覽器客戶端，streamedian在客戶端利用中間件（Media Sources Extensions）將經(jīng)過轉(zhuǎn)播收到的RTP H264和AAC包轉(zhuǎn)化成MP4包，“喂給“<video>進行播放

下面拿到streamedian的code來感受一下：

JS庫下載

方法一：通過官網(wǎng)下載
可能不是最新版，streamedian團隊還在不斷地修復bug中，建議用方法二、三下載最新更新的版本

進入https://streamedian.com 完成注冊并登錄
clipboard.png

clipboard.png
可以看到最上面紅框標注的是我們需要的客戶端和服務端的JS程序；

針對客戶端，如果你使用H5的原生播放器<video>標簽，下載Download player即可，此外還提供了代替版本————結(jié)合非原生H5播放器的clappr integration、videojs integration、Flowerplayer integration可供選擇。這里我只下載了Download player
針對服務端，下載proxy，這里的.rpm和.deb是兩種格式，選擇其一下載，我這里用的ubuntu，.deb更適用，點擊下載

接下來是對我們使用的免費版本streamedian的特性描述；
在Domain欄里。你需要輸入你所使用的客戶端的域名或IP，Add之后，點擊Download license。保存好這個license后面會用到，后面會解釋為什么要在license中明確特定的客戶端域名

方法三：從git上拉下來
npm install git://github.com/Streamedian/html5_rtsp_player.git
方法二：下載git的壓縮包
clipboard.png

配置與安裝

梳理一下，我們現(xiàn)在下載了什么呢？客戶端JS streamedian，服務端proxy streamedian_proxy.deb,一個licsense wsp.lic
clipboard.png

  • 服務端配置

將streamedian_proxy.deb和wsp.lic分別上傳至服務器，并在streamedian_proxy.deb根目錄下sudo dpkg -i streamedian_proxy.deb #安裝streamedian_proxy.deb軟件包（其中-i等價于--install）

安裝好后會生成/etc/ws_rtsp.ini，進入這個路徑，利用vim進行配置，這里我們只要設置general，其中port就是你的服務端轉(zhuǎn)播服務的端口，liscense_path則是你上傳的wsp.lic的絕對路徑，PRO version的參數(shù)可以不進行修改

clipboard.png

配置好端，可以用service ws_rtsp start命令啟動該服務，那么就在后端相應端口建立起了一個將rtsp轉(zhuǎn)播服務。至此服務端已經(jīng)配置好，只要前端把rtsp地址通過socket發(fā)送給服務端，就可收到rtsp流的socket包了

service ws_rtsp stop命令可以用于停止該服務，ps -aux|grep ws_rtsp命令可以用于查詢該服務進程的運行情況
clipboard.png

  • 客戶端配置

用Vs Code打開下載好的streamedian

終端運行npm install下載依賴
終端運行npm install --global rollup這里我們安裝的的rollup是一個JS模塊打包工具，后面會用到

接下來打開rollup.config.js，其中的entry配置了源文件，target則指定了打包生成的目標文件的目錄及文件名。終端運行rollup -c，可以看到在dist目錄下打包生成了目標文件streamedian.js

clipboard.png

至此我們的客戶端工作完成一半，客戶端的頁面在哪里呢？下面我們來做一個最簡單的頁面，這里以文件中的index.html為例
可以看到<script>標簽中引用了我們打包好的streamedian.js

引用了<video>標簽播放rtsp視頻

<source>中指定了rtsp流源,rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov是一個穩(wěn)定的可用于測試的源

socket的參數(shù)則是我們運行的rtsp流轉(zhuǎn)播服務器運行url，格式為ws://服務器IP:端口號，可以看到這里的端口號就是之前配置好的1104

clipboard.png

現(xiàn)在我們在瀏覽器中打開index.html，可是并沒有視頻顯示！我的理解是，前期我們在license中設置過客戶端的IP或域名，這意味對服務端來說，只對我們制定的客戶端進行流轉(zhuǎn)播，因此還差一步

clipboard.png

把index.html及streamedian.js放在同一目錄下，并上傳至制定的客戶端服務器

clipboard.png

大功告成~~

心癌 回答

這樣寫應該沒問題的，這不是props的錯，props只是一個名稱，用aaa都可以的，可能是版本的問題，看看你的版本號，以前的版本我記得是用的scope="props"，沒有前面的slot-

入她眼 回答

你的apache沒有配置PHP模塊吧。
看下你請求的header信息。

怣人 回答

這個主要是Angular臟檢查和echart的requestAnimationFrame方法沖突的問題。echart在繪制完成圖表之后，還是會不停調(diào)用requestAnimationFrame方法，而這個方法會觸發(fā)Angular的臟檢查，造成Angular不斷的檢查DOM樹，導致CPU占用一直居高不下，解決辦法如下：

this.ngZone.runOutsideAngular(() => {
  this.chart = echarts.init(this.root.nativeElement);
  this.chart.setOption(this.option, true);
})

這樣可以讓charts圖表的相關方法排除在Angular的臟檢查之外。
深入探討和研究可以參考：
echarts在GitHub上的一個關于該問題的issue
segmentfault探討這個問題的一篇文章

法克魷 回答

style.height獲取不了的，你高度沒寫在行間，也就是style里，用offsetHeight

眼雜 回答

如果不使用路由，你可以把要跳轉(zhuǎn)的組件引入進來，然后把當前的組件替換掉
fetch成功之后那數(shù)據(jù)放到state里面，然后在render下面if判斷一下根據(jù)數(shù)據(jù)來顯示不同的組件

無標題 回答

我猜想可能有：1.掃描體驗版小程序得微信號有沒有體驗權(quán)限；2.看看微信web開發(fā)者工具模擬器有沒有走的是videoLists路徑，如果走了，那就是可能是預覽模式還改成普通編譯。其他的話，看看控制臺報錯了沒，根據(jù)報錯信息來排查一下bug

青裙 回答

core.modules.ts

import { QuoteService } from 'xxx'
...
providers: [
   {
      provide: 'BASE_CONFIG', useValue: {
         uri: 'http://localhost:3000'
      }
   },
   QuoteService
]
深記你 回答

你好！提供一種思路。
既然用translateY來做上下滑動，可以用變量記錄元素的translateY值，touchmove事件中在原translateY基礎上加上手機滑動的距離。下面是一個簡單的例子，你可以看看。其中css()是設置及獲取transform屬性值的函數(shù)。

var startPoint = 0;
var startEl = 0;
inner.addEventListener('touchstart', function(e) {
    startPoint = e.changedTouches[0].pageY;
    startEl = css(inner, 'translateY');
});
inner.addEventListener('touchmove', function(e) {
    var nowPoint = e.changedTouches[0].pageY;
    var dis = nowPoint - startPoint;
    var translateY = dis + startEl;
    css(inner, 'translateY', translateY);
});

function css(element, attr, val){
    if(!element.transform){
        element.transform = {};
    }    
    if(typeof val === "undefined"){ 
        if(typeof element.transform[attr] === "undefined"){
            switch(attr){
                case "scale":
                case "scaleX":
                case "scaleY":
                case "scaleZ":
                    element.transform[attr] = 100;
                    break;
                default:
                    element.transform[attr] = 0;    
            }
        } 
        return element.transform[attr];
    } else {
        element.transform[attr] = val;
        var transformVal  = "";
        for(var s in element.transform){
            switch(s){
                case "scale":
                case "scaleX":
                case "scaleY":
                case "scaleZ":
                    transformVal += " " + s + "("+(element.transform[s]/100)+")";
                    break;
                case "rotate":
                case "rotateX":
                case "rotateY":
                case "rotateZ":
                case "skewX":
                case "skewY":
                    transformVal += " " + s + "("+element.transform[s]+"deg)";
                    break;
                default:
                    transformVal += " " + s + "("+element.transform[s]+"px)";                
            }
        }
        element.style.WebkitTransform = element.style.transform = transformVal;
    }
}
萌吟 回答

我用的是2.2.13,當聯(lián)動的時候數(shù)據(jù)就錯亂了，真是無語了，如一樓所說的退回2.2.9就好了，怎么給他們反饋啊，這么大bug

故人嘆 回答

提供一個思路, 預先將所有video標簽插入文檔中 然后顯示第一個,第一個播完顯示第二個

首頁 上一頁 13 14 15 16 17 18 19 20 21 下一頁 尾頁