OpenTok WebRTC样式问题

Question

我们正在构建一个带PhoneGap和OpenTok phonegap插件的iOS（iPad）应用程序。 但是，我们在样式方面存在问题。 实际的视频内容不会覆盖通过opentok框架创建的object元素的整个宽度。 我们正在将有关视频的显式调整参数传递给opentok，但仍然存在此问题。

任何帮助将非常感激！

Answer 1

我无法在您的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 )

结果：发布者视图显示为预期的320x240，订阅的流显示为指定的640x480。

然后，通过直接在控制台中输入内容来更改订阅的流的高度：

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

订户流听众地调整到其新的高度。

然后，我通过将对象元素的背景色设置为粉红色来测试实际视频内容是否小于对象元素的宽度。 没有显示粉红色，因此实际的OpenTok视频大于或等于object元素的尺寸。 当我给对象元素一个尺寸为1的粉红色边框时，视频周围有一个1px的粉红色轮廓，表明该对象元素与视频的尺寸肯定相同。

如果我误解了您，而您指的是视频两边的黑条，那么恐怕这是OpenTok保持宽高比的方式，而试图从其iOS设备播放人像视图的用户经常会在视频周围碰到黑条。 。