2013-07-16 64 views
1

我們正在構建一個帶有PhoneGap & OpenTok phonegap插件的iOS(iPad)應用程序。但是,我們遇到了樣式問題。實際的視頻內容不會跨越通過opentok框架創建的對象元素的整個寬度。我們正在向視頻的opentok傳遞明確的尺寸參數,但我們仍然存在這個問題。OpenTok WebRTC樣式問題

任何幫助將不勝感激!

回答

0

我不能重現你的錯誤,在我的iOS設備上使用PhoneGap插件,一切都按照它應該的方式工作。

這是我的JavaScript代碼(在CoffeeScript的):

session = "" 
publisher = "" 

subscribeToStreams = (streams)-> 
    for e in streams 
    if (e.connection.connectionId == session.connection.connectionId) 
     return 
    div = document.createElement('div') 
    div.setAttribute('id', 'stream' + e.streamId) 
    div.setAttribute('class', "streamElement") 
    document.body.appendChild(div) 
    session.subscribe(e, div.id, {width: 640, height:480}) 

window.OTGroupChat = (apiKey, sessionId, token) -> 
    publisher = TB.initPublisher(apiKey, "myPublisherDiv", {width: 320, height: 240}) 

    session = TB.initSession(sessionId) 
    session.addEventListener 'sessionConnected', (event) -> 
    session.publish(publisher) 
    subscribeToStreams(event.streams) 

    session.addEventListener 'streamCreated', (event) -> 
    subscribeToStreams(event.streams) 

    session.connect(apiKey, token) 

其結果是:發佈視圖顯示爲320×240如預期,並且如所指定的訂閱流爲640x480顯示出來。

然後我通過直接鍵入到控制檯改變了訂閱流的高度:

$("object:last").height(100); 
TB.updateViews(); 

訂戶流乖乖地調整到了新的高度。

然後,我通過將對象元素的背景顏色設置爲粉紅色來測試實際視頻內容是否小於對象元素的寬度。沒有粉紅色顯示,所以實際的OpenTok視頻大於或等於對象元素的尺寸。當我將對象元素設置爲大小爲1的粉紅色邊框時,視頻周圍會出現一個1像素的粉色輪廓,表明該對象元素的大小肯定與視頻大小相同。

如果我誤解了你的意思,並且你指的是視頻兩邊的黑條,恐怕OpenTok的方式來保留寬高比,而試圖從iOS設備流式傳輸肖像視圖的用戶通常會遇到酒吧周圍的視頻。

enter image description here