Since this is a videochat plugin, the core part is of course imeplementing video chatting between users. It's really simple actually.
If you have heard of WebRTC, you should be aware that modern web browsers have great power. I'll make a brief introduction to WebRTC here, but if you want to truely understand it, further searching and reading is necessary.
WebRTC is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple Javascript APIs.WebRTC allows web pages to access local multimedia devices like a webcam and microphone, and transmit these media streams to another WebRTC capable browser via a peer-to-peer network channel. These media streams can also be accompanied by a powerful data channel that lets developer exchange arbitrary data between two peers! Its mission is to enable rich, high quality, RTC applications to be developed in the browser via simple Javascript APIs and HTML5.
Visit apprtc.appspot.com (one of WebRTC's official examples to show how it works), you'll find that it's just the application I use for my plugin. All I did is putting the website into an <iframe>, and that's it, incrediblely simple but works flawlessly!
View the code for more information.
Though the appspot site works really well, it has some constraints. If two people have entered the same room (same url), then the room gets full for it only supports a peer-to-peer channel. To avoid such mess, everytime a user comes to the VideoChat page, a random number will be generated and act as the query string of apprtc.appspot.com, which prevents you from entering a full or half-full room.
Frankly speaking, although it's a plugin to implement video chatting, the most difficult part is not on videochat, but on how to invite your friends to talk to you.To do that, I use elgg built-in User pickers view.
Next step is to find out how elgg actually sends a message, it's rather easy once you have the experience using Chrome Devtools or firebug.It turns out that a message is an HTTP POST request.
e.g.
There is one thing left which is implementing your own sending/inviting machanism and making a redirection once your friends clicks the link in your msg. I'll let code do the talking:
li += '<button id="invite" float="left" height=10 width=100>invite</button>';
$('<li>').html(li).appendTo(users);
These two lines add the invite button.
var redirect_url = base_url + "videochat/vc?r=" + rand_num;
var body = '<a href="' + redirect_url + '">请和我签订契约,加入视频聊天吧！</a>';
var msg_params = {
__elgg_ts:elgg.security.token.__elgg_ts,
__elgg_token:elgg.security.token.__elgg_token,
recipient_guid: info.guid,
subject:'有朋友邀请您参与视频聊天',
body: body,
};
$('#invite').click(function(){
$.ajax({
url: base_url + 'action/messages/send',
type: 'POST',
data: msg_params,
success: function(msg){
alert('your msg has been sent');
}
})
});
This part send the HTTP POST request we mentioned above.Note that the content of an invite message contains a link, redirecting the invitee to the videochat page. The random number is also passed as a query string parameter, forcing the message invitee enter the same room as inviter. The code below shows how it is done.
if ( window.location.search != "" ) // has query string.
rand_num = window.location.search.substr(3); //?r=num
else
rand_num = Math.floor(Math.random()*900000+100000);
$('#video').prop('src', "https://apprtc.appspot.com/?r=" + rand_num);
some other things you should pay attention to
- I use
ajax to prevent current page from reloading after sending a request. Why? Because two people can chat if and only if their iframe elements have the same src attribute (i.e. same room). If you reload, as mentioned before, a new random number will be generated thus making the inviter enter a different room.
- When sending HTTP request,
__elgg_ts and __elgg_token are necessary parameters. This is a machanism elgg uses to validate message. Luckily these two variables are stored in global scope:
- If you try to search friends in another page rather than the videochat Page, you still get a
invite button, however when clicked, you will be alerted:
This is done by detecting the existense of that random number since it only exists in the videochat page.
if (typeof rand_num != "undefined"){
//add invite button click EventListener, see above code
}
else
alert('do this on VideoChat page!');
这篇日志写起来很容易，决定是否要写却不容易——总感觉这像是一个咬文嚼字的古怪nerd才会写的东西。但既然想写，那肯定就还是要写。
从二次元产生的词汇很多，在大部分情况下，这些词汇仅仅在相对封闭的小部分人群中被使用。然而最近，“傲娇”这个词似乎总能在各种场合看见或是听见。
目前的状况是，我可能在某些场合听说了这个词，然后查了一下或者没查它的意思，接着按照自己的理解为这个词定义了一个意思，最后开始使用它。问题就在于，这个词的语境其实并不是那么简单，并不是随便就可以用的。就所遇到的情况来看，这个词往往被用在了不合适的语境。
自然，某个词汇的使用是无法被控制且不应该被控制的，但使用这个词带来了问题：
站在我的角度，会不知道说话人/作者究竟想表达什么意思。“傲娇”？哪里傲娇了？没有上下文怎么突然就讲出这个词？我知道TA肯定想表达某种意思，但又非常能肯定这个意思并非我所熟悉的那一个。那么究竟是什么意思？不知道。
另一方面，站在大多数人的角度看，如果没有听过这个词，当然也不知道说话人/作者究竟想表达什么。
所以，“傲娇”一词在日常生活中的使用完全是无效率的，它完全无法承担表意的作用。更重要的是，如果按照这个词的真正意义去理解它所在的句子，那么要么得到一个完全无意义的句子，要么得到一个偏离原意十万八千里的意思。误解比无效率更可怕。
所以建议就是：
不要在三次元使用“傲娇”，除非你真正知道你在说什么。
Never use it in real world unless you really know what you are talking about.
因为很重要所以说两遍
这里并不打算探讨词的用法，而且作为一个很有节操的人我也不想用“才、才不是因为你过来的，只是放学顺便路过而已”这样的句子来举例（喂这不就是举例吗！）。总之，不要用就好了。
PS：我一直认为“现充”是一个比“高富帅/白富美”表意准确性和丰富性强100倍的词，虽然它们的含义其实有些许不同，但替代使用是完全可以的。
