要解决Agora.io视频流只显示在容器的一半，另一半是黑色的问题，可以尝试以下代码示例：

1. HTML部分：

2. CSS部分：

#video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9比例的容器高度 */
}

#video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 视频填充整个容器 */
}

3. JavaScript部分（使用Agora.io SDK）：

// 创建Agora Client对象
var client = AgoraRTC.createClient({ mode: 'live', codec: 'h264' });

// 设置本地视频流容器
var localStream = AgoraRTC.createStream({
  video: true,
  audio: false,
});
localStream.init(function() {
  localStream.play('video-container');
});

// 加入频道
client.init('YOUR_APP_ID', function() {
  client.join(null, 'YOUR_CHANNEL_NAME', null, function(uid) {
    client.publish(localStream, function(err) {
      console.log('发布本地视频流失败: ', err);
    });
  }, function(err) {
    console.log('加入频道失败: ', err);
  });
}, function(err) {
  console.log('初始化Agora Client失败: ', err);
});

通过以上代码，视频流将填充整个容器，不会出现黑色的一半。确保将"YOUR_APP_ID"和"YOUR_CHANNEL_NAME"替换为您自己的Agora应用程序ID和频道名称。

这样，您就可以解决Agora.io视频流显示一半黑色的问题。