1

PhoneGap と OpenTok phonegap プラグインを使用して、iOS (iPad) アプリを構築しています。ただし、スタイリングに問題があります。実際のビデオ コンテンツは、opentok フレームワークを介して作成された object 要素の幅全体には及びません。ビデオに関して明示的なサイズ変更パラメーターを opentok に渡していますが、まだこの問題が発生しています。

どんな助けでも大歓迎です！

4

1 に答える 1

0

PhoneGap プラグインを使用している iOS デバイスでは、エラーを再現できません。すべてが正常に機能します。

これが私の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 )

結果: パブリッシャー ビューは期待どおり 320x240 で表示され、サブスクライブ ストリームは指定どおり 640x480 で表示されます。

次に、コンソールに直接入力して、サブスクライブしたストリームの高さを変更しました。

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

サブスクライバー ストリームは素直に新しい高さにサイズ変更されました。

次に、object 要素の背景色をピンクに設定して、実際のビデオ コンテンツが object 要素の幅よりも小さいかどうかをテストしました。ピンクは表示されないため、実際の OpenTok ビデオは object 要素のサイズ以上です。object 要素にサイズ 1 のピンクの境界線を指定すると、動画の周りに 1 ピクセルのピンク色のアウトラインが表示され、object 要素が動画とほぼ同じサイズであることを示しています。

私が誤解していて、ビデオの両側にある黒いバーについて言及していた場合、それはアスペクト比を維持するための OpenTok の方法であり、ユーザーが iOS デバイスから縦向きのビューをストリーミングしようとすると、ビデオの周りにバック バーが表示されることがよくあります。 .

ここに画像の説明を入力

于 2013-07-19T11:19:48.967 に答える